Element和Node的区别你造吗?
来源:互联网 发布:单农为什么淘宝没有 编辑:程序博客网 时间:2024/06/17 13:17
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的区别你造吗?
- Node和Element的区别
- node和element的区别
- xml中Node和Element的区别
- xml中Node和Element的区别
- XML中Node和Element的区别
- XML中node和element的区别
- XML中node和element的区别
- XML中Element和Node的区别
- xml中Node和Element的区别
- HTML中的Node和Element的区别
- 节点node和元素element的区别
- dom4j简单学习 element和node的区别
- XML中Element,Node,Attr的区别和联系
- Dom4j 中Node节点 和Element元素的区别
- XML(一) ---节点node和元素element的区别
- 元素(Element)和结点(Node)的区别 XML
- DOM中node和element区别
- Web前端面试指导(七):入职后的建议
- HDU 5898 odd-even number(数位dp)
- Beautiful Soup使用
- c语言 求1000到2000之间的闰年
- C的快捷键(不多)
- Element和Node的区别你造吗?
- MP4-2
- 升级ubuntu中的gcc和g++版本
- 《Linux内核设计与实现》--系统调用
- jsp中使用c:import 传递中文参数乱码
- #278 – 允许Image只能变小或者只能变大(Allow an Image to Get Bigger, But Not Smaller (or Vice Versa))
- c# 使用定时器Timer
- 修改UIAlertAction 的文字颜色
- mysql数据库delete数据时不支持表别名