JavaScriptで親子要素や兄弟要素を取得する方法【現役エンジニアが解説】
今回は、JavaScriptで親子要素や兄弟要素を取得する方法について、それぞれの場合に分け、簡単に解説していきます。
親子要素を取得する方法
親要素を取得する際にはparentNodeプロパティを参照します。
一方、子要素を取得する際にはchildrenプロパティで配列を取得できます。
element.parentNode // 親要素を取得 element.children // 子要素を取得(配列)
上記のコードは、ある要素の親要素と子要素それぞれを取得するためのコードです。
兄弟要素を取得する方法
直前の要素を取得する際にはpreviousSiblingプロパティを参照します。
一方、直後の要素を取得する際にはnextSiblingプロパティで取得できます。
element.previousSibling // 直前の要素を取得 element.nextSibling // 直後の要素を取得
上記のコードは、ある要素の直前の要素と直後の要素それぞれを取得するためのコードです。
祖先要素を取得する方法
closestメソッドを使うことで、引数で指定するセレクタ名で祖先要素を探せます。
ただし、このメソッドは、Internet Explorerでは対応していないため、注意が必要です。
element.closest("div") // 指定されたセレクタ名の祖先要素を取得
上記のコードは、ある要素の親要素の方向に、指定されたセレクタ名の要素を取得するためのコードです。