目录
1. 基本认知
1.1 目的和内容
1.2 什么是DOM
1.3 DOM对象
1.4 DOM树
2. 获取DOM元素对象
2.1 选择匹配到的第一个元素
2.2 选择匹配到的多个元素
2.3 其他获取DOM元素方法
3. 操作元素内容
3.1 元素对象.innerText 属性
3.2 元素对象.innerHTML 属性
4. 操作元素属性
4.1 操作元素常用属性
4.2 操作元素样式属性
4.3 操作表单元素属性
4.4 自定义属性
5. 定时器-间歇函数
1. 基本认知
1.1 目的和内容
目的: 就是使用 JS 去操作 html网页 和 浏览器，实现各种网页特效。
内容： DOM (文档对象模型)、 BOM （浏览器对象模型）
1.2 什么是DOM
- DOM 是 Document Object Model——文档对象模型 的简称）
- DOM 是 W3C组织推荐的一套操作文档结构、样式和内容的技术标准（所有的浏览器都遵循了）
- 一句话概括：DOM是浏览器提供的一套专门用来 操作网页 的功能
DOM作用：开发网页内容特效和实现用户交互
1.3 DOM对象
DOM技术的核心
- 以对象的方式描述整个网页，定义了表示和修改网页内容所需的对象
- 网页中的任何内容都可以用对象来表示，操作这个对象会自动作用到网页身上
- 整个html网页用 文档对象 来表示
- 网页中的标签用 标签对象（元素对象）来表示
DOM的核心思想：把网页内容当做 对象 来处理
DOM对象：浏览器根据html标签生成的 JS对象
- 标签上的所有属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
document 对象：
- DOM 里表示整个网页（整个文档）的对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
- 例：document.write()
- 网页所有内容都在document里面
1.4 DOM树
DOM树是什么
- DOM技术将 HTML 文档和标签映射成对象后，形成了类似“倒着的大树”的组织结构
- HTML文档的树状结构，我们称之为 文档树 或 DOM 树
DOM树的作用
- DOM文档树直观的体现了标签与标签之间的关系
- 通过DOM树可以获取到网页上的任意内容
2. 获取DOM元素对象
2.1 选择匹配到的第一个元素
语法：document.querySelector("css选择器")
参数：包含一个或多个有效的CSS选择器 字符串
返回值： CSS选择器匹配的 第一个元素 ，一个 HTMLElement对象。 如果没有匹配到，则返回null。
技术文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
2.2 选择匹配到的多个元素
语法：document.querySelectorAll("css选择器")
参数：包含一个或多个有效的CSS选择器 字符串
返回值：CSS选择器匹配的 NodeList 元素对象集合（ 伪数组 ）
例如： document.querySelectorAll("ul li")
得到的是一个 伪数组 ：
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
注意： 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个 伪数组 ，里面只有一个元素
2.3 其他获取DOM元素方法
3. 操作元素内容
3.1 元素对象.innerText 属性
- 元素对象的innerText属性对应着标签的内容
- 通过innerText属性，就可以获取/更新标签的内容
- 纯文本，不解析标签
举例：
3.2 元素对象.innerHTML 属性
- 元素对象的innerHTML属性对应着标签的内容
- 通过innerHTML属性，就可以获取/更新标签的内容
- 会解析标签，多标签建议使用模板字符
4. 操作元素属性
4.1 操作元素常用属性
通过 JS 设置/修改标签元素的属性，比如通过 src更换图片
最常见的属性比如： href、title、src 等
语法：对象.属性 = 值
举例：
4.2 操作元素样式属性
通过 style 属性操作CSS
语法：对象.style.样式属性 = 值
举例：
操作类名(className) 操作CSS
如果要修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过修改标签的类名实现。
语法：元素.className = "active" // active 是一个css类名
注意：
- 由于class是关键字，所以使用className代替
- className是使用新值换旧值, 如果需要添加一个类，注意保留之前的类名
通过 classList 操作类控制CSS
使用className 会覆盖以前的类名，我们可以通过classList方式 追加 和 删除 类名
语法：
4.3 操作表单元素属性
- 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
- 表单标签的大部分属性的操作，和普通标签属性的操作没有任何区别
获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值
举例：
- 表单标签有些属性是表示状态的，比如： disabled、checked、selected
- 状态属性获得的是：布尔值。
- 修改状态属性时，使用布尔值修改，为true 代表添加了该属性，false 代表移除了该属性
4.4 自定义属性
标准属性： 标签天生自带的属性，比如class id title等, 可以直接使用“.属性名”操作
自定义属性：
- html5中推出来了data-* 格式的自定义属性（在标签上记录一些信息）
- 给标签添加自定义属性一律以data- 开头
- 在DOM对象上以dataset对象方式获取
举例：
5. 定时器-间歇函数
1. 开启定时器
作用：每隔一段时间调用这个函数，间隔时间单位是毫秒
举例：
2. 关闭定时器
一般不会刚创建就停止，而是满足一定条件再停止
举例：
注意：
- 函数名字不需要加括号
- 定时器返回的是一个id数字
