DOM是HTML文档的编程接口。
它提供了对文档结构化的表达，并且定义了一种方式可以从程序中对该结构进行访问，从而改变文档的结构、样式和内容。
任何HTML文档都可以使用DOM表示为一个由节点组成的层级结构。
节点分为很多种类型，每一种类型对应着文档中不同的信息和标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关联。比如div、p就是元素节点，content就是文本节点，title就是属性节点。
操作
在开发中，都离不开DOM操作。
以前，使用JQuery来直接操作DOM，现在是使用vue、React这些框架后，我们使用数据来操作DOM，很少直接操作DOM了。
常见的DOM操作：
- 创建节点
- 查询节点
- 更新节点
- 添加节点
- 删除节点
创建节点
createElement，创建新元素，这个方法接收一个参数，就是要创建元素的标签名称。比如：
const divEle = document.createElement('div');createTextNode
createTextNode方法是用来创建一个文本节点，代码如下：
const textEle = document.createTextNode("文本内容");createDocumentFragment
createDocumentFragment，用来创建一个文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中。代码如下：
const fragment = document.createDocumentFragment()当请求把一个DocumentFragment节点插入文档树的时候，插入的不是DocumentFragment本身，而是它所有的html" class="superseo">子节点。
createAttribute
创建属性节点，可以自定义属性，代码如下：
const dataAttribute = document.createAttribute('aaa');获取节点
querySelector
传入任何有效的css选择器，就会获取到匹配到的第一个元素。
document.querySelector('div');如果没有传入指定的元素，那么就返回null
querySelectorAll
返回匹配到的所有节点，如果没有匹配到，就返回一个空节点列表。
更新节点
innerHTML
innerHTML不但能修改一个DOM节点的内容，还可以通过HTML片段修改节点内的子节点
innerText、innerContent
自动对字符串进行HTML编码
添加节点
innerHTML
appendChild
把一个子节点添加到父节点的最后一个子节点后面
insertBefore
把子节点插入到指定位置，使用方法如下：
parentElement.insertBefore(newElement,referceElement)子节点会插入到referceElement节点的前面
setAttribute
在指定元素中添加一个属性节点，比如：
const div = document.getElementById("id");
div.setAttribute("class",'className');删除节点
删除节点，首先要获得节点本身以及父节点，然后调用父节点的removeChild把自己删除掉。
const self = document.getElementById('id');
const parent = self.parentElement;
const removed = parent.removeChild(self)删除后的节点不在文档树中，但是存在浏览器内存中。
这就是关于DOM操作的学习笔记，希望对你有所帮助！！！