javascript - Node对象和Element对象之间的区别？(Difference between Node object and Element object?)

Question

I am totally confused between Node object and Element object.

(我对Node对象和Element对象完全感到困惑。)

document.getElementById() returns Element object while document.getElementsByClassName() returns NodeList object(Collection of Elements or Nodes?)

(document.getElementById()返回Element对象，而document.getElementsByClassName()返回NodeList对象（元素或节点的集合？）)

If a div is an Element Object then what about div Node object?

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

What is a Node Object?

(什么是节点对象？)

Are document object, Element object and Text Object are also Node object?

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

As per David Flanagan's book 'The Document object, Its Element Objects and text objects are all Node objects'.

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

So How come an object can inherit properties/methods of Element object as well as Node object?

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

If yes, I guess Node Class and Element Class are related in prototypal tree of inheritance.

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

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

  ask by P K translate from so

Answer 1

A node is the generic name for any type of object in the DOM hierarchy.

(node是DOM层次结构中任何类型的对象的通用名称。)

A node could be one of the built-in DOM elements such as document or document.body , it could be an HTML tag specified in the HTML such as <input> or <p> or it could be a text node that is created by the system to hold a block of text inside another element.

(node可以是内置DOM元素之一，例如document或document.body ，也可以是HTML中指定的HTML标记，例如<input>或<p> ，也可以是由创建的文本节点系统将文本块保存在另一个元素中。)

So, in a nutshell, a node is any DOM object.

(因此，简而言之， node就是任何DOM对象。)

An element is one specific type of node as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...).

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

The DOM consists of a hierarchy of nodes where each node can have a parent, a list of child nodes and a nextSibling and previousSibling.

(DOM由节点层次结构组成，其中每个节点可以具有父节点，子节点列表以及nextSibling和previousSibling。)

That structure forms a tree-like hierarchy.

(该结构形成树状层次结构。)

The document node would have its list of child nodes (the head node and the body node).

(document节点将具有其子节点列表（ head节点和body节点）。)

The body node would have its list of child nodes (the top level elements in your HTML page) and so on.

(body节点将具有其子节点列表（HTML页面中的顶级元素）等。)

So, a nodeList is simply an array-like list of nodes .

(因此， nodeList只是nodes的数组状列表。)

An element is a specific type of node, one that can be directly specified in the HTML with an HTML tag and can have properties like an id or a class .

(元素是一种特定类型的节点，可以使用HTML标签直接在HTML中指定该节点，并具有诸如id或class属性。)

can have children, etc... There are other types of nodes such as comment nodes, text nodes, etc... with different characteristics.

(可以有子级，等等。还有其他类型的节点，例如注释节点，文本节点等，具有不同的特征。)

Each node has a property .nodeType which reports what type of node it is.

(每个节点都有一个.nodeType属性，该属性报告节点的类型。)

You can see the various types of nodes here (diagram from MDN ):

(您可以在此处看到各种类型的节点（ MDN的图表）：)

You can see an ELEMENT_NODE is one particular type of node where the nodeType property has a value of 1 .

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

So document.getElementById("test") can only return one node and it's guaranteed to be an element (a specific type of node).

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

Because of that it just returns the element rather than a list.

(因此，它仅返回元素而不是列表。)

Since document.getElementsByClassName("para") can return more than one object, the designers chose to return a nodeList because that's the data type they created for a list of more than one node.

(由于document.getElementsByClassName("para")可以返回多个对象，因此设计人员选择返回一个nodeList因为这是他们为多个节点列表创建的数据类型。)

Since these can only be elements (only elements typically have a class name), it's technically a nodeList that only has nodes of type element in it and the designers could have made a differently named collection that was an elementList , but they chose to use just one type of collection whether it had only elements in it or not.

(由于这些只能是元素（通常只有元素通常具有类名），因此从技术上讲，这是一个nodeList ，其中仅包含类型为element的节点，设计人员可以创建一个名为elementList的不同名称的集合，但他们选择仅使用一种类型的集合，无论它是否仅包含元素。)

---

EDIT: HTML5 defines an HTMLCollection which is a list of HTML Elements (not any node, only Elements).

(编辑： HTML5定义一个HTMLCollection ，它是HTML元素列表（不是任何节点，只有Elements）。)

A number of properties or methods in HTML5 now return an HTMLCollection .

(HTML5中的许多属性或方法现在都返回HTMLCollection 。)

While it is very similar in interface to a nodeList , a distinction is now made in that it only contains Elements, not any type of node.

(尽管它在接口上与nodeList非常相似，但是现在区别在于它仅包含Elements，而不包含任何类型的节点。)

The distinction between a nodeList and an HTMLCollection has little impact on how you use one (as far as I can tell), but the designers of HTML5 have now made that distinction.

(nodeList和HTMLCollection之间的区别对使用它的方式几乎没有影响（据我所知），但是HTML5的设计者现在已经做出了区分。)

For example, the element.children property returns a live HTMLCollection.

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