Node对象和Element对象的区别? [英] Difference between Node object and Element object?

问题描述

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

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

什么是节点对象?

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

根据 David Flanagan 的著作文档对象、其元素对象和文本对象都是节点对象".

为什么一个对象可以继承Element对象和Node对象的属性/方法?

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

 
<p class="para">第123话<p class="para">abc</p>
<p id="id_para">下一个</p>document.documentElement.toString();//[对象 HTMLHtmlElement]var div = document.getElementById("test");div.toString();//[对象 HTMLDivElement]var p1 = document.getElementById("id_para");p1.toString();//[对象 HTMLParagraphElement]var p2 = document.getElementsByClassName("para");p2.toString();//[对象 HTMLCollection]

解决方案

node 是 DOM 层次结构中任何类型对象的通用名称.node 可以是内置 DOM 元素之一，例如 document 或 document.body，它可以是在HTML，例如 或

或者它可以是由系统创建的文本节点，用于在另一个元素中保存文本块.因此，简而言之，node 是任何 DOM 对象.

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

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

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

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

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

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

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

---

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

nodeList 和 HTMLCollection 之间的区别对你如何使用它们几乎没有影响(据我所知)，但 HTML5 的设计者现在已经那种区别.

例如，element.children 属性返回一个实时的 HTMLCollection.

I am totally confused between Node object and Element object. document.getElementById() returns Element object while document.getElementsByClassName() returns NodeList object(Collection of Elements or Nodes?)

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

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'.

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

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]

解决方案

A node is the generic name for any type of object in the DOM hierarchy. 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. So, in a nutshell, a node is any DOM object.

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

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. That structure forms a tree-like hierarchy. The document node has the html node as its child. The html node has its list of child nodes (the head node and the body node). The body node would have its list of child nodes (the top level elements in your HTML page) and so on.

So, a nodeList is simply an array-like list of 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. 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. You can see the various types of nodes here (diagram from MDN):

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

So document.getElementById("test") can only return one node and it's guaranteed to be an element (a specific type of node). 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. 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.

---

EDIT: HTML5 defines an HTMLCollection which is a list of HTML Elements (not any node, only Elements). A number of properties or methods in HTML5 now return an 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.

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.

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

这篇关于Node对象和Element对象的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！