要素とノードの関係 | DOMの仕組み | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

要素とノードの違いとは？

JavaScriptでDOMを操作していると、「要素（Element）」や「ノード（Node）」という言葉がよく登場します。

どちらもHTMLを構成するものですが、意味は少し異なります。

簡単に言えば、要素はHTMLタグのことで、ノードはHTMLを構成するすべての部品を指します。

つまり、すべての要素はノードですが、すべてのノードが要素ではありません。

ノードとは？

ノードとは、HTML文書を構成するあらゆる部品のことです。

HTMLタグだけでなく、文字やコメントなどもノードとして扱われます。

このように、HTMLのあらゆる構成要素がノードとして扱われます。

要素とは？

要素とは、HTMLタグそのものを表すノードです。

例えば、次のHTMLでは<h1>が要素です。

<h1>こんにちは、世界！</h1>

このHTMLには、実は2種類のノードがあります。

• <h1> … 要素ノード
• こんにちは、世界！ … テキストノード

つまり、画面に見えている文字も、DOMでは1つのノードとして管理されています。

DOMツリーで見る要素とノード

先ほどのHTMLは、DOMでは次のような構造になります。

Document
└── h1（要素ノード）
    └── "こんにちは、世界！"（テキストノード）

このように、HTMLはツリー（木構造）として管理されています。

要素ノードを操作する例

JavaScriptでは、要素ノードを取得して内容を変更できます。

// h1要素を取得
const heading = document.querySelector("h1");

// テキストを書き換える
heading.textContent = "新しい見出し";

このコードでは、<h1>要素を取得し、その中のテキストを変更しています。

• querySelector()で要素を取得します。
• textContentでテキストノードの内容を書き換えます。

ノードに共通するプロパティとメソッド

ノードには共通して利用できるプロパティやメソッドがあります。

これらは要素ノードだけでなく、多くのノードで利用できます。

childNodesとchildrenの違い

初心者が混乱しやすいのが、childNodesとchildrenの違いです。

例えば、次のHTMLを考えます。

<ul id="menu">
    <li>りんご</li>
    <li>みかん</li>
</ul>

この場合、改行もテキストノードとして扱われるため、childNodesにはテキストノードも含まれます。一方、childrenは<li>だけを取得します。

要素を追加する例

要素ノードを作成して追加する例を見てみましょう。

// ul要素を取得
const parentElement = document.querySelector("ul");

// 新しいli要素を作成
const newItem = document.createElement("li");
newItem.textContent = "新しいアイテム";

// 子要素として追加
parentElement.appendChild(newItem);

このコードでは、新しい<li>要素を作成し、<ul>の子要素として追加しています。

要素とノードはどちらを意識すればよい？

通常のWeb制作では、操作する対象のほとんどが要素です。

一方、DOM全体の構造を扱う場合や、childNodes・parentNodeなどを利用する場合は、ノードという考え方が重要になります。

初心者のうちは、次のように覚えておけば十分です。

• HTMLタグ → 要素
• HTMLを構成する全部 → ノード

まとめ

• ノードはHTMLを構成するすべての部品です。
• 要素はHTMLタグを表すノードです。
• テキストやコメントもノードとして扱われます。
• すべての要素はノードですが、すべてのノードが要素ではありません。
• childNodesはテキストも含めたすべての子ノードを取得します。
• childrenは要素ノードだけを取得します。
• DOM操作では、この違いを理解しておくとコードが読みやすくなります。