親ノードとは何か？ツリー構造・DOM・アルゴリズムまでを徹底解説する実務向けガイド
エバープレイ編集部概要：親ノード（親ノードとは）
「親ノード（parent node）」は、ツリー構造を扱う分野で非常に基本的かつ重要な概念です。簡潔に言えば、あるノード（節点）の直上に位置するノードを指します。木構造（ツリー）では、親ノードと子ノード（child node）の関係によって階層が定義され、根（root）から葉（leaf）へと繋がる構造が形成されます。IT領域ではデータ構造（木、二分木、B木など）、DOM（Document Object Model）、ファイルシステム、グラフ理論、アルゴリズム設計など多くの場面で「親ノード」という概念が登場します。
基本概念と用語整理
- 親ノード（parent node）：あるノードの1つ上位にあるノード。親子関係は通常一意（ツリー）だが、グラフでは複数の親を持つことがある。
- 子ノード（child node）：親ノードに直接ぶら下がるノード。
- 祖先（ancestor）／子孫（descendant）：親→親の親… と遡る/子→子の子… と辿る関係。
- 根（root）：親を持たない最上位のノード（parent が null）。
- 葉（leaf）：子を持たないノード。
データ構造における親ノードの役割
木構造では、親ノード参照があるか否か、そしてそれをどのように保持するかが実装やアルゴリズム効率に大きく影響します。
- 親ポインタ（parent pointer）を保持する場合：任意のノードから上方向へ O(1) で遡れるため、削除や移動、共通祖先（LCA）を求める処理が容易になる。ただしノードごとに追加の参照が必要になり、メモリが若干増える。
- 親ポインタを持たない場合：親へは再帰やスタックなどで根から辿る必要があり、上方向への探索がコスト高になるが、構造がシンプルで軽量。
- 特別な木（赤黒木、AVL、B木など）：バランス操作（回転など）では親ポインタがあると実装が簡潔になることが多い。
- Union-Find（Disjoint Set）：各要素が「parent」を持ち、経路圧縮（path compression）などで親ポインタを書き換えることでほぼ定数時間の操作を実現する。
DOM（Document Object Model）における親ノード
Web 開発で頻繁に遭遇する「親ノード」は DOM の文脈です。DOM は文書（HTML / XML）をノードの階層構造として表現します。ここでの親ノードは、あるノードの immediate container を指します。
- DOM API における代表的なプロパティ：
Node.parentNodeとElement.parentElement。parentNodeは親がどの Node タイプでも返す（Element、Document、DocumentFragment など）、親が存在しなければ null を返す。 parentElementは親が Element の場合にのみ親要素を返し、親が Document や DocumentFragment のときは null を返します。- 例外的状況：Document オブジェクトや孤立した DocumentFragment の
parentNodeは null です。テキストノードは親として Element を持つことが多いです。 - ノードの移動：
appendChild、insertBefore等はノードを別の親へ移す（再配置すると自動で元の親から削除される）。
JavaScript による具体例
典型的な DOM 操作の例を示します（ブラウザのコンソール等で動作します）。
const child = document.querySelector('#child');
console.log(child.parentNode); // 親ノードを出力（Element か Document など）
console.log(child.parentElement); // 親が Element なら同じ Element を返す
const parent = document.querySelector('#parent');
parent.appendChild(child); // child の親が変わる
イベント委譲の実装では親ノードを利用して、1つの親で子のイベントをハンドリングすることがよくあります（イベントは子から親へとバブリングする）。また、便利な Element.closest(selector) は親方向へ最も近いマッチする要素を返します。
イベント伝播と親ノード
DOM イベントは通常、バブリング（子→親）とキャプチャ（親→子）というフェーズを持ちます。そのため親ノードはイベントハンドリングの文脈で重要です。
- イベント委譲：複数の子要素に個別のリスナーをつける代わりに、共通の親に1つのリスナーをつけて
event.targetやevent.target.closest()を使って判別する。これによりメモリと DOM 操作を削減できる。 - 一部のイベントはバブリングしないものがある（例：focus は通常バブリングしない）ので注意。
XPath、CSS、クエリ系での親ノード
DOM を横断するために用いられるクエリ/セレクタも親ノードの概念に依存します。
- XPath：親軸（parent axis）は「..」や
parent::*で利用でき、ノードの親を参照できる。 - CSS：従来は「親セレクタ」がなく、子や兄弟を指定するセレクタが中心でしたが、CSS Selectors Level 4 の
:has()擬似クラスは「子を持つ親」を指定可能にし、実質的な親選択が可能になってきている（ブラウザ対応は逐次進んでいる）。
シャドウ DOM（Shadow DOM）やスロッティングの注意
Web コンポーネントの Shadow DOM は「会社の組織図」とも言える複雑な親子関係を導入します。シャドウルートやスロットによる表示上の親子関係（composed tree）と、実際のツリー（light DOM、shadow DOM）で親の解釈が異なる場面があります。
- スロッティングされたノードは、見た目上はホストの一部として表示されますが、内部的には元の親と slot の割付情報を持ちます。イベントの伝播は composedPath に従い、場合によってはイベントの到達経路が再ターゲットされる（retargeting）ため、単純に parentNode を追うだけでは意図した動作を得られないことがあります。
- このため、Web コンポーネント設計時は親関係の扱いとイベント経路の違いを理解しておく必要があります。
ファイルシステムと親ノード
ファイルシステムのディレクトリ構造もツリーであり、親ノード概念が使われます。Unix 系では「..」が親ディレクトリエントリを指します。実装上は inode やディレクトリエントリで親参照が管理されることが多く、ルートディレクトリの親は慣例的にルート自体を指すことがあります（システムや実装に依存）。
アルゴリズム設計への影響：効率と設計上の選択
親ノードの有無やその保持方法はアルゴリズムの計算量に直結します。
- 探索（DFS/BFS）：子方向の列挙は簡単だが、親への遡りが頻繁に必要なら親ポインタがある方が高速。
- 共通祖先（LCA）：親ポインタを用いることで二分法やバイナリリフト（binary lifting）等の手法を適用でき、高速に LCA を求められる。
- 動的木（link-cut tree）や集合管理（Union-Find）：親参照の更新がアルゴリズムの中核となる。特に経路圧縮は parent ポインタを書き換える重要なテクニックで、実行時間をほぼ定数に近づける。
よくある誤解と注意点
- 「親ノードは常に1つ」：ツリーではそうだが、一般的なグラフや DOM の CSS 選択の文脈では複数の親（参照）が存在しうる。
- DOM の親と見た目上の親を混同しない：シャドウ DOM やスロット、CSS レンダリングで見た目と論理構造がずれる場合がある。
- 親ノードの操作は副作用を持つ：appendChild 等は元の場所からノードを移動させる（参照を削除する）。意図せず DOM を移動すると副作用が出るので注意が必要。
- 一部イベントはバブリングしない：イベントの種類によっては親へ伝播しないものがあるためイベント委譲をする際は対象イベントの性質を確認する。
実務での活用例
- イベント委譲で大量要素のイベント管理を簡潔にする。
- 動的 UI で要素を再配置する際の親の再設定（append/insert）による効率化。
- ツリー構造のアルゴリズム（LCA、最短経路、削除/挿入等）の高速化に parent ポインタを利用。
- デバッグや DOM の状態検証で
console.log(node.parentNode)による階層確認。
まとめ
親ノードは、ツリー構造における基本的な概念であり、データ構造や DOM、ファイルシステム、アルゴリズム設計など幅広い分野で基本かつ重要な役割を果たします。実装次第でパフォーマンスや設計の複雑さに大きく影響するため、親ポインタを持つか・どう扱うか・DOM の場合は parentNode と parentElement の違いやシャドウ DOM による見た目／論理構造の差異などを理解した上で設計・実装することが重要です。
参考文献
- MDN Web Docs — Node.parentNode
- MDN Web Docs — Element.parentElement
- MDN Web Docs — Event.composedPath()
- MDN Web Docs — :has() (CSS)
- MDN Web Docs — XPath 入門
- Wikipedia — Tree (data structure)
- Wikipedia — Lowest common ancestor
投稿者プロフィール
