NodeオブジェクトとElementオブジェクトの違いは？

301

NodeオブジェクトとElementオブジェクトの間で完全に混乱しています。 document.getElementById()Elementオブジェクトをdocument.getElementsByClassName() 返す一方でNodeList オブジェクトを返します（要素またはノードのコレクション？）

divがElementオブジェクトの場合、div 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
ソース
13
12種類のノードがあり、要素はそのうちの1つです
— エサイリア2012
これら12のタイプすべてがElement Objectでもないのですか？1 = ELEMENT_NODE、3 = TEXT_NODEのように、どちらもElementオブジェクトでもあると思います。
— PK
5
いいえ、そうではありません。要素は単一タイプのノードのみです。
— エサイリヤ2012

回答:

481

A nodeは、DOM階層内の任意のタイプのオブジェクトの総称です。Aは、nodeのいずれかとすることができる内蔵のようなDOM要素documentまたはdocument.body、それのようなHTMLで指定されたHTMLタグであり得る<input>か、<p>またはそれは他の要素内のテキストのブロックを保持するために、システムによって作成されたテキスト・ノードとすることができます。つまり、簡単に言えば、a nodeは任意のDOMオブジェクトです。

アンは、elementのいずれかの特定のタイプですnode（...などテキストノード、コメントノード、文書ノード、）多くの他のノードの種類があるよう。

DOMはノードの階層で構成され、各ノードは親、子ノードのリスト、nextSiblingおよびpreviousSiblingを持つことができます。その構造はツリーのような階層を形成します。documentノードは、子ノード（のリストだろうheadノードとbodyノード）。bodyノードは、その上の子ノード（HTMLページのトップレベルの要素）とのリストを持っているでしょう。

したがって、a nodeListは単にの配列のようなリストですnodes。

要素は特定のタイプのノードであり、HTMLタグを使用してHTMLで直接指定でき、idまたはのようなプロパティを持つことができますclass。子などを持つことができます...コメントノード、テキストノードなど、他のタイプのノードがあり、さまざまな特性があります。各ノードには、ノードの.nodeTypeタイプを報告するプロパティがあります。さまざまなタイプのノードがここに表示されます（MDNの図）。

ここに画像の説明を入力してください

プロパティがの値を持つELEMENT_NODEノードの特定のタイプの1つであることがわかりnodeTypeます1。

したがって、document.getElementById("test")1つのノードのみを返すことができ、要素（特定のタイプのノード）であることが保証されます。そのため、リストではなく要素を返すだけです。

document.getElementsByClassName("para")は複数のオブジェクトを返すことができるため、デザイナーはを返すnodeListことを選択しました。それは、複数のノードのリストに対して作成したデータ型だからです。これらは要素のみである可能性があるため（要素のみに通常はクラス名が含まれます）、技術的にnodeListはタイプ要素のノードのみがあり、デザイナーはである別の名前のコレクションを作成できますが、elementList1つのタイプのみを使用することを選択しました要素のみかどうかのコレクション。

編集： HTML5は、HTMLCollectionHTML要素（ノードではなく要素のみ）のリストであるを定義します。HTML5の多くのプロパティまたはメソッドがを返すようになりましたHTMLCollection。とのインターフェースは非常に似ていますが、nodeList要素のみが含まれ、どのタイプのノードも含まれていないという違いがあります。

a nodeListとan の区別は、HTMLCollection（私が知る限り）をどのように使用するかにほとんど影響しませんが、HTML5の設計者はその区別を行いました。

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

— jfriend00
ソース
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オブジェクトには、nodeTypeHTMLドキュメントの場合、ノードのタイプを示すプロパティがあります。

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/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

— 非極性
ソース
どう<span data-a="1" >123</span>ですか？このスパンは、独自のノードを持つ要素です。しかし、属性には独自のノードもありますか？
— Royi Namir 14
私が明確にしたい唯一のポイントは、ノードはクラスではなくインターフェースであることです。多くのDOM APIオブジェクトタイプが継承します。これらのタイプを同様に扱うことができます。たとえば、同じメソッドのセットを継承したり、同じ方法でテストしたりします。これは、あなたが参照しているmozillaリンクで見つかりました。貴重な回答をありがとう
— アーメド・カーシャバ
7

ノード：http : //www.w3schools.com/js/js_htmldom_nodes.asp

Nodeオブジェクトは、ドキュメントツリーの単一のノードを表します。ノードは、要素ノード、属性ノード、テキストノード、または「ノードタイプ」の章で説明されているその他のノードタイプです。

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

Elementオブジェクトは、XMLドキュメントの要素を表します。要素には、属性、他の要素、またはテキストを含めることができます。要素にテキストが含まれている場合、テキストはテキストノードで表されます。

重複：

— ジェローム・キャンセル
ソース
4

ノードは、一般的にタグを表すために使用されます。3つのタイプに分かれています：

属性注：ノードの内部には属性があります。経験：<p id=”123”></p>

テキストノード：開始と終了の間にあるテキストコンテンツを含むノードです。経験：<p>Hello</p>

要素ノード：その内部に他のタグを持つノードです。経験：<p><b></b></p>

各ノードは、必ずしも単一のタイプだけではなく、同時にタイプすることができます。

要素は単に要素ノードです。

— ヘカリム
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.