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

301

我对Node对象和Element对象完全感到困惑。 document.getElementById()返回Element对象，同时document.getElementsByClassName() 返回NodeList对象（元素或节点的集合？）

如果div是元素对象，那么div节点对象呢？

什么是节点对象？

文档对象，元素对象和文本对象也是节点对象吗？

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

那么，一个对象如何能够继承Element对象以及Node对象的属性/方法呢？

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

 <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]

javascript html dom

— PK
source

13

有12种类型的节点，元素是其中之一

— Esailija

这12种类型也不都是元素对象吗？像1 = ELEMENT_NODE，3 = TEXT_NODE，我认为两者都是Element对象。

— PK

5

不，他们不是。元素只是节点的一种。

— Esailija

480

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中指定一个节点，并且可以具有诸如id或的属性class。可以有孩子等。还有其他类型的节点，例如注释节点，文本节点等，具有不同的特征。每个节点都有一个.nodeType报告其节点类型的属性。您可以在此处看到各种类型的节点（MDN的图表）：

在此处输入图片说明

您会看到一种ELEMENT_NODE是一种特定类型的节点，其nodeType属性值为1。

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

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

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

a nodeList和an 之间的区别HTMLCollection对使用方式的影响很小（据我所知），但是HTML5的设计者已经做出了区分。

例如，该element.children属性返回实时HTMLCollection。

— jfriend00
source

2

所以所有元素都是节点，但并非所有节点都是元素...对吗？我只是在考虑在迭代某些事物时是将事物描述为JavaScript函数中的节点还是元素。

— 瑞安·威廉姆斯

6

我知道我要复职一个已有7年历史的职位，但我只想对这个出色而详尽的解释表示感谢！完全有意义。

— AleksandrH

@AleksandrH-很高兴它仍然有用。

— jfriend00

59

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。（由于，该行将无法在IE __proto__中使用。需要使用Chrome，Firefox或Safari）。

顺便说一下，该document对象是节点树的顶部，并且document是一个Document对象，并且也Document继承自Node：

> Document.prototype.__proto__ === Node.prototype
  true

以下是一些关于Node和Element类的文档：
https : //developer.mozilla.org/zh-CN/docs/DOM/Node
https://developer.mozilla.org/zh-CN/docs/DOM/Element

— 非极性
source

那<span data-a="1" >123</span>呢这个范围是一个具有自己节点的元素。但是属性也有它自己的节点吗？

— 罗伊·纳米尔

我要澄清的唯一一点是Node是接口而不是类。从中继承许多DOM API对象类型。它允许对这些类型进行类似的处理。例如，继承相同的方法集或以相同的方式进行测试。我在您引用的mozilla链接中找到了这个。感谢您的宝贵答复

— 艾哈迈德·卡沙巴

8

应对所有DOM困境的最佳信息来源

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

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

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

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

— 马特·埃施（Matt Esch）
source

7

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

Node对象代表文档树中的单个节点。节点可以是元素节点，属性节点，文本节点或“节点类型”一章中说明的任何其他节点类型。

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

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

重复：

— 杰罗姆·坎斯
source

4

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

属性注：是在其内部具有属性的节点。经验值：<p id=”123”></p>

文本节点：是在打开和关闭之间具有连续文本内容的节点。经验值：<p>Hello</p>

元素节点：是在其内部具有其他标签的节点。经验值：<p><b></b></p>

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

元素只是元素节点。

— 赫卡里姆
source