JavaScriptで親子要素や兄弟要素を取得する方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptで親子要素や兄弟要素を取得する方法について、それぞれの場合に分け、簡単に解説していきます。

親子要素を取得する方法

親要素を取得する際にはparentNodeプロパティを参照します。

一方、子要素を取得する際にはchildrenプロパティで配列を取得できます。

element.parentNode // 親要素を取得
element.children // 子要素を取得(配列)

上記のコードは、ある要素の親要素と子要素それぞれを取得するためのコードです。

兄弟要素を取得する方法

直前の要素を取得する際にはpreviousSiblingプロパティを参照します。

一方、直後の要素を取得する際にはnextSiblingプロパティで取得できます。

element.previousSibling // 直前の要素を取得
element.nextSibling // 直後の要素を取得

上記のコードは、ある要素の直前の要素と直後の要素それぞれを取得するためのコードです。

祖先要素を取得する方法

closestメソッドを使うことで、引数で指定するセレクタ名で祖先要素を探せます。

ただし、このメソッドは、Internet Explorerでは対応していないため、注意が必要です。

element.closest("div") // 指定されたセレクタ名の祖先要素を取得

上記のコードは、ある要素の親要素の方向に、指定されたセレクタ名の要素を取得するためのコードです。