☰

Difference between Node object and Element object? Ask Question

tag-icon • tag-icon javascript html dom
Difference between Node object and Element object? Ask Question

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]

ベストアンサー1

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.

document.getElementsByClassName("para")は複数のオブジェクトを返すことができるため、設計者はnodeList複数のノードのリスト用に作成したデータ型である を返すことを選択しました。これらは要素のみであるため (通常、クラス名を持つのは要素のみ)、技術的にはnodeList要素タイプのノードのみを含む であり、設計者は である別の名前のコレクションを作成することもできましたelementListが、要素のみを含むかどうかに関係なく、1 つのタイプのコレクションのみを使用することを選択しました。

編集: HTML5 はHTMLCollectionHTML 要素 (ノードではなく要素のみ) のリストである を定義します。HTML5 の多くのプロパティまたはメソッドは を返すようになりましたHTMLCollection。 とインターフェイスは非常に似ていますがnodeList、要素のみを含み、ノードの種類は含まないという点で区別されています。

nodeListaと anの区別は、HTMLCollection使用方法にほとんど影響しません (私が知る限り) が、HTML5 の設計者は現在、その区別を行っています。

たとえば、element.childrenプロパティはライブ HTMLCollection を返します。

おすすめ記事