掌握DOM属性操作，完成元素内容设置，元素属性设置，控制元素样式
DOM简介
获取DOM元素
操作元素内容
操作元素属性
定时器-间隔函数
描述属性/方法效果
获取DOM对象document.querySelector()获取指定的第一个元素
document.querySelectorAll()获取指定的所有元素
操作元素内容元素.innerText操作元素内容，不解析标签
元素.innerHTML操作元素内容，解析标签
操作元素样式元素.style.width通过style操作样式
元素.className通过类名操作样式
元素.classList.add()增加类名
元素.classList.remove()删除类名
元素.classList.toggle()切换类名
间隔函数setInterval(function() {}, 1000)定时器，每隔指定时间重复执行
什么是 API
API: 应用程序接口（Application Programming Interface）
接口：无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能
DOM简介
DOM（Document Object Model——文档对象模型）
作用：DOM用来 操作网页文档，开发网页特效和实现用户交互
DOM的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作
document 对象
是 DOM 里提供的一个对象，是DOM顶级对象
作为网页内容的入口
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
获取DOM对象
利用css选择器来获取DOM元素
语法：
constbox=document.querySelector('div')
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的第一个元素对象
如果没有匹配到，则返回 null
选择指定css选择器的所有元素
语法：
constlis=document.querySelectorAll('.nav li')
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 伪数组
<script>
操作元素内容
DOM对象可以操作页面标签，所以本质上就是操作DOM对象（增删改查）
如果想要操作标签元素的内容，则可以使用如下2种方式：
1.对象.innerText 属性
2.对象.innerHTML 属性
innerText
innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
innerHTML
innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
常用属性修改
可以通过DOM操作元素属性，比如通过 src 更换 图片地址
最常见的属性比如：href、title、src 等等
直接能过属性名修改，最简洁的语法
操作样式属性
还可以通过 DOM对象修改标签元素的样式属性
比如通过 轮播图小圆点自动更换颜色 样式
点击按钮可以滚动图片，这是移动的的位置 translateX 等等
注意：
1.修改样式通过style属性引出
2.如果属性有-连接符，需要转换为小驼峰命名法
3.赋值的时候，需要的时候不要忘记加css单位
操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
核心：把多个样式放到css一个类中，然后把这个类添加到这个元素身上
语法：<script>
// 通过类名操作元素样式
// 1. 获取box盒子
const box = document.querySelector('.box')
// 2. 利用类名操作元素样式
// box.className = 'circle'
box.className = 'box circle'
// 3. 利用类名操作样式添加的新的类名会覆盖掉原先的类名
</script>
注意：
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别
获取: DOM对象.属性
设置: DOM对象.属性= 新值
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示
比如实现禁用按钮，勾选按钮等
如果为 true 代表添加了该属性
如果是 false 代表移除了该属性
比如： disabled、checked、selected
自定义属性（重要）
标准属性: 标签天生自带的属性 比如class、id、title等, 可以直接使用点语法操作比如：对象.title
自定义属性：
在html5中推出来了专门的data-自定义属性
使用场景：通过自定义属性可以存储数据，后期可以使用这个数据
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
定时器-间隔函数
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种: 间隔函数和 延迟函数
setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
开启定时器:
语法
<script>
setInterval(function() {
console.log('我是1秒钟执行一次')
},1000)
</script>
作用：每隔一段时间调用这个函数
注意：间隔时间单位是毫秒
关闭定时器
需要定时器变量名来关闭
返回的是一个唯一的数字
<script>
lettimer=setInterval(repeat,1000)// 注意调用的时候直接写函数名字不需要写小括号
console.log(timer)// 1
lettimer1=setInterval(repeat,1000)// 注意调用的时候直接写函数名字不需要写小括号
console.log(timer1)// 2
// 2. 关闭定时器
clearInterval(timer)
</script>
