DOM(文档对象模型)可以将任何 HTML和XML 文档描绘成一个由多层 Node节点构成的结构。
DOM 有 DOM树的概念，在 JavaScript 中的所有节点类型都继承自 Node基类，因此所有节点类型都共享相同的基本属性和方法。
-
-
-
-
-
其中 Element元素节点包括 HTMLElement 和 SVGElement构成，我们处理的 Element元素并不全是 HTML元素。
characterData 字符数据包括 Text 文本节点、Comment 注释节点、ProcessingInstruction处理信息节点构成。
每个节点都有一个 nodeType 属性，用于表明节点的类型。
图片来源 Mozilla
每一个 Html元素都是节点，但不是每个节点都是 Html元素，我们来验证下。
console.log(document);console.log(document.childNodes);console.log(document.children);
document 会输出当前文档的根节点：#document；
document.childNodes 会输出两个节点，一个是 <!DOCTYPE html> ，因为这个也属于节点类型，另一个是 <html></html> 节点；
document.children 只会输出 <html></html>节点。
我们最熟悉的 Element节点，是元素型节点，有开始标签和结束标签。
<div id=\\\"elementId\\\">这是一个 element节点</div>
<script> let elementId = document.getElementById(\\\'elementId\\\'); console.log(elementId.childNodes) console.log(elementId.children) console.log(elementId.nodeType)</script>
elementId.childNodes 会输出一个文本节点；
elementId.nodeType 输出 1，请参考Node类型常量表。
| 方法 |
功能 |
| parentNode |
找到父节点 |
| childNodes |
找到子节点 |
| firstChild |
找到第一个子节点 |
| lastChild |
找到最后一个节点 |
| nextSibling |
找到下一个节点 |
| previousSibling |
找到上一个节点 |
| 方法 |
功能 |
| parentElement |
找到父元素 |
| children |
找到子元素 |
| firstElementChild |
找到第一个子元素 |
| lastElementChild |
找到最后一个子元素 |
| nextElementSibling |
找到下一个元素 |
| previousElementSibling |
找到上一个元素 |
| 方法 |
功能 |
| appendChild |
最后添加节点 |
| insertBefore |
插入第一个节点 |
| removeChild |
移除一个节点，想移除节点，需要先找到父节点才能移除 |
| replaceChild |
替换节点，相当于 remove一个节点，并 insert一个节点 |
| 方法 |
功能 |
| compareDocumentPosition |
用于比较两个节点的关系函数 |
| contains |
检查一个节点是否包含另一个节点 |
| isEquaInode |
检查两个节点是否完全相同 |
| isSameNode |
检查两个节点是否在同一个节点，可以在 JavaScript 中 === 来处理 |
| cloneNode |
复制一个节点，如果传入参数为 true ，则会连子元素做深拷贝 |
[1]https://www.it-swarm.dev/zh/javascript/node%E5%AF%B9%E8%B1%A1%E5%92%8Celement%E5%AF%B9%E8%B1%A1%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F/943630280/
[2]https://baike.baidu.com/item/nodeType%20%E5%B1%9E%E6%80%A7/278300
图片授权基于 www.pixabay.com 相关协议
原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34486.html
