私たちは、お客様のプライバシーを大切にします

私たちは、お客様のブラウジング体験を向上させ、パーソナライズされた広告やコンテンツを提供し、当社のトラフィックを分析するためにクッキーを使用しています。「すべてのクッキーを受け入れる」をクリックすると、当社のクッキーの使用に同意したことになります。

同意に関する設定をカスタマイズ

当社は、お客様を効率的にナビゲートし、特定の機能を実行できることを目的としてクッキーを使用しています。以下の各同意項目の下に、すべてのクッキーの詳細情報が記載されています。

「必須」に分類されるクッキーは、サイトの基本的な機能を有効にするために不可欠であるため、お客様のブラウザに保存されます。

また、当社は、お客様による本サイトの利用状況を分析し、お客様の好みを保存し、お客様に関連するコンテンツや広告を提供するために、サードパーティーのクッキーを使用しています。これらのクッキーは、お客様の事前の同意がある場合にのみ、お客様のブラウザに保存されます。

お客様は、これらのクッキーの一部、または全部を有効または無効にすることができますが、一部のクッキーを無効にすると、お客様のブラウジング体験に影響を与える場合があります。

常に効にする

必須クッキーとは、安全なログインの提供や同意設定の調整など、このサイトの基本機能を有効にするために必要なクッキーです。これらのクッキーは、個人を特定できるようなデータを保存することはありません。

表示するクッキーがありません。

機能クッキーは、ソーシャルメディアプラットフォームでのウェブサイトのコンテンツの共有、フィードバックの収集、その他のサードパーティの機能など、特定の機能の実行をサポートします。

表示するクッキーがありません。

分析用クッキーは、訪問者がウェブサイトとどのように関わっているかを理解するために使用されます。これらのクッキーは、訪問者数、直帰率、トラフィックソースなどの指標に関する情報を提供することをサポートします。

表示するクッキーがありません。

パフォーマンスクッキーは、ウェブサイトの主要なパフォーマンス指標を理解し、分析するために使用され、訪問者に優れたユーザー体験を提供することをサポートします。

表示するクッキーがありません。

広告クッキーは、訪問者が以前に訪れたページに基づいてカスタマイズされた広告を提供し、広告キャンペーンの有効性を分析するために使用されます。

表示するクッキーがありません。

プログラミング

DOMツリーのノード操作

最終更新： 06/04/2025
1 分の読み

DOM（Document Object Model）ツリーの構造は、HTMLやXMLドキュメントの内容をプログラムで操作・変更するための中核的な概念です。ウェブ開発やフロントエンドエンジニアリングに携わるすべての開発者にとって、DOMツリーの理解とそのノード（節）間の効率的なナビゲーション（移動）は不可欠です。本記事では、DOMツリーの概念から始め、ノードの種類、プロパティ、ナビゲーション手法、実践例、注意点に至るまで、完全かつ包括的に詳述していきます。

DOMツリーとは何か？

DOMツリーとは、ウェブページのHTML構造を木構造（ツリー構造）として表したものです。各HTML要素が「ノード（node）」と呼ばれる単位で表現され、親子関係・兄弟関係など、論理的な構造を持っています。

関連記事

たとえば、以下のようなシンプルなHTMLは、

html
html>
<html>
  <head>
    <title>サンプルtitle>
  head>
  <body>
    <h1>見出しh1>
    <p>段落p>
  body>
html>

次のようなDOMツリーに変換されます。

bash
Document
└── html
    ├── head
    │   └── title
    │       └── テキストノード（"サンプル"）
    └── body
        ├── h1
        │   └── テキストノード（"見出し"）
        └── p
            └── テキストノード（"段落"）

DOMノードの種類

DOMツリー内の「ノード」はすべて同じではありません。以下に主要なノードの種類を整理します。

ノードの種類 説明
Documentノード ページ全体のルート
Elementノード HTMLの各タグ（例：

、

など）
Textノード タグ内のテキスト
Commentノード HTMLコメント（）
Attributeノード 要素の属性（class、idなど）

これらのノードは、JavaScriptにより動的にアクセス・変更可能です。

DOMナビゲーション：ノード間の移動

DOMをナビゲートするとは、あるノードから別のノードへプログラム的に「移動」することを意味します。代表的なプロパティやメソッドは以下の通りです。

子ノードへの移動

  • firstChild: 最初の子ノードを取得

  • lastChild: 最後の子ノードを取得

  • childNodes: 子ノードのリスト（NodeList）

