(转)Element和Node的区别你造吗?
原文:https://blog.****.net/kkkkkxiaofei/article/details/52608394
1.写在前面
一个简单的页面:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
body
里的直系子元素一共有三个:h
,p
,div
。我们可以用document.body.childNodes
查看, 结果如下:
问题来了:
- 1.这么会有这么多的#text?
- 2.注释算节点?
在回答上面两个问题之前,就有必要理解下什么是Node
了。
2.Node vs Elemet
以下摘自MDN:
简单的说就是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
,即:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
这下就顺理成章了,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图,此刻再看这张图是不是觉得回味无穷咧。
参考资料:
2.DOM
3.Node
4.NodeList