【Javascript】親要素や祖先要素を取得する方法 parentNode/closest

こんにちは、ゆうやです！

本記事では、javascriptで親要素や祖先要素を取得する方法をご紹介します。

筆者は今までは祖先要素を取得するのにjQueryの「parents」メソッドを使用したのですが、脱jQueryのためにVueを勉強し始めたときに、生jsで同じことをするにはどのように書けばいいかを調べました。

その時の備忘録となります！

それでは参りましょう。

想定しているHTML構造

↓↓HTML構造は以下のようなものを想定。

<div id="Sosen">
  <div id="Oya">
    <div id="Kodomo">子ども</div>
  </div>
</div>

idがKodomoのdiv要素を起点にした時に親要素、祖先要素を取得するにはどうしたらよいか見ていきましょう。

親要素を取得する方法

親要素を取得するには、「parentNode」を使用します！

それではKodomoの親要素を取得してみましょう。

↓↓

let child = document.getElementById("Kodomo"); // 子要素を変数に代入
 let oya = child.parentNode; // 親要素を取得
 console.log(oya); // コンソールでみてみる

祖先要素を取得する方法

次に祖先要素を取得するには、「closest()」メソッドを使用します！

↓↓取得したいセレクタをclosest(“セレクタ名”)のように指定してあげましょう。

let child = document.getElementById("Kodomo"); // 子要素を変数に代入
 let sosen = child.closest("#Sosen"); // 祖先要素を取得
 console.log(sosen); // コンソールでみてみる

とても簡単ですね！！

closest()を知らなかった筆者は、parentNodeをつなげてつなげてやっていましたのでほんとうにclosest()に出会えて嬉しかったです笑

let child = document.getElementById("Kodomo"); // 子要素を変数に代入
 let sosen = child.parentNode.parentNode; // 祖先要素を取得
 console.log(sosen); // コンソールでみてみる

愚行ですね笑

参考

まとめ

以上、javascriptで親要素や祖先要素を取得する方法をご紹介しました。

生jsをほとんど勉強せずにjQueryから使いはじめてしまった方（筆者も含めて）はこの機会に勉強してみるのもいいかもしれませんね(^o^)

【コーディング】HTML・CSS・Javascriptサンプルコード記事まとめ

カードデザインのコーディングサンプルコード記事まとめ

Swiper.jsカスタマイズに役立つ記事まとめ