WebAPI_DAY1_DOM
WebAPI
作用：使用JS去操作html和浏览器
分类：DOM（文档对象类型）、BOM（浏览器对象类型）
DOM（Document Object Model）
- 浏览器提供的一套专门用来操作网页内容的功能
- 开发网页特效、实现用户交互
DOM树
将html文档以树状结构表现出来，称为文档树或DOM树
作用：只管体现标签与标签之间的关系
DOM对象
浏览器根据html标签生成的JS对象（DOM对象）
- 所有标签属性都可以在这个对象上找到
- 修改这个对象的属性会自动映射倒标签身上
DOM核心思想
把网页内容当作对象来处理
Document对象
- DOM里最大的对象
- 网页的所有内容都在document里
获取DOM对象
根据CSS选择器来获取DOM元素
1、选择匹配的第一个元素
语法：
document.querySelector('css选择器')
参数：
- 包含一个或多个有效的css选择器字符串
返回值：
- css选择器匹配的第一个元素，一个HTMLElement对象
- 如果没有匹配返回null
2、选择匹配的多个元素
语法：
document.querySelector('ul li')
返回值：
css选择器匹配的NodeList对象集合
如何修改
通过遍历的方式一次给里面的元素做修改（哪怕只有一个元素）
设置/修改DOM元素内容
1、document.write()
- 只能将文本内容追加到前面的位置
- 文本中包含的标签会被解析
2、元素innerText属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
3、元素innerHTML属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
设置/修改DOM元素属性
1、设置/修改常用属性
对象.属性 = 值
2、设置/修改样式属性
2.1、通过style
对象.style.样式属性 = 值
2.2、操作类名(className)操作CSS
如果修改的样式比较多,直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法:
元素.className ='active'
注意:
- 由于class是关键字,所以使用className去代替
- className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名
2.3、通过classList 操作类控制CSS
为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法:
// 追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类（如果有就删去，如果没有就添加）
元素.classList.toggle('类名')
3、定时器：间歇函数
场景：倒计时
目标：使用定时器函数重复执行代码
3.1、开启定时器
setInterval(函数,间隔时间)
作用：每隔一段时间调用这个函数，间隔时间单位是毫秒
3.2、关闭定时器
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)
3.3、打开定时器
变量名 = setInterval(函数,间隔时间)
//注意，后面重启定时器的时候，前面是没有let的，不然会打开两个定时器
