hi 本周复习一下dom相关内容

前面学到了javascript编程基础，首次接触到了呃编程语言。

那今天我们继续复习Dom相关内容。

JavaScript就有这三部分组成：：ECMAScript（JavaScript语言基础）；web APi：DOM (文档对象模型)、BOM（浏览器对象模型）

1、什么是dom：DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。

即：DOM是浏览器提供的一套专门用来操作网页内容的功能

微信截图_20221107125108.png

如何获取dom对象：


<body>
  <div>123</div>
  <script>
    const div = document.querySelector('div')
    // 打印对象
    console.dir(div)  // dom 对象
  </script>
</body>

2、什么是dom树

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，

描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

微信截图_20221107125406.png

3、dom对象

DOM对象：浏览器根据html标签生成的 JS对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

3、1获取DOM对象

根据CSS选择器来获取DOM元素，第一个匹配返回


<body>
  <div>123</div>
  <script>
    const div = document.querySelector('div')
    // 打印对象
    console.dir(div)  // dom 对象
  </script>
</body>

根据CSS选择器来获取DOM元素-全部


<body>
  <div>123</div>
  <div>123</div>
  <div>123</div>
  <div>123</div>
  <script>
    const div = document.querySelectorall('div')
    // 打印对象
    console.dir(div)  // dom 对象
  </script>
</body>

注意：得到的是一个伪数组：

 有长度有索引号的数组

 但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历（for）的方式获得。

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

3、2操作元素内容

对象.innerText 属性，只识别文本，不能解析标签
对象.innerHTML 属性：能识别文本，能够解析标签

eg：随机抽奖案例

<body>
  <div class="wrapper">
    <strong>传智教育年会抽奖</strong>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>二等奖：<span id="two">???</span></h3>
    <h5>三等奖：<span id="three">???</span></h5>
  </div>
  <script>
    // 1.声明数组
    const personArr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友']
    // 2. 先做一等奖
    // 2.1 随机数 数组的下标
    const random = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    // 2.2 获取one 元素 
    const one = document.querySelector('#one')
    // 2.3 把名字给 one
    one.innerHTML = personArr[random]
    // 2.4 删除数组这个名字
    personArr.splice(random, 1)
    // console.log(personArr)
<、script>

3、3操作元素属性

通过 style 属性操作CSS

微信截图_20221107130052.png

操作类名(className) 操作CSS：className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

微信截图_20221107130131.png

通过 classList 操作类控制CSS：可以通过classList方式追加和删除类名

微信截图_20221107130152.png

基础内容就是这样子啦一起复习吧上周懈怠，这周抓紧补回来/(ㄒoㄒ)/~~

【博学谷学习记录】超强总结 用心分享|前端学习w7-javascript-Dom基础知识