一、web API 的基本认知
- 作用: 就是使用 JS 去操作 html 和浏览器
- 分类：DOM (文档对象模型)、BOM（浏览器对象模型）
DOM：DOM（Document Object Model）文档对象模型 是用来呈现以及与任意 HTML 或 XML文档交互的API
作用：1.实现网页特效
2.实现用户交互
DOM树：1.将 HTML 文档以树状结构直观的表现出来
2.作用：文档树直观的体现了标签与标签之间的关系
DOM对象：浏览器根据html标签生成的 JS对象
DOM的核心思想：把网页内容当做对象来处理
二、获取DOM元素
querySelector
语法：document.querySelector('css选择器') document 文档 query 查询 Selector 选择器
参数：css选择器
作用：从文档中来根据css选择器获取元素
返回值: 匹配的第一个元素, 如果没有匹配到，则返回nullquerySelectorAll
语法：
参数：css选择器
作用：获取到所有的
返回值: 元素集合querySelector 和 querySelectorAll区别
querySelector 获取第一个 获取不到的结果是null
querySelectorAll 获取所有的 返回的始终是个伪数组伪数组
和数组长的像（数字下标 、 length属性）可以和数组一样进行for循环遍历
无法使用数组的方法 push pop ....
演示其他获取元素语法（了解）
通过id名来获取
document.getElementById('box')
通过类名来获取
document.getElementsByClassName('box')
通过标签名来获取
document.getElementsByTagName('ul')
三、修改元素内容-------innerText innerHTML
1.innerText
// 一定要先获取到元素
let divObj = document.querySelector('div')
// console.log(divObj)
// innerText 获取内容
console.log(divObj.innerText)
// innerText 设置内容（纯文本） 等号赋值即可
divObj.innerText = '哈哈，内容被我修改了'
// innerText 设置内容（带标签） 不识别解析标签
divObj.innerText = '<h1>哈哈，内容被我修改了</h1>'
2.innerHTML
// innerHTML 获取内容
console.log(divObj.innerHTML)
// innerHTML 设置内容（纯文本）
divObj.innerHTML = '这是使用innerHTML修改的内容'
// innerHTML 设置内容（带标签） 可以识别解析标签
divObj.innerHTML = '<h1>这是使用innerHTML修改的内容</h1>'
细节：innerText 与 innerHTML 设置内容的时候，会覆盖原有的内容
如何实现把原本的内容也带上？
divObj.innerHTML += '<h1>这是使用innerHTML修改的内容</h1>'
// 本质上： divObj.innerHTML = divObj.innerHTML + '<h1>这是使用innerHTML修改的内容</h1>'
// 把原本的内容先获取到了，在拼接上h1的内容，最后设置作为div的内容展示出来
四、修改元素属性
1.设置/修改元素常用属性（src 、title等属性）
语法：对象.属性 = 值
2.通过类名操作CSS
- js使用className操作类名修改样式
语法：元素.className = '类名'
divObj.className = 'active' // ok
// 无效的
// divObj.class = 'active'
注意说明：
1. 在JS中使用className表示类名，因为class在js中是个关键字在标签上，class属性表示类名，但在js中使用className表示类名
2. 使用className有 覆盖 问题
-
使用classList操作类名修改样式
classList.add() 添加类名 不会有覆盖问题 理解为是追加效果
classList.remove() 移除类名
classList.toggle() 切换类名（如果有该类名，会移除掉，如果没有该类名，会添加该类名）说明：
classList 和 className之间的区别
className 存有覆盖问题
classList 是不存在覆盖问题属性和方法的区分
// className 是属性，不能当方法加() 来使用
divObj.className('active') // error
divObj.className = 'active' // ok
// classList.add 是个方法，加() 使用的
divObj.classList.add = 'active' // 错误写法
divObj.classList.add('active')
3.通过style控制样式属性
语法：对象.style.样式属性名 = 值
通过style操作样式 本质上 设置行内样式
注意点
1. 遵守驼峰式写法
2. 不要落下单位px单位, 否则没有效果
4.表单的属性设置 （value、type、disabled、checked、selected）
语法
获取： 对象.属性名
设置： 对象.属性名 = 值
布尔类型的属性 （disabled、checked、selected）
true false
以上这三个属性的值是true false
补充个细节
// 当设置的值不是布尔类型（true、false），底层进行隐式转换的
// 'false' 隐式转换为布尔类型（true）所以以下代码是禁用效果
// inp1.disabled = 'false' // false 'false' 字符串
inp1.disabled = '' // 不禁用
回顾：哪些数据会转成布尔类型false
'' null undefined NaN false 0 不成立的表达式 比如3 > 5
五、定时器函数
定时器函数
作用: 每隔一段时间，就会来调用函数
- 开启定时器语法:
setInterval(函数, 间隔时间)
间隔时间 单位是ms
注意易错
如下写法，会将fn() 立即调用，就没有了定时效果
setInterval(fn(), 1000) // 错误效果
- 关闭定时器
语法：clearInterval(定时器id)
