1.写在前面

我们经常使用document.getElementById去获取DOM中的元素，也会使用childNodes来获取子节点。那么Element和Node的区别是什么？而什么又是HTMLCollection,HTMLElement,和NodeList呢？

一个简单的页面：

<html><body><h1>China</h1><!-- My comment ...  --><p>China is a popular country with...</p><div><button>See details</button></div></body>
</html>

body里的直系子元素一共有三个：h,p,div。我们可以用document.body.childNodes查看, 结果如下:

问题来了：

1.这么会有这么多的#text？
2.注释算节点？

在回答上面两个问题之前，就有必要理解下什么是Node了。

2.Node vs Elemet

以下摘自MDN:

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.

The following interfaces all inherit from Node its methods and properties: Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference.

简单的说就是Node是一个基类，DOM中的Element，Text和Comment都继承于它。
换句话说，Element，Text和Comment是三种特殊的Node，它们分别叫做ELEMENT_NODE,
TEXT_NODE和COMMENT_NODE。

所以我们平时使用的html上的元素，即Element，是类型为ELEMENT_NODE的Node。

利用nodeType可以查看所有类型，如下图：

到这里，我想我们就可以解释上面两个问题了。

实际上Node表示的是DOM树的结构，在html中，节点与节点之间是可以插入文本的，这个插入的空隙就是TEXT_NODE，即：

<body>we can put text here 1...<h1>China</h1>we can put text here 2...<!-- My comment ...  -->we can put text here 3...<p>China is a popular country with...</p>we can put text here 4...<div><button>See details</button></div>we can put text here 5 ...
</body>

这下就顺理成章了，body的直系元素（3）＋ COMMENT_NODE(1) + TEXT_NODE(5) = 9

3.NodeList vs HTMLCollection

我们用childNodes找到了NodeList，但我们操作DOM时往往不想操作Node(我只想操作元素Element)，那么如何获取ElementList呢？

其实我们经常使用的getElementsByXXX返回的就是一个ElementList，只不过它的真实名字是ElementCollection。

就像NodeList是Node的集合一样，ElementCollection也是Element的集合。但需要特别注意的是：

NodeList和ElementCollcetion都不是真正的数组

如果document.getElementsByTagName('a') instanceof Array，那么必然是false。

4.写在最后

DOM(Document Object Model)简称文档对象模型，它是html和xml是文档编程的接口，它将文档解析为树结构，这个树的根部就是document,而document的第一个子节点(childeNodes[0])就是html，这才有了后面的一系列html元素。

最后附一张DOM图，此刻再看这张图是不是觉得回味无穷咧。

参考资料：

1.Node vs Element

2.DOM

3.Node

4.NodeList

Element和Node的区别你造吗？相关推荐

（转）Element和Node的区别你造吗？
原文:https://blog.csdn.net/kkkkkxiaofei/article/details/52608394 1.写在前面一个简单的页面: 1 2 3 4 5 6 7 8 9 10 ...
JavaScript中Element与Node的区别，children与childNodes的区别
关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...
element.onclick = fun与element onclick=fun()的区别
原本标题是:element.onclick = fun与<element οnclick="fun()">的区别,但是提示含有非法字符. 问题背景: 在看this指向的 ...
shell之xargs与-exec与管道的区别你造吗？
Table of Contents 1.xargs作用: 2.使用模式: 3.xargs常用选项 4.xargs与管道|的区别 5.xargs与-exec的区别 1.xargs作用: (1)将前一个命 ...
SelectedNode与e.node的区别
SelectedNode与e.node的区别待补....... 转载于:https://www.cnblogs.com/newking/p/4374997.html
dom4j关于Element和Node的理解
Element和Node的异同 Element是使用dom4j一开始就能用到的.一般就是使用Element对象调用elements()方法获取其下的所有子元素(就只是子元素,没有孙子元素).这样一 ...
基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
spawn('cmd.exe')与spawn('node')的区别
spawn(cmd.exe) 和 spawn(node) 的区别在于,前者是在 Windows 系统中启动一个新的命令提示符会话,而后者是在系统中启动一个新的 Node.js 进程. spawn(cm ...
Deno 正式发布，彻底弄明白和 node 的区别
前言 Deno 已经正式发布了????! 我说这句话时候,是不是很多前端和 NodeJS 工(码)程(农)师已经按不住自己的40米大刀了.心中的不仅感慨前端是真的会造轮子,有了 node 还不够吗, ...

Element和Node的区别你造吗？