前言
DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。可以说，DOM是前端开发中最重要的一个渲染API，它决定了页面的样式结构的走向。
正文
节点层次
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构，总共有12种节点类型，这些类型都继承自一个基类型，因为其中有些节点只用于XML，本文只对针对HTML的节点做一个具体介绍，感兴趣的同学可以自己去了解剩余节点
- 元素节点(element): 对应网页的HTML标签元素
- 特性节点(attribute):对应HTML标签属性
- 文本节点(text):代表网页中HTML标签内容
- 注释节点(comment):表示网页中的HTML注释
- 文档节点(document):表示HTML文档，也称为根节点，HTML文档的文档节点只有一个子节点，即
<html>元素，称之为文档元素 - 文档类型节点(documentType):包含着与文档的doctype有关的所有信息
- DTD声明节点(notation)：代表DTD中声明的符号
上面是关于HTML的相关DOM节点，下面将对上述节点做一个具体介绍
HTMLCollection和NodeList
在了解节点类型之前，我想大家应该先对HTMLCollection和NodeList有一定的了解
Node类型
DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。js中的所有节点类型都继承自Node类型，因此所有的节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表示节点类型。节点类型由在Node类型中定义的下列12个数值常量来表示
nodeName和nodeValue属性
每个节点都继承了nodeName和nodeValue属性去区分节点的具体信息，后面再介绍各个节点的时候会具体说明
节点关系
- childNodes属性：每个节点都有一个childNodes属性，其中保存一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList对象的特别之处在于它是动态的，即DOM的结构变化能够自动反应在NodeList中
- parentNode属性：指向该节点在文档树中的父节点
- previousSibling属性：指向该节点在文档树中的前一个同胞节点
- nextSibiling属性：指向该节点在文档树中的后一个同胞节点
- firstChild属性：指向该节点在文档树中的第一个子节点
- lastChild属性：指向该节点在文档树中的最后一个子节点
childNodes属性与其他属性相比更方便一些，因为只需使用简单的关系指针，就可以通过它访问文档树中的任何节点
操作节点
- appendChild():用于向childNodes列表的末尾添加一个节点。如果传入appendChild中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置，任何DOM节点也不能同时出现在文档上的多个位置上
- insertBefore():把节点放到childNodes列表中某个特定的位置上。接受两个参数：要插入的节点和作为参数的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling)，返回插入节点
- replaceChild():替换特定节点，接受两个参数：要插入的节点和要替换的节点
- removeChild():移除特定节点，
- cloneNode():创建调用这个方法的节点的一个完全相同的副本，接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制节点及整个子节点树，在参数为false的情况下，执行浅复制，也就是复制节点本身。cloneNode()方法不会复制添加到DOM节点中的js属性，例如事件处理程序等。会复制特性，子节点，其他一切都不会复制
- normalize():规范化文档树中的文本节点，如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点
小结
1、DOM是语言中立的API，用于访问和操作HTML和XML文档。
2、DOM1级将HTML和XML文档形象地堪称一个层次化地节点树，可以用js来操作这个节点树，进而改变底层文档的外观和结构
3、最基本的节点类型是Node类型，用于抽象地表示文档中一个独立的部分。所有其他类型都继承自Node
小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！
