目录
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数字