目录
1. 什么是DOM
文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口
它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容
2. 有哪些操作
- 创建节点
- 查询节点
- 更新节点
- 添加节点
- 删除节点
2.1 创建节点
2.1.1 createElement
创建新元素，接受一个参数，即要创建元素的标签名
const divEl = document.createElement("div");
2.1.2 createTextNode
创建一个文本节点
const textEl = document.createTextNode("content");
2.1.3 createDocumentFragment
用来创建一个文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中
const fragment = document.createDocumentFragment();
当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点
2.1.4 createAttribute
创建属性节点，可以是自定义属性
const dataAttribute = document.createAttribute('custom');
consle.log(dataAttribute);
2.2 获取节点
2.2.1 querySelector
传入任何有效的 css 选择器，即可选中单个 DOM 元素（首个）：
document.querySelector('#element')
document.querySelector('div')
document.querySelector('.element')
document.querySelector('[name="ok"]')
document.querySelector('div + ul > li')
2.2.2 querySelectorAll
返回一个包含节点子树内所有与之相匹配的Element节点列表
const notLive = document.querySelectorAll("p");
document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document.documentElement; 获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all['']; 获取页面中的所有元素节点的对象集合型
2.3 更新节点
2.3.1 innerHTML
不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树
// 获取<p id="p">...</p >
var p = document.getElementById('p');
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的内部结构已修改
2.3.2 innerText、textContent
与innerHTML的区别：无法识别任何HTML标签
innerText与textContent的区别：innerText不返回隐藏元素的文本，而textContent返回所有文本
2.3.3 style
DOM节点的style属性对应所有的CSS，可以直接获取或设置。遇到-需要转化为驼峰命名
p.style.fontSize = '20px';
2.4 添加节点
2.4.1 innerHTML
如果这个DOM节点是空的
- 例如，，那么，直接使用innerHTML = 'child'就可以修改DOM节点的内容，相当于添加了新的DOM节点
如果不是空的
- innerHTML会替换标签中的内容
2.4.2 appendChild
把一个子节点添加到父节点的最后一个子节点
2.4.3 insertBefore
把子节点插入到指定的位置，使用方法如下：
parentElement.insertBefore(newElement, referenceElement)
子节点会插入到referenceElement之前
2.4.4 setAttribute
在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值
const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一个参数属性名，第二个参数属性值。
2.5 删除节点
删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉
// 拿到待删除节点:
const self = document.getElementById('to-be-removed');
// 拿到父节点:
const parent = self.parentElement;
// 删除:
const removed = parent.removeChild(self);
removed === self; // true
删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置
