[解決済み] NodeオブジェクトとElementオブジェクトの違い？

質問

NodeオブジェクトとElementオブジェクトを混同しています。 document.getElementById() はElementオブジェクトを返すのに対し document.getElementsByClassName() NodeListオブジェクト(ElementまたはNodeのコレクション？)を返します。

div が要素オブジェクトなら、div のノードオブジェクトはどうなるのでしょうか？

ノードオブジェクトとは何ですか？

documentオブジェクト、Elementオブジェクト、TextオブジェクトもNodeオブジェクトなのでしょうか？

David Flanaganの著書「The Document object, Its Element Objects and text objects are all Node objects」によると、「Documentオブジェクト、そのエレメントオブジェクト、テキストオブジェクトはすべてNodeオブジェクトである」とあります。

では、どうしてオブジェクトはノードオブジェクトと同様にエレメントオブジェクトのプロパティやメソッドを継承することができるのでしょうか？

もしそうなら、NodeクラスとElementクラスはプロトタイプ継承のツリーで関連しているのでしょう。

 <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 は、DOM 階層にあるあらゆるタイプのオブジェクトの総称です。 A node のような組み込みの DOM 要素の一つである可能性があります。 document または document.body のようなHTMLで指定されたタグである可能性もあります。 <input> または <p> あるいは、他の要素内にテキストブロックを保持するためにシステムによって作成されるテキストノードである可能性もあります。 つまり、一言で言えば 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 このコレクションは要素型のノードしか持たないので、デザイナーは別の名前のコレクションを作って elementList しかし、彼らは、要素しか入っていないかどうかにかかわらず、1種類のコレクションを使うことにしました。

EDITです。 HTML5では HTMLCollection これは、HTML 要素のリストです (ノードではなく、要素のみ)。 HTML5 の多くのプロパティやメソッドは、現在では HTMLCollection . と非常によく似たインターフェースですが nodeList しかし、現在では、あらゆるタイプのノードではなく、要素のみを含むという点で区別されています。

という区別は nodeList と HTMLCollection は、（私が知る限り）1つの使い方にほとんど影響を与えませんが、HTML5の設計者は現在、その区別をしています。

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