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

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

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

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

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

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

それでは参りましょう。

Javascriptで親要素や祖先要素を取得してみよう!

HTML

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

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

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

親要素を取得する方法

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

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

↓↓

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

祖先要素を取得する方法

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

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

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

とても簡単ですね!!

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

closestを知らなかった筆者がやったやり方
let child = document.getElementById("Kodomo"); // 子要素を変数に代入
 let sosen = child.parentNode.parentNode; // 祖先要素を取得
 console.log(sosen); // コンソールでみてみる

愚行ですね笑

参考

参考 Node.parentNode - Web APIMDN 参考 Element.closest() - Web APIMDN

まとめ

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

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

【コーディング】HTML・CSS・Javascriptサンプルコード記事まとめ【コーディング】HTML・CSS・Javascriptサンプルコード記事まとめ カードデザインのコーディングサンプルコード記事まとめカードデザインのコーディングサンプルコード記事まとめ Swiper.jsカスタマイズに役立つ記事まとめSwiper.jsカスタマイズに役立つ記事まとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です