Question

我在Node对象和Element对象之间完全混淆。 document.getElementById()会在document.getElementsByClassName()时返回Element对象返回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]

Answer 1

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

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

DOM由节点层次结构组成，其中每个节点可以有父节点，子节点列表以及nextSibling和previousSibling。该结构形成树状层次结构。 node节点将具有其子节点列表（document节点和head节点）。 body节点将包含子节点列表（HTML页面中的顶级元素），依此类推。

因此，body只是nodeList的类似数组的列表。

元素是特定类型的节点，可以在HTML中使用HTML标记直接指定，并且可以包含nodes或id等属性。可以有孩子等...还有其他类型的节点，如评论节点，文本节点等......具有不同的特征。每个节点都有一个属性class，它报告它是什么类型的节点。您可以在此处查看各种类型的节点（来自MDN的图表）：

enter image description here

您可以看到.nodeType是一种特定类型的节点，其中ELEMENT_NODE属性的值为nodeType。

所以1只能返回一个节点，并且它保证是一个元素（特定类型的节点）。因此，它只返回元素而不是列表。

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

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

HTMLCollection和nodeList之间的区别对你如何使用它有一点影响（据我所知），但HTML5的设计者现在已经做出了这样的区分。

例如，nodeList属性返回实时HTMLCollection。

Answer 2

Node用于实现树结构，因此其方法适用于firstChild，lastChild，childNodes等。它更像是通用树的类结构

然后，一些Node个对象也是Element个对象。 Element继承自Node。 Element个对象实际上代表HTML文件中由<div id="content"></div>等标记指定的对象。 Element类定义属性和方法，例如attributes，id，innerHTML，clientWidth，blur()和focus()。

某些Node个对象是文本节点，它们不是Element个对象。每个Node对象都有一个nodeType属性，用于指示HTML文档的节点类型：

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

Answer 3

所有DOM问题的最佳信息来源

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

“实现Document，DocumentFragment，DocumentType，Element，Text，ProcessingInstruction或Comment接口（简称为节点）的对象参与树。”

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

“元素节点简称为元素。”

Answer 4

节点：http://www.w3schools.com/js/js_htmldom_nodes.asp

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

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

Element对象表示XML文档中的元素。元素可能包含属性，其他元素或文本。如果元素包含文本，则文本将在文本节点中表示。

重复：

Answer 5

节点通常用于表示标签。分为3种类型：

属性注意：是其内部具有属性的节点。 Exp：<p id=”123”></p>

文本节点：是在开始和结束之间具有contian文本内容的节点。 Exp：<p>Hello</p>

元素节点：是其中包含其他标签的节点。 Exp：<p><b></b></p>

每个节点可以同时是类型，不一定只是单一类型。

元素只是一个元素节点。

Answer 6

DOM 文档是节点的分层集合。每个节点都可以有一个父节点和/或子节点。

如果您了解节点是什么，就很容易理解 DOM 节点和元素之间的区别。

节点有类型，元素类型就是其中之一。该元素由 HTML 文档中的标签表示。

Node对象和Element对象之间的区别？

6 个答案: