版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/clirus/article/details/68922570
1、DOM概述
- DOM是一种与浏览器、平台及语言无关的接口，能够以编程方式访问和操作文档。
- DOM是Document Object Model（文档对象模型）的简称。
- DOM提供了访问、操作该模型的API。
2、DOM分层结构
在DOM中文档的层次结果被表示为树形结构，倒立的树形结构。
3、遍历文档
在DOM中，HTML文档各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node对象的树。
Node对象的属性
| 属性名 | 类型 | 解释 |
|---|---|---|
| parentNode | Node | 节点的父节点，没有父节点则为null |
| childNodes | Nodelist | 节点的所有子节点的NodeList |
| firstChild | Node | 节点的第一个子节点，没有则为null |
| lastChild | Node | 节点的最后一个子节点，没有为null |
| nodeName | String | 节点名 |
| nodeValue | String | 节点值 |
| previousSibling | Node | 上一个兄弟节点 |
| nextSibling | Node | 下一个兄弟节点 |
| nodeType | short | 表示节点类型的常量 （Element 1,） |
4、DOM操作文档
Node对象常用方法
| 属性名 | 解释 |
|---|---|
| insertBefore(newChild,refchild) | 在现有节点refChild之前插入节点newChild |
| replaceChild(newChild,oldChild) | 将子节点清单中的子节点oldChild换成newChild，并返回oldChild节点 |
| removeChild(oldChild) | 删除oldChild节点并返回 |
| appendChild(newChild) | 将节点newChild放入原列表的末尾，如果newChild已经存在树中，则先将其删除 |
| hasChildNodes() | 返回bool值，是否存在此节点 |
| cloneNode(deep) | 返回这个节点的拷贝（包括属性），如果deep为true则拷贝所有包含的节点，否则只拷贝这个节点。 |