【JavaScript / DOM】ノードの種類 - 要素・属性・テキスト・コメント・ドキュメント

JavaScript/DOMの『ノードの種類』について解説します。

ノードの種類

JavaScript/DOMにおいてHTHMLドキュメントはノードによって構成されます。

ノードには種類があり、主なノードは要素ノード、属性ノード、テキストノード、コメントノード、ドキュメントノードの５つです。

次のHTMLドキュメントを元に各ノードについて解説します。

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p id="text" class="line">JavaScriptはプログラミング言語の１つです。</p>
</div>

要素ノード

要素ノードは“タグ要素を表すノード”です。

上記HTMLドキュメントではh1要素（<h1 id="title">〜</h1>）やdiv要素（<div id="box">〜</div>）、p要素（<p id="text" class="line">〜</p>）が該当します。

属性ノード

属性ノードは“属性を表すノード”です。

上記HTMLドキュメントでは要素ノードの属性であるid="title"やclass="line"などが該当します。

テキストノード

テキストノードは“テキストを表すノード”です。

上記HTMLドキュメントでは要素ノードのテキストであるJavaScriptとはやJavaScriptはプログラミング言語の１つです。が該当します。

また、空白や改行もテキストノードとなります。

そのため、上記HTMLドキュメントでは各要素間の改行などもテキストノードとして含まれています。

コメントノード

コメントノードは“コメントを表すノード”です。

上記HTMLドキュメントでは<!-- JavaScriptの概要 -->が該当します。

ドキュメントノード

ドキュメントノードは“WEBドキュメントを表すノード”です。

ドキュメント全体を含む最上位のノードとなります。