一.web API 基本认知
-
DOM 树是:
将 HTML 文档以树状结构直观的表现出来
作用：文档树直观的体现了标签与标签之间的关系
-
DOM对象创建:
浏览器根据html标签生成的** JS对象（DOM对象）**
DOM的核心就是把内容当对象来处理
-
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对象小结
-
获取页面中的标签我们最终常用那两种方式？
querySelectorAll()
querySelector()
-
他们两者的区别是什么？
querySelector() 只能选择一个元素， 可以直接操作
querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历
得到每一个元素
-
他们两者小括号里面的参数有神马注意事项？
里面写css选择器
必须是字符串，也就是必须加引号
三. 设置/修改DOM元素内容
学习路径：
对象.innerText 属性
对象.innerHTML 属性
1. 元素innerText 属性
能够操作标签的内容
文本中包含的标签不会被解析
2. 元素.innerHTML 属性
能够操作标签的内容
文本中包含的标签会被解析
3.1 设置/修改DOM元素内容小结
-
设置/修改DOM元素内容有:
元素.innerText 属性
元素.innerHTML 属性
-
两者的区别是:
元素.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. 设置/修改 表单元素 属性
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
布尔类型属性： checked、selected、 disabled ， 属性值是布尔值（true / false）
五. 定时器
定时器函数可以开启和关闭定时器
1. 开启定时器
作用：每隔一段时间，调用这个函数
间隔时间单位是毫秒
举例说明:
注意：
函数名字不需要加括号
2. 关闭定时器
注意:
- 函数名字不需要加括号
- 定时器返回的是一个id数字
5.1 定时器函数小结
-
定时器函数有什么作用？
每间隔一段时间就来调用函数
-
定时器函数如何开启？
setInterval(函数名, 时间)
定时器函数如何关闭？
