親・子・兄弟要素をたどる
関連するノード間を DOM ツリーに沿って移動します。
「親・子・兄弟要素をたどる」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
なぜトラバースするのか
1 つの要素を取得した後、その関連要素が必要になることはよくあります。周囲のコンテナー、その内側の項目、またはすぐ隣の要素などです。DOM のトラバース用プロパティを使うと、ツリー内を移動できます。
parentElement
parentElement は、現在の要素を含む要素を返します。ツリーの最上位では null を返します。
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);children
children は、要素の直下にある子の要素を含むライブな HTMLCollection です（テキストノードは除外されます）。
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild と lastElementChild
これらはテキストノードやコメントノードを飛ばして、最初または最後の子要素に直接移動します。
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling は、同じ親の中で現在の要素の直後にある要素を返します。
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling は反対方向に移動します。同じ階層に兄弟要素がない場合、どちらも null を返します。
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Element プロパティと Node プロパティ
注意してください。childNodes、nextSibling、parentNode にはテキストノード（空白）が含まれます。通常は *Element* 版が目的に合っています。
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest は現在の要素からツリーを上方向にたどり、セレクターに一致する最も近い祖先要素（または自身）を返します。
const btn = document.querySelector(".delete");
const row = btn.closest("tr");イベント委譲での closest
クリックが内側の要素で発生したものの、それを処理する外側のコンテナーが必要な場合、closest が最適です。
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches は要素自身がセレクターの条件を満たすかどうかを調べ、boolean を返します。トラバースと組み合わせると便利です。
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));トラバースの組み合わせ
トラバースの手順を連結して、複雑な構造内を移動できます。たとえば、ボタンから行へ上がり、次の行へ移動できます。
const next = btn.closest("tr").nextElementSibling;簡単な確認
正しいプロパティを選びましょう。
まとめ
parentElement と closest で上方向に、children、firstElementChild、lastElementChild で子要素へ、nextElementSibling と previousElementSibling で横方向に移動できます。空白のテキストノードを飛ばすには、要素だけを扱うプロパティを優先してください。
よくある質問
「親・子・兄弟要素をたどる」レッスンは無料ですか？
はい。「親・子・兄弟要素をたどる」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「親・子・兄弟要素をたどる」で何を学びますか？
関連するノード間を DOM ツリーに沿って移動します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「親・子・兄弟要素をたどる」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。