ノードの種類（Element, Text, Attribute, Document, Commentなど）

DOM（Document Object Model）における「ノードの種類」は、文書をツリー構造として表現する際の基本的な単位を指します。DOMでは、HTMLやXML文書を構造化されたオブジェクトの集合として扱い、それぞれの部分は「ノード」として分類されます。主なノードの種類は以下の通りです。

1. Document ノード

  • 文書全体を表す最上位のノードです。

  • ルート要素（HTML文書の場合は <html>）を保持し、他のすべてのノードの親にあたります。

  • document オブジェクトとして参照され、DOM操作の出発点になります。

  • 例: document.getElementById("id名") のように使用。

2. Element ノード

  • HTMLやXMLのタグそのものを表します。

  • 例えば <div>, <p>, <span> などの要素はすべて Element ノードです。

  • 属性や子ノード（テキストや別の要素）を持つことができます。

  • DOM操作の中心的な対象であり、スタイル変更や構造の操作が可能です。

3. Attribute ノード

  • 要素に付与される属性を表します。例えば <a href="example.com"> の href は Attribute ノードです。

  • ただし、DOMの仕様上、属性は要素の一部として扱われるため、通常は getAttribute や setAttribute でアクセスします。

  • 現代のDOM操作では、属性ノードを直接操作することは少なく、要素のプロパティ経由で扱うのが一般的です。

4. Text ノード

  • 要素内の文字列データを表します。

  • 例えば <p>Hello World</p> の “Hello World” 部分が Text ノードです。

  • 空白や改行も Text ノードとして扱われる場合があります。

  • 要素を取得した場合、その中のテキストにアクセスするには textContent や innerText を用います。

5. Comment ノード

  • 文書中のコメントを表します。例えば <!-- コメント --> がこれに該当します。

  • 表示には影響しませんが、DOMにはノードとして存在します。

  • JavaScriptから node.nodeType を確認すると、コメントノードは 8 が返されます。

6. その他のノード

DOMには上記以外にもいくつか特殊なノードがあります。

  • DocumentFragment: 複数のノードを一時的にまとめる軽量コンテナ。DOMに挿入する際に効率的。

  • CDATASection（XML向け）: XML文書で特殊文字をエスケープせずに含めるための領域。

  • ProcessingInstruction（XML向け）: XMLで処理命令を表現するためのノード。

まとめ

DOMのノードは、文書全体（Document）、要素（Element）、属性（Attribute）、文字（Text）、コメント（Comment）といった種類に分類されます。これらが組み合わさって、文書をツリー構造として表現し、JavaScriptからの操作を可能にしています。

ChatGPT5 生成日：2025/09/11