文档对象模型（Document Object Model）
document 对象是页面的入口，提供了操作页面的方法，程序和脚本可以通过这个动态地访问和修改页面的内容
- DOM 代表着加载到浏览器窗口的当前网页，DOM 把一份文档表示为一棵树，一份文档是由节点构成的集合，每个节点都是一个对象（一份文档就是一份节点集合）
- 文档被加载在浏览器的窗口中，所以 document 又是 window 对象的一个属性
- 只要查询 DOM 中的元素，浏览器都会搜索整个 DOM 树，从中查找可能匹配的元素（尽量减少对 DOM 的访问）
节点
一共有 12 种节点类型。实际上通常用到的是其中的 3 种：
- 元素节点：HTML 标签
- 属性节点：标签的属性
- 文本节点：元素节点内的文本，只包含一个字符串，没有子节点
节点关系
对 DOM 的所有操作都是以 document 对象开始
DOM 节点是常规的 JS 对象，它们使用基于原型的类进行继承
实时集合：如果文档中的节点树发生变化，集合也会随之变化
静态集合：后面对文档对象模型的任何改动都不会影响集合的内容
Tip
console.dir( node )：可以按照对象的形式打印节点信息
Node
一个基础的接口，“抽象”类，没有实例，其他的节点对象都继承了 Node，提供节点共有的属性和方法
常用属性
获取节点的信息：
nodeType：元素节点是 1，属性节点是 2，文本节点是 3，document 节点是 9nodeName：节点名称nodeValue：获取和设置节点的值childNodes：获取所有子节点，返回 实时的 NodeListfirstChild：第一个子节点lastChild：最后一个子节点previousSibling：前一个兄弟节点nextSibling：后一个兄弟节点parentNode：父节点textContent：节点内的 纯文本，可以写入
上面大部分没有特殊表明的就是只读的
Document
全局变量 document 就是属于这个类，代表整个文档，作为 DOM 的入口，其属性和方法用于整个文档
常用属性
最顶层的标签可以直接作为 document 的属性来使用
document.documentElement：<html>document.body：<body>document.head：<head>
访问其他内容：
document.cookie：访问和设置 cookiedocument.title：访问和设置网页标题document.URL：读取网页 URLdocument.location：读取网页文档的 URL 相关的信息，返回 Location 对象
Tip
document.location = '...'，也可写为document.location.href = '...'。但是不用这个，用window.location
常用方法
获取 DOM 中的元素：
document.getElementById( id )：根据 id 字符串获取元素对象
创建节点：
document.createElement( tag )：创建一个标签元素节点document.createTextNode(text)：创建一个文本节点- …
Element
元素节点属于这个类，有元素节点特有的属性和方法
常用属性
innerHTML：获取元素内部的 HTML 字符串形式，也可以重新写入它（会完全重写，更安全的写入：使用 Node 上的 textContent）。如果插入一个脚本则不会执行outerHTML：类似 innerHTML 加上该元素自身（写入内容不会改变原来的元素，而是删除原来的元素再插入一个新的元素，原来的查询引用还是原来的，只是页面展示变成了新的）className：css 类名，赋值会替换整个字符串classList：操作 css class 的对象，可进行单个 class 的操作style：css 对象（对于多词（multi-word）属性，使用驼峰式 camelCase）
常用方法
getAttribute( attribute )：获取标签的特性值（大小写不敏感，怎么写都行）setAttribute( attribute, value )：设置标签的特性，value 会自动转为字符串hasAttribute( attribute )：检查标签特性是否存在removeAttribute( attribute )：移除特性attributes：所有特性的实时集合（类数组对象，可迭代对象）matches( css )：检查该元素是否与给定的 CSS 选择器匹配，一般用于在遍历中进行过滤closest( css )：返回离当前元素最近的祖先元素（可以是本身）elemA.contains( elemB )：检查 elemA 中是否包含 elemB，是返回 trueinsertAdjacentHTML( whereStr, html )：在哪里插入 HTML 字符串
如果一个标签元素有 id 属性，则可以直接使用这个 id 变量名访问该元素
HTML 特性 和 DOM 属性
浏览器加载页面时，他会解析 HTML 并生成 DOM 对象，对于元素节点。大部分 HTML attributes 会变成 DOM 对象的 properties
如：标签有 id <body id="test">，那么 DOM 对象中就有 body.id="test"
大部分情况下会互相实时同步更新（例外：如 input.value 只能从特性同步到属性，反过来则不行），理解为有用户交互控制的不会从属性同步到特性（防止受控）
| 区别 1 | 区别 2 | 区别 3 | |
|---|---|---|---|
| HTML attributes | 大小写不敏感 | 字符串 | 使用 Element 的 getAttribute 等方法访问 |
| DOM properties | 大小写敏感 | 多种类型 | 直接通过 Element 的属性访问 |
有些特性和属性的值不一样，如：
.getAttribute('href')：获取的是 HTML 中属性的原始值，因此可以精确地处理相对路径和没有协议的情况。.href：获取的是解析后的完整 URL，通常包括协议和主机名等。
HTML 特性可以自定义任意名称
自定义特性可能在未来被 HTML 标准使用，但是以 data- 开头的特性都被保留可以安全使用，data- 后面的名称可以通过 elem.dataset.xxx 获取
像 data-my-state 这样的多词特性可以以驼峰式进行调用：dataset.myState
Document 和 Element 通用
都有的一些属性和方法
常用属性
children：子 元素节点hidden：控制是否隐藏节点（类似 style=“display: none”）
常用方法
查询：
querySelector( css )：返回给定 CSS 选择器的第一个元素querySelectorAll( css )：返回给定 CSS 选择器的所有元素，返回 静态的 NodeList（类数组对象）getElementsByTagName( tag )：根据标签的名称获取元素节点（可以使用通配符（ * ）返回所有节点，返回 实时动态的 HTMLCollection）getElementsByClassName( names )：根据类名获取元素节点（多个类名空格隔开，返回 实时动态的 HTMLCollection）
修改：
append( ...nodes or strings )：在节点里面的末尾 插入节点或字符串prepend( ...nodes or strings )：在节点里面的开头 插入节点或字符串before( ...nodes or strings )：在节点前面 插入节点或字符串after( ...nodes or strings )：在节点后面 插入节点或字符串replaceWith( ...nodes or strings )：替换为给定的节点或字符串remove()：移除节点
其他：
.cloneNode( bool )：克隆当前节点，true：深克隆，false：不克隆子元素
总结
搜索
| 方式 | document | element | 类型 | |
|---|---|---|---|---|
| querySelector | css 选择器 | √ | √ | 静态 |
| querySelectorAll | css 选择器 | √ | √ | 静态 |
| getElementById | id | √ | 静态 | |
| getElementsByTagName | tag 或 * | √ | √ | 实时 |
| getElementsByClassName | class | √ | √ | 实时 |
写入
| 区别 | |
|---|---|
| innerHTML | 作为 HTML 写入 |
| textContent | 作为 纯文本 写入 |
修改
| 区别 | |
|---|---|
| append / prepend … | 插入 DOM 节点 或 纯文本片段 |
| insertAdjacentHTML | 作为 HTML 代码插入 |