DOM階層と関係性の理解

DOM トラバーサルは、JavaScript を使用してドキュメント構造内を移動し、さまざまなノードにアクセス、修正、または相互作用する操作。 DOM は階層的に接続されたノードによるツリー構造であり、親、子、兄弟 の関係を含む:

• 親ノード: 他のノードを内包するノード;
• 子ノード: 親ノードの直下にあるノード;
• 兄弟ノード: 同じ親を持ち、同じ階層にあるノード。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

この構造では:

• <ul> は <li> 要素の親;
• 各 <li> は <ul> の子;
• 2つの <li> 要素は互いに兄弟。

DOM のナビゲーション

JavaScript はこれらの関係を移動するための複数のプロパティを提供し、ノード間を効率的に移動可能。

ParentNode

parentNode プロパティは、現在のノードの親要素にアクセスするためのもの。DOMツリー内で上位の要素に移動する際に有用。

この例では、parentNode を使って選択された <ul> の親である <li> にアクセスし、リスト全体に枠線を追加。

ChildNodes

childNodes プロパティは、指定した要素のすべての子ノード（要素間の空白を含むテキストノードも含む）のコレクションを返します。

この例では、タスクリストを選択し、その子要素をループして、各 <li> 要素にパディングを追加します。

FirstChild と LastChild

firstChild: 要素の最初の子ノードにアクセス（テキストノードも含む）。
lastChild: 要素の最後の子ノードにアクセス（テキストノードも含む）。

ショッピングカート内の最初と最後のアイテムをハイライトする場合の例。

この例では、リスト内の最初と最後のアイテムをハイライトし、最初と最後のノードへのアクセスおよび変更方法を示しています。

firstChild と lastChild はしばしばテキストノード（空白など）を指すため、実際の要素ノード（<li>）ではない場合があります。そのため、firstElementChild と lastElementChild を使用することで、テキストノードをスキップし、最初と最後の子要素を正確に取得できます。

PreviousSibling と NextSibling

nextSibling: 現在のノードの次の兄弟ノードを取得。
previousSibling: 現在のノードの前の兄弟ノードを取得。

ToDoリスト内でタスク間を移動し、「次に行うタスク」や「完了済みタスク」としてマークする場合などの操作。

このシナリオでは：

• nextSibling は次のタスクに移動し、「次に行うタスク」としてマーク。
• previousSibling は前のタスクを完了済みとしてマーク。

ただし、nextSibling と previousSibling はしばしばテキストノード（空白など）を指します。実際の要素ノード（<li>）を対象とするには、テキストノードをスキップする nextElementSibling と previousElementSibling を使用します。

実践例：タスク管理アプリ

ユーザーがタスクを追加、ハイライト、管理できるタスク管理アプリを構築するケース。タスクを動的に更新し、最初のタスクを「優先」としてマークし、次のタスクを「今後」としてハイライトし、最後のタスクを「完了」としてマークすることを目指す。この例では、parentNode、childNodes、firstElementChild、lastElementChild、nextElementSibling、previousElementSibling を使ったDOMの操作方法を示す。

「タスクをハイライト」ボタンがクリックされると、JavaScriptはタスクの位置に応じて異なるスタイルを適用する。firstElementChild は最初のタスクを「優先」として太字・黄色で表示し、lastElementChild は最後のタスクを「完了」として緑色・取り消し線で表示する。nextElementSibling は2番目のタスクを「今後」として青色でハイライトし、前の兄弟要素が存在する場合は青色の枠線を付与する。