一：Web API 基本认知
作用: 就是使用 JS 去操作 html 和浏览器
分类：分类：DOM (文档对象模型)、BOM（浏览器对象模型）
二：Dom
什么是dom？
DOM（Document Object Model）文档对象模型 是用来呈现以及与任意 HTML 或 XML文档交互的API【DOM是浏览器提供的一套专门用来 操作网页内容 的功能】
DOM的作用：
1.实现网页特效
2.实现用户交互
Dom树
HTML 文档以树状结构直观的表现出来
能直观的体现了标签与标签之间的关系
Dom对象（重要）
什么是dom对象？---浏览器根据html标签生成的 JS对象
dom对象的核心思想：把网页内容当作对象来处理
document对象
是dom里提供的一个对象，它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
网页所有内容都在document里面
怎么获取dom对象呢？
获取单个元素
根据CSS选择器来获取DOM元素 (重点)
语法：
document.querySelector('css选择器')
它获取的是匹配的第一个元素！！！
参数（css选择器）要填写字符串内容！！！
返回值：匹配到的第一个元素，没有的话就返回null
获取多个元素
document.querySelector只能获取一个元素，那么我们想要获取多个元素用什么方法呢？---document.querySelectorAll
语法：
document.querySelectorAll('css选择器')
参数也要填写字符串内容
返回值是一个对象集合（伪数组），没有值的话就返回一个空的伪数组
什么是伪数组？
伪数组：
Ø 有length长度、索引号
Ø 但是没有 pop() push() 等数组方法
Ø想要得到里面的每一个对象，则需要遍历（for）的方式获得
其他获取DOM元素方法（了解）
// 通过id名来获取
console.log(document.getElementById('box'))
// 通过类名来获取
console.log(document.getElementsByClassName('ul')) // 也是个伪数组
// 通过标签名来获取
console.log(document.getElementsByTagName('h1'))
设置/修改DOM元素内容
如果想要修改标签元素的里面的内容，则可以使用如下方式：
对象.innerText 属性：
元素innerText 属性
Ø 能够操作标签的内容
Ø 文本中包含的标签不会被解析
语法：
let divObj = document.querySelector('div') // js对象（DOM对象）
// innerText 设置内容（纯文本） 使用等号赋值即可
divObj.innerText = '绿色的回忆，可绿了'
对象.innerHTML 属性
如果想要解析标签呢？innerText属性并不能解析标签，此时要用到innerHTML属性，这也是工作中比较推荐的一种属性方法。
元素.innerHTML 属性
Ø 能够操作标签的内容
Ø 文本中包含的标签会被解析
语法：
// innerHTML 设置内容（带标签） 标签是生效的（可以被解析 生效了）
divObj.innerHTML = '<h2>这是修改后的</h2>'
注意：
docuemnt.querySelectorAll('div') querySelectorAll querySelector 都是方法，需要()
divObj.innerHTML = '内容' innerHTML 都是属性，使用等号来赋值即可
设置/修改DOM元素属性
想要修改DOM元素属性的前提，都是必须先要获取到要修改的元素。必须先使用documentquerySelector获取元素，才能进行修改操作。
设置/修改元素常用属性
可以通过JS 设置 / 修改标签元素属性，比如通过 src 更换图片 l 最常见的属性 比如： href、title、src 等
对象.属性 = 值；
设置/修改元素样式属性
一. 通过类名操作CSS
①. className属性
// 使用className操作类名修改样式
let divObj = document.querySelector('div')
// 语法：DOM对象.className = '类名'
divObj.className = 'active'
注意：
- 由于class是关键字, 所以使用className去代替
- 有覆盖问题
②. classList 语法
使用classList操作类名修改样式
classList.add() 追加
divObj.classList.add('active')
classList.remove() 删除
divObj.classList.remove('one')
classList.toggle() 切换（如果元素有该类名，会移除该类名，没有该类名，添加上该类名）没有就添加，有就移除
divObj.classList.toggle('one') // 没有就添加，有就删除
二. 通过 style 属性操作CSS
对象.style.样式属性 = 值；
divObj.style.width = '100px'
注意：
1.不要落下单位px，否则设置无效
2.对于有中划线的，需要遵守驼峰式写法 比如 font-size z-index...
设置/修改 表单元素 属性
语法
// 获取： 对象.属性名
// 设置： 对象.属性名 = 值
1.value属性
// 获取
console.log(inp1.value)
// 设置
inp1.value = '我们都会月薪过万的
2.type属性
// type属性
// 获取
console.log(inp1.type)
// 设置
inp1.type = 'password' // 设置为密码框
布尔值的属性（disabled、checked、selected）
// 布尔类型的属性 （disabled、checked、selected）
// 布尔类型（true 和 false）
// 就是说，以上属性的值，要么是true，要么false
inp1.disabled = true // true 表示要禁用 inp1
inp1.disabled = false // false 表示去掉禁用 inp1
inp2.checked = false // 不选中
定时器函数
使用场景：网页中的倒计时、轮播图的自动切换效果
定时器函数作用：每隔一段时间，重复调用一个函数 间隔时间单位是毫秒
- 开启定时器
setInterval(函数, 间隔时间)
2.关闭定时器
clearInterval(定时器id)
参数： 定时器的id 是当setInterval开启定时器的时候，返回值（是开启的定时器的id）
案例：用户注册倒计时
// 用户注册倒计时
// 按钮60秒之后才可以使用
// 分析步骤
// 1. 先获取到按钮
// 2. 将按钮禁用 ==> disabled 布尔类型属性
// 3. 倒计时效果 每间隔一秒来更新下按钮的内容
// 定时器 + innerHTML
// 4. 倒计时结束了 为0的时候，要干啥
// 4.1 去掉禁用效果
// 4.2 修改按钮的文字
// 4.3 关闭定时器
// 1.
let btnObj = document.querySelector('.btn') // 元素 DOM对象
console.log(btnObj)
// 2.
btnObj.disabled = true // 按钮真的禁用了
let num = 6 // nun变量表示倒计时从6开始
// 3.
let timerId = setInterval(function () {
console.log('测试代码')
// num-- 需要每间隔一秒来执行一次
num--
console.log(num) // 6 5 4 3 2 1 0
btnObj.innerHTML = `我已经阅读用户协议(${num})`
// 注意if位置不要跑偏，写在定时器的函数里面
if (num === 0) {
// num为0，倒计时结束
// 去掉禁用效果
btnObj.disabled = false
// 关闭定时器
clearInterval(timerId)
// 修改按钮的内容
btnObj.innerHTML = '我已经同意该协议！'
}
}, 1000)
