环球看点！DOM 之 Node和Element的区别

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

2022-12-19 10:01:48 来源：博客园

简介

DOM的标准规范中提供了Node对象，该对象主要提供了用于解析DOM节点树结构的属性和方法。

【资料图】

Node对象是解析DOM节点树结构的主要入口，Node对象提供的属性和方法，可以实现遍历节点、插入节点等操作。

DOM的标准规范中提供了Element对象，该对象提供了HTML页面中所有元素所具有的属性和方法。

DOM标准规范中提供了Node对象，主要是依靠DOM节点树结构访问和更新HTML页面的内容。

而DOM标准规范中提供了Element对象，主要是依靠DOM元素树结构访问和更新HTML页面内容，所有的HTML页面的元素都是HTMLElement对象，而这个对象又是继承于Element对象的。

如图，可以得出结论。

Element继承于Node，HTMLElement又继承于Element。

从而也可以得出一个结论：Element一定是 Node，但 Node 不一定是 Element。

因此Element 可以使用 Node 的所有方法。

单个的 HTML 标签算是一个单独的 Node。
针对非 HTML标签（比如文本、空格、换行等），从一个 HTML 标签开始，到碰到的第一个 HTML 标签为止，如果中间有内容（文本、空格、换行等），那这部分内容算是一个 Node。比如：
- ```
 1 2 3  4 5 6  7 8 9 
```
- div 是一个 Node；span 是一个 Node；“ 1 2 3 ”、“ 4 5 6 ”和 “ 7 8 9 ”全都是单独的 Node。

document.getElementById() 获取到的结果既是 Node 也是 Element。因为Element继承于Node。
Element 一定是 Node，但 Node 不一定是 Element，也可能是文本、空格和换行符。
NodeList 里的换行符是因为原始代码中， HTML 标签与标签、内容与标签之间换行而产生的。
单个的 HTML 标签算是一个单独的 Node。
针对非 HTML标签（比如文本、空格等），从一个 HTML 标签开始，到碰到的第一个 HTML 标签为止，如果中间由内容（文本、空格等），那这部分内容算是一个 Node。