一.web API 基本认知

1. DOM 树是:

   将 HTML 文档以树状结构直观的表现出来

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

2. DOM对象创建:

   浏览器根据html标签生成的** JS对象（DOM对象）**

   DOM的核心就是把内容当对象来处理

3. document 是什么？

   是 DOM 里提供的一个对象

   网页所有内容都在document里面

二.获取DOM对象

1, 根据CSS选择器来获取DOM元素 (重点)

1.1 选择匹配的第一个元素

语法:

参数: CSS选择器 字符串

返回值：匹配的第一个元素, 如果没有匹配到，则返回null。

多参看文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

1.2 选择匹配的多个元素

语法：

参数: 有效的CSS选择器 字符串

返回值：对象集合

1. 获取一个DOM元素我们使用谁？
     querySelector()
2. 获取多个DOM元素我们使用谁？
     querySelectorAll()
3. querySelector() 方法获取的元素 **能直接操作修改**
4. querySelectorAll() 方法获取的元素集合 
   **不可以直接操作修改**， 只能通过遍历的方式一次给里面的元素做修改

得到的是一个伪数组：
有length长度、索引号
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得

注意事项:
哪怕只有一个元素，通过querySelect**All() **获取过来的也是一个伪数组，里面只有一个元素而已

获取DOM对象小结

1. 获取页面中的标签我们最终常用那两种方式？

   querySelectorAll()

   querySelector()

2. 他们两者的区别是什么？

   querySelector() 只能选择一个元素， 可以直接操作

   querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历

   得到每一个元素

3. 他们两者小括号里面的参数有神马注意事项？

   里面写css选择器

   必须是字符串，也就是必须加引号

三. 设置/修改DOM元素内容

学习路径：

对象.innerText 属性

对象.innerHTML 属性

1. 元素innerText 属性

能够操作标签的内容

文本中包含的标签不会被解析

2. 元素.innerHTML 属性

能够操作标签的内容

文本中包含的标签会被解析

3.1 设置/修改DOM元素内容小结

1. 设置/修改DOM元素内容有:

   元素.innerText 属性

   元素.innerHTML 属性

2. 两者的区别是:

   元素.innerText 属性 不能解析标签

   元素.innerHTML 属性 能够解析标签

   如果还在纠结到底用谁，你可以选择innerHTML

四. 设置/修改DOM元素属性

1. 设置/修改元素常用属性

还可以通过JS 设置 / 修改标签元素属性，比如通过 src 更换图片

最常见的属性 比如： href、title、src 等

语法:

对象 . 属性 = 值

2. 设置/修改元素样式属性

学习路径：

1.**通过类名操作CSS**

     className属性

     classList 语法

2.通过 style 属性操作CSS

1. 操作类名(className) 操作类名控制样式

语法：

注意：
由于class是关键字, 所以使用className去代替
直接使用 className 赋值会覆盖以前的类名

2. 通过 classList 操作类名控制样式

语法：

3. 通过 style 属性操作样式

语法：

举例说明:

注意：

1.修改样式通过style属性来实现

2.如果属性有-连接符，需要转换为 驼峰命名法

3.赋值的时候，需要的时候不要忘记加css单位

1. 设置/修改元素样式属性通过___style___属性来实现？
2. 如果需要修改一个div盒子的样式，比如 padding-left, 如何写？
      element.style.paddingLeft = ‘300px’
      驼峰命名法
3. 因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位

3. 设置/修改 表单元素 属性

1. 获取: DOM对象.属性名
2. 设置: DOM对象.属性名 = 新值

布尔类型属性： checked、selected、 disabled ， 属性值是布尔值（true / false）

五. 定时器

定时器函数可以开启和关闭定时器

1. 开启定时器

作用：每隔一段时间，调用这个函数

间隔时间单位是毫秒

举例说明:

注意：

函数名字不需要加括号

2. 关闭定时器

注意:

1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

5.1 定时器函数小结

1. 定时器函数有什么作用？

   每间隔一段时间就来调用函数

2. 定时器函数如何开启？

   setInterval(函数名, 时间)

3. 定时器函数如何关闭？