DOM ナビゲーション

Volardev 編集部 April 18, 2026

HTML DOMを利用すると、ノード間の関係（リレーションシップ）を使用してノードツリー内を移動（ナビゲート）することができます。

1. DOM ノード

W3C HTML DOM 標準によれば、HTML ドキュメント内のあらゆるものは**ノード（Node）**です：

ドキュメント全体がドキュメントノードです
すべてのHTML要素は要素ノードです
HTML要素内のテキストはテキストノードです
すべてのHTML属性は属性ノードです（非推奨）
すべてのコメントはコメントノードです

HTML DOMを使用することで、ノードツリー内のすべてのノードにJavaScriptからアクセスできます。
新しいノードの作成、およびすべてのノードの修正や削除が可能です。

2. ノードの関係性（リレーションシップ）

ノードツリー内のノードは、互いに階層的な関係を持っています。
これらの関係を説明するために、親（parent）、子（child）、兄弟（sibling）という用語が使用されます。

ノードツリーにおいて、最上位のノードはルート（またはルートノード）と呼ばれます。
ルートを除き、すべてのノードには必ず1つの親があります。
1つのノードは、複数の子を持つことができます。
兄弟（シブリング）とは、同じ親を持つノードのことです。

<html>
  <head>
    <title>DOM チュートリアル</title>
  </head>

  <body>
    <h1>DOM レッスン 1</h1>
    <p>ハロー・ワールド！</p>
  </body>
</html>

上記のHTMLから、以下のことが読み取れます：

<html> はルートノードです。
<html> には親がいません。
<html> は <head> と <body> の親です。
<head> は <html> の最初の子（first child）です。
<body> は <html> の最後の子（last child）です。

さらに：

<head> には1つの子、 <title> があります。
<title> には1つの子（テキストノード）、 "DOM チュートリアル" があります。
<body> には2つの子、 <h1> と <p> があります。
<h1> には1つの子、 "DOM レッスン 1" があります。
<p> には1つの子、 "ハロー・ワールド！" があります。
<h1> と <p> は兄弟です。

3. ノード間の移動

JavaScriptでノード間を移動するには、以下のノードプロパティを使用できます：

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

4. 子ノードとノード値

DOM処理における一般的な間違いは、要素ノードに直接テキストが含まれていると期待してしまうことです。

例：
<title id="demo">DOM チュートリアル</title>

上記の例において、要素ノード <title> はテキストを含んでいません。
正しくは、"DOM チュートリアル" という値を持つテキストノードを含んでいるのです。

このテキストノードの値には、ノードの innerHTML プロパティを使用してアクセスできます：

myTitle = document.getElementById("demo").innerHTML;

innerHTML プロパティへのアクセスは、最初の子の nodeValue にアクセスすることと同じです：

myTitle = document.getElementById("demo").firstChild.nodeValue;

最初の子へのアクセスは、次のように行うこともできます：

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

以下の3つの例はすべて、 <h1> 要素のテキストを取得し、それを <p> 要素にコピーするものです：

例 1

<html>
<body>

<h1 id="id01">マイ・ファースト・ページ</h1>
<p id="id02"></p>

<script>
// innerHTML を使用して内容をコピー
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

例 2

<html>
<body>

<h1 id="id01">マイ・ファースト・ページ</h1>
<p id="id02"></p>

<script>
// firstChild.nodeValue を使用して内容をコピー
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

例 3

<html>
<body>

<h1 id="id01">マイ・ファースト・ページ</h1>
<p id="id02">こんにちは！</p>

<script>
// childNodes[0].nodeValue を使用して内容をコピー
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

5. InnerHTML プロパティについて

このチュートリアルでは、HTML要素のコンテンツを取得するために innerHTML プロパティを使用しています。
しかし、DOMのツリー構造やナビゲーションを理解するためには、前述した他のメソッドを学んでおくことも非常に有用です。

6. DOM ルートノード

ドキュメント全体にアクセスするための2つの特別なプロパティがあります：

document.body - ドキュメントの body 部分
document.documentElement - ドキュメント全体

例: document.body の表示

<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>document.body を表示中</p>

<p id="demo"></p>

<script>
// body 全体の HTML をコピー
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

例: document.documentElement の表示

<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>document.documentElement を表示中</p>

<p id="demo"></p>

<script>
// ドキュメント全体（HTML要素全体）をコピー
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

7. nodeName プロパティ

nodeName プロパティは、ノードの名前を指定します。

nodeName は読み取り専用です。
要素ノードの nodeName はタグ名と同じです。
属性ノードの nodeName は属性名です。
テキストノードの nodeName は常に #text です。
ドキュメントノードの nodeName は常に #document です。

<h1 id="id01">マイ・ファースト・ページ</h1>
<p id="id02"></p>

<script>
// 要素のノード名を表示
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

注意:nodeName は常にHTML要素のタグ名を大文字で返します。

8. nodeValue プロパティ

nodeValue プロパティは、ノードの値を指定します。

要素ノードの nodeValue は null です。
テキストノードの nodeValue はテキストそのものです。
属性ノードの nodeValue は属性値です。

9. nodeType プロパティ

nodeType プロパティは読み取り専用で、ノードの型を返します。

<h1 id="id01">マイ・ファースト・ページ</h1>
<p id="id02"></p>

<script>
// 要素のノード型を表示
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

主要な nodeType プロパティの一覧は以下の通りです：

ノード型 (NodeType)	番号	例
ELEMENT_NODE	1	`<h1 class="heading">Volardev</h1>`
ATTRIBUTE_NODE	2	`class = "heading"` (非推奨)
TEXT_NODE	3	`Volardev`
DOCUMENT_NODE	9	HTML ドキュメント自体 (`<html>` の親)
DOCUMENT_TYPE_NODE	10	`<!Doctype html>`