DOM
JS由三部分组成
1、BOM
2、DOM
3、ECMAScript
ES和BOM在前面的文章已经介绍过了
今天开始JS组成的最后一部分DOM（文档对象模型）
我们知道，JS中的这三个部分实际上就是三种规范，只要是实现了这三种规范，那么这个语言就可以说是JS
DOM（文档对象模型）也是一种规范，是针对HTML和XML文档的API（应用程序编程接口）
DOM的功能主要是用于将文档解析为一个层次化的节点树，通过DOM提供的API让开发人员能够操作这棵节点树
用于对文档内容进行操作（增、删、改、查）
节点层次
DOM将文档描绘为一个层次化的文档树，那么DOM有哪些层次呢？
1、文档节点（每个文档的根节点，该节点只有一个子节点——文档元素）
2、文档元素（文档中所有的元素都包含在文档元素中，html页面中文档元素始终是<html>元素）
Node类型
在介绍节点之前需要先介绍一下Node类型
该类型是由DOM1规范中所规定的，用于所有节点类型的实现
JS中所有的节点类型都继承自Node类型
所以所有的节点都共享着相同的基本属性和方法
1、nodeType属性（该属性用于表示节点的类型，用12个数值常量来表示）
- Node.ELEMENT_NODE(1) //元素节点
- Node.ATTRIBUTE_NODE(2) //属性节点
- Node.TEXT_NODE(3) //文本节点
- Node.CDATA_SECTION_NODE(4) //CDATA区域（XML）
- Node.ENTITY_REFERENCE_NODE(5) //实体指向节点
- Node.ENTITY_NODE(6) //实体节点
- Node.PROCESSING_INTRUCTION_NODE(7) //处理指令节点
- Node.COMMENT_NODE(8) //注释节点
- Node.DOCUMENT_NODE(9) //文档节点
- Node.DOCUMENT_TYPE_NODE(10) //文档类型节点
- Node.DOCUMENT_FRAGMENT_NODE(11) //文档片段节点
- Node.NOTATION_NODE(12) //标记节点
通过上述的常量可以判断文档中的节点的类型
if(节点.nodeType === Node.TEXT_NODE){
// 代码
}
PS：IE中由于并没有暴露出Node对象，所以为了保证浏览器的兼容性最好使用数值常量来进行判断
要注意的是在WEB浏览器中浏览器不一定实现了上述的某类对象
因为这只是规范，至于浏览器厂商有没有按照规范实现，这就是各个浏览器的问题了
2、nodeName属性
节点名称，取决于节点类型
对于元素节点该值为元素的标签名
3、nodeValue属性
节点值，取决于节点类型
对于元素节点该值始终为 null
4、childNodes属性
该属性保存着一个 NodeList 对象
NodeList是一种类数组对象，用于保存一组有序的节点
该对象是动态的，不是静态的（即文档结构的变化会动态地反应在该数组中）
访问其中的某个节点可以使用与数组一致的方括号，也可以使用 item(索引值) 的方式获取其中的节点
5、firstChild属性
指向childNodes的第一个节点
6、lastChild属性
指向ChildNodes的最后一个节点
7、parentNode属性
该属性指向当前节点的父节点
8、previousSibling属性
指向当前节点的前一个同级节点
9、nextSibling属性
指向当前节点的后一个同级节点
10.ownerDocument属性
指向当前节点所属的文档节点，每个节点只能属于一个文档节点
节点方法
1、hasChildNodes方法
用于判断当前节点是否存在子节点，返回一个布尔值
2、appendChild方法
用于给当前节点childNodes列表末尾添加子节点，参数需传入一个节点对象
若传入的节点对象已存在于当前的文档中，则将这个节点从原来的位置移到现在的位置
3、insertBefore方法
该方法需要传入两个参数
1.要插入的节点
2.要插入到childNodes列表中哪个节点的前面
若第二个参数为null则插入到最后，与appendChild所执行的操作一致
4、replaceChild方法
依旧需要两个参数
1.用于替换的节点
2.被替换的节点
该方法返回被替换的节点
5、removeChild方法
传入需要移除的节点（childNodes中）
返回被移除的节点
PS：上述5个方法对于没有子节点的节点会报错
6、cloneNode方法
复制当前节点，传入一个布尔值
true 深复制，复制当前节点及其子节点
false浅复制，仅复制当前节点本身
7、normalize方法
用于整理当前节点的子节点
即由于文档操作很可能会出现一些，不符合逻辑的结构该方法就用于整理这些结构
如：空文本节点、两个相邻文本节点
对于上述例子，空文本节点会被移除，两个相邻的文本节点会合并为一个
对于Node类型我们虽然可以访问但是并不能看到详情
说明Node类型是JS的内置对象
但是我们可以通过Object.keys来看到这些属性
而后面我们提到的属性、方法楼主没找到方法把它们遍历出来
如果有知道的小伙伴可以留言告知，感激不尽~~~