Node对象和Element对象的区别?

我完全混淆了节点对象和元素对象。 document.getElementById()返回Element对象，而document.getElementsByClassName() 返回节点列表对象(元素或节点的集合?)

如果div是一个元素对象，那么div Node对象呢?

什么是节点对象?

文档对象、元素对象和文本对象也是节点对象吗?

根据David Flanagan的书“文档对象，它的元素对象和文本对象都是节点对象”。

那么一个对象是如何继承元素对象以及节点对象的属性/方法的呢?

如果是，我猜节点类和元素类在继承的原型树中是相关的。

 <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]
185973 次浏览
小开

Node: http://www.w3schools.com/js/js_htmldom_nodes.asp

Node对象表示文档树中的单个节点。 节点可以是元素节点、属性节点、文本节点或“节点类型”章节中解释的任何其他节点类型

元素:http://www.w3schools.com/js/js_htmldom_elements.asp

Element对象表示XML文档中的一个元素。元素可以包含属性、其他元素或文本。如果元素包含文本，则文本用文本节点表示。

复制:

小开

这是解决DOM问题的最佳信息来源

https://www.w3.org/TR/dom/#nodes

实现文档的对象，DocumentFragment, DocumentType， 元素，文本，处理指令，或注释接口(简单

https://www.w3.org/TR/dom/#element

元素节点简单地称为元素。

小开
最佳答案

node是DOM层次结构中任何类型对象的通用名称。node可以是内置的DOM元素之一，如document或document.body，它可以是HTML中指定的HTML标记，如<input>或<p>，也可以是由系统创建的文本节点，用于在另一个元素中保存文本块。因此，简单地说，node是任何DOM对象。

element是node的一种特定类型，因为还有许多其他类型的节点(文本节点、注释节点、文档节点等)。

DOM由一个节点层次结构组成，其中每个节点可以有一个父节点，一列子节点以及nextSibling和previousSibling。这种结构形成了一个树状的层次结构。document节点有html节点作为它的子节点。 html节点有它的子节点列表(head节点和body节点)。body节点将有它的子节点列表(HTML页面中的顶级元素)等等

因此，nodeList只是一个类似数组的nodes列表。

元素是一种特定类型的节点，可以在HTML中使用HTML标记直接指定，并且可以具有诸如id或class之类的属性。可以生孩子等等…还有其他类型的节点，如注释节点、文本节点等等……有不同的特点。每个节点都有一个属性.nodeType，用来报告节点的类型。你可以在这里看到各种类型的节点(图表来自中数):

enter image description here

你可以看到ELEMENT_NODE是一种特殊类型的节点，其中nodeType属性的值为1。

所以document.getElementById("test")只能返回一个节点，并且它保证是一个元素(特定类型的节点)。因此，它只返回元素而不是列表。

由于document.getElementsByClassName("para")可以返回多个对象，因此设计人员选择返回nodeList，因为这是他们为包含多个节点的列表创建的数据类型。因为这些只能是元素(通常只有元素有类名)，所以从技术上讲，它是一个nodeList，其中只包含类型为element的节点，并且设计人员可以创建一个名称不同的集合，即elementList，但他们选择只使用一种类型的集合，不管它是否只有元素。

编辑: HTML5定义了一个HTMLCollection，它是HTML元素的列表(不是任何节点，只有元素)。HTML5中的许多属性或方法现在返回HTMLCollection。虽然它在接口上与nodeList非常相似，但现在的区别在于它只包含元素，而不包含任何类型的节点。

nodeList和HTMLCollection之间的区别对你如何使用它没有什么影响(据我所知)，但HTML5的设计者现在已经做出了这种区分。

例如，element.children属性返回一个动态的HTMLCollection。

小开

Element继承自Node，就像Dog继承自Animal一样。

Element对象"Node对象，与Dog对象"is-a"Animal对象。

Node用于实现树结构，因此其方法为firstChild、lastChild、childNodes等。它更像是一个泛型树结构的类。

然后，一些Node对象也是Element对象。Element继承自Node。Element对象实际上表示HTML文件中由诸如<div id="content"></div>之类的标记指定的对象。Element类定义了诸如attributes、id、innerHTML、Element0、Element1和Element2等属性和方法。

一些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。(由于__proto__，这一行在IE中不能工作。将需要使用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 < / p >
小开

Node通常用于表示标记。分为三种类型:

属性注:is节点，其内部有属性。 经验:<p id=”123”></p> < / p >

文本节点:在其开启和关闭之间具有上下文文本内容的节点。 经验:<p>Hello</p> < / p >

元素节点:是包含其他标签的节点。 经验:<p><b></b></p> < / p >

每个节点可以同时是不同的类型，而不一定只有一种类型。

Element只是一个元素节点。


提交答案