Node对象和Element对象之间的区别？
P K*_*P K 265 html javascript dom
我在Node对象和Element对象之间完全混淆.
document.getElementById()返回document.getElementsByClassName()
Node 对象时返回NodeList对象(元素或节点集合？)
如果div是一个Element Object,那么div Node对象呢？
什么是节点对象？
文档对象,Element对象和Text Object也是Node对象吗？
根据David Flanagan的书"文档对象,其元素对象和文本对象都是节点对象".
那么为什么一个对象可以继承Element对象的属性/方法以及Node对象呢？
如果是,我猜Node类和Element Class在继承的原型树中是相关的.
<div id="test">
<p class="para"> 123 </p>
<p class="para"> abc </p>
</div>
<p id="id_para"> next </p>
document.documentElement.toString(); // [object HTMLHtmlElement]
var div = document.getElementById("test");
div.toString(); // [object HTMLDivElement]
var p1 = document.getElementById("id_para");
p1.toString(); // [object HTMLParagraphElement]
var p2 = document.getElementsByClassName("para");
p2.toString(); //[object HTMLCollection]
jfr*_*d00 438
A node是DOM层次结构中任何类型对象的通用名称.甲node可能是一个内置的DOM元素如document或document.body,也可能是在HTML中指定的HTML标签,例如<input>或<p>或它可能是由系统创建的用于保存的文本块另一个元件内的文本节点.因此,简而言之,a node是任何DOM对象.
An element是一种特定类型,node因为有许多其他类型的节点(文本节点,注释节点,文档节点等).
DOM由节点层次结构组成,其中每个节点可以具有父节点,子节点列表以及nextSibling和previousSibling.该结构形成树状层次结构.该document节点将具有其子节点列表(head节点和body节点).该body节点将具有其子节点列表(HTML页面中的顶级元素),依此类推.
所以,a nodeList只是一个类似数组的列表nodes.
元素是特定类型的节点,可以在HTML中使用HTML标记直接指定,并且可以具有类似a id或a的属性class.可以有孩子等...还有其他类型的节点,如评论节点,文本节点等......具有不同的特征.每个节点都有一个属性.nodeType,可以报告它是什么类型的节点.您可以在此处查看各种类型的节点(来自MDN的图表):
您可以看到ELEMENT_NODE一个特定类型的节点,其中nodeType属性的值为1.
因此document.getElementById("test"),只能返回一个节点,并且它保证是一个元素(特定类型的节点).因此,它只返回元素而不是列表.
由于document.getElementsByClassName("para")可以返回多个对象,因此设计人员选择返回a,nodeList因为这是他们为多个节点列表创建的数据类型.由于这些只能是元素(只有元素通常具有类名),所以从技术上讲nodeList,它只包含类型元素的节点,设计者可以制作一个不同名称的集合elementList,但是他们选择只使用一种类型收集是否只有元素.
编辑: HTML5定义了HTMLCollection一个HTML元素列表(不是任何节点,只有元素).HTML5中的许多属性或方法现在返回一个HTMLCollection.虽然它与a的接口非常相似nodeList,但现在区别在于它只包含Elements,而不包含任何类型的节点.
a nodeList和a之间的区别HTMLCollection对你如何使用它的影响很小(据我所知),但HTML5的设计者现在已经做出了这种区分.
例如,该element.children属性返回一个实时HTMLCollection.
- 我知道我正在复活一个 7 岁的帖子，但我只想说谢谢你这个出色而彻底的解释！完全有道理。 (30认同)
- 所以所有元素都是节点，但并非所有节点都是元素...对吗？我只是在考虑在迭代某些事物时是将事物描述为JavaScript函数中的节点还是元素。 (2认同)
- 哇，谢谢你的精彩回答。非常简短，但非常彻底。并回答了我脑海中一直存在的问题和困惑，即为什么我们将这个东西称为“nodeList”而不是“elementList”。谢谢你！ (2认同)
nop*_*ole 56
Node是实现一个树状结构,所以它的方法是firstChild,lastChild,childNodes等,这更是一个类的一个通用的树结构.
然后,一些Node对象也是Element对象. Element继承自Node. Element对象实际上表示HTML文件中由标记指定的对象,例如<div id="content"></div>.的Element类中定义的属性和诸如方法attributes,id,innerHTML,clientWidth,blur(),和focus().
有些Node对象是文本节点,它们不是Element对象.对于HTML文档,每个Node对象都有一个nodeType属性,指示它是什么类型的节点:
1: Element node
3: Text node
8: Comment node
9: the top level node, which is document
我们可以在控制台中看到一些示例:
> document instanceof Node
true
> document instanceof Element
false
> document.firstChild
<html>...</html>
> document.firstChild instanceof Node
true
> document.firstChild instanceof Element
true
> document.firstChild.firstChild.nextElementSibling
<body>...</body>
> document.firstChild.firstChild.nextElementSibling === document.body
true
> document.firstChild.firstChild.nextSibling
#text
> document.firstChild.firstChild.nextSibling instanceof Node
true
> document.firstChild.firstChild.nextSibling instanceof Element
false
> Element.prototype.__proto__ === Node.prototype
true
上面的最后一行显示Element继承自Node.(该行无法在IE __proto__中使用.将需要使用Chrome,Firefox或Safari).
顺便说一下,document对象是节点树的顶部,并且document是一个Document对象,并且Document继承自Node:
> Document.prototype.__proto__ === Node.prototype
true
以下是Node和Element类的一些文档:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element
- 你的解释的好处是用一个简单的普通事物来比喻，将其命名为“狗”、“动物”。读者立即抓住它。工藤！ (2认同)
所有DOM问题的最佳信息来源
http://www.w3.org/TR/dom/#nodes
"实现Document,DocumentFragment,DocumentType,Element,Text,ProcessingInstruction或Comment接口(简称为节点)的对象参与树."
http://www.w3.org/TR/dom/#element
"元素节点简称为元素."
节点:http://www.w3schools.com/js/js_htmldom_nodes.asp
Node对象表示文档树中的单个节点.节点可以是元素节点,属性节点,文本节点或节点类型章节中解释的任何其他节点类型.
元素:http://www.w3schools.com/js/js_htmldom_elements.asp
Element对象表示XML文档中的元素.元素可能包含属性,其他元素或文本.如果元素包含文本,则文本在文本节点中表示.
重复:
小智 5
节点一般用于表示标签。分为3种：
属性注意：是其内部具有属性的节点。经验：<p id=”123”></p>
文本节点：是在开始和结束之间具有连续文本内容的节点。经验：<p>Hello</p>
元素节点：是其内部具有其他标签的节点。经验：<p><b></b></p>
每个节点可以同时是多个类型，不一定只有一个类型。
元素只是一个元素节点。