javascript
const parent = document.body;
console.log(parent.firstChild);  // 最初の子ノード

親ノードへの移動

  • parentNode: 親ノードを取得

javascript
const heading = document.querySelector("h1");
console.log(heading.parentNode);  //

兄弟ノードへの移動

  • nextSibling: 次の兄弟ノード

  • previousSibling: 前の兄弟ノード

javascript
const heading = document.querySelector("h1");
console.log(heading.nextSibling);  // 
 か 空白のTextノード

要素ノード専用のナビゲーション

  • children: 要素ノードのみの子ノード（HTMLCollection）

  • firstElementChild / lastElementChild

  • nextElementSibling / previousElementSibling

javascript
const section = document.body;
console.log(section.children);  // h1, p のみ（Textノード除外）

ノードの探索（トラバーサル）

ナビゲーションと似ていますが、「探索（traversal）」では特定の条件に合致するノードを再帰的または選択的に見つける処理が行われます。

再帰的な探索例

javascript
function printAllNodes(node) {
  console.log(node.nodeName);
  for (let child of node.childNodes) {
    printAllNodes(child);
  }
}
printAllNodes(document.documentElement);

クエリセレクタを使った選択的探索

  • querySelector / querySelectorAll：CSSセレクタに基づいたノード取得

javascript
const title = document.querySelector("title");
const allParagraphs = document.querySelectorAll("p");

ノード情報の取得と操作

ノードの型

各ノードには型が定義されています。

ノード型 数値定義 内容
ELEMENT_NODE 1 HTMLタグなど
TEXT_NODE 3 テキスト
COMMENT_NODE 8 コメント 
javascript
node.nodeType === Node.ELEMENT_NODE  // true or false

ノード名と内容

  • nodeName: ノードの名前（タグ名など）

  • nodeValue: ノードの値（テキストなど）

javascript
const textNode = document.createTextNode("こんにちは");
console.log(textNode.nodeValue);  // "こんにちは"

実践：DOMナビゲーションを活用した動的変更

以下は、DOMツリーをナビゲートしながら要素を動的に変更する例です。

javascript
// 最初の段落の内容を変更
const firstParagraph = document.querySelector("p");
firstParagraph.textContent = "新しい内容です";

// 次の兄弟要素のスタイルを変更
const heading = document.querySelector("h1");
const nextElement = heading.nextElementSibling;
nextElement.style.color = "red";

DOMナビゲーションでよくある落とし穴

テキストノードと空白

childNodesやfirstChildなどを使うと、空白や改行もテキストノードとして認識される点に注意。

html
<body>
  <h1>タイトルh1>
  <p>本文p>
body>

上記構造でも、body.childNodes.length は意外にも 5 になる可能性があります（テキストノード含むため）。

回避策：

  • children や firstElementChild を使うことで、要素ノードのみに限定可能。

nullチェックの重要性

以下のように nextElementSibling が null の場合もあるため、必ずチェックを行うこと。

javascript
if (element.nextElementSibling !== null) {
  element.nextElementSibling.textContent = "次の要素";
}

表：DOMナビゲーションの主なプロパティとその説明

プロパティ名 対象ノード 説明
parentNode すべて 親ノード
childNodes 要素ノード 子ノード全体（Text含む）
children 要素ノード 要素のみの子ノード
firstChild 要素ノード 最初の子ノード（Text含む）
firstElementChild 要素ノード 最初の子要素
lastChild 要素ノード 最後の子ノード
nextSibling 任意ノード 次の兄弟ノード（Text含む）
nextElementSibling 要素ノード 次の要素ノード
previousSibling 任意ノード 前の兄弟ノード
previousElementSibling 要素ノード 前の要素ノード

結論と今後の活用

DOMナビゲーションは、クライアントサイドJavaScriptにおけるページ操作の根幹です。静的なHTMLページを、動的で対話的なユーザー体験へと進化させるためには、DOMノードの構造理解とそれに基づいた適切な操作が不可欠です。特に、空白やテキストノードに起因するバグ、選択的探索の効率化、セレクタの使い分けなど、現場での実践力が求められます。

開発者はこれらのナビゲーション手法を熟知し、アクセシビリティ・パフォーマンス・保守性を念頭に置いたDOM操作を行うことで、より洗練されたウェブアプリケーションを構築することができるでしょう。

参考文献

読者である日本の皆様にとって、本記事がDOMツリーの理解と実践において貴重な手引きとなることを願ってやみません。

最終更新： 06/04/2025
1 分の読み
Back to top button