【JavaScript】セレクタを指定して祖先要素を取得する【closest】

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでセレクタを指定して祖先要素を取得する方法をご紹介しています。

JavaScriptでセレクタ指定で祖先要素を取得したんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

closest()とは

closest()」は「Element」が持っているメソッドです。「closest()」は「Element」に指定した要素の直近に存在する祖先要素(もしくは自分自身)を取得することができます。取得する要素はメソッドの引数に指定します。

使い方は簡単です。下記のように「element」の後にメソッドと引数を指定するだけです。

element.closest(selector);

引数の「selector」にはセレクタを指定します。セレクタというのは任意の要素をDOMの中から抽出するための書式です。id名やclass名やタグ名などで指定することが多いかと思います。

では実際にclosest()を使用して祖先要素を取得してみましょう。

closest()で祖先要素を取得する

まずHTMLで2階層以上になるようにマークアップします。(祖先要素が取得できているか確認のためです。)

HTML

<div id="app">
    <div id="grandprent">
        <div id="prent">
            <div id="child"></div>
        </div>
    </div>
</div>

続いてスクリプトを作成します。

「id」が「child」を指定して「closest()」で「grandprent」のidを持つ要素を取得するようにスクリプトを記述していきます。

JavaScript

var child = document.getElementById("child");
console.log(child.closest("#grandprent"));

下記は上記のスクリプトを実行した場合の実行結果です。コンソールを確認すると祖先要素が取得できていることがお分かりになるかと思います。

実行結果

<div id="grandprent">
<div id="prent">
<div id="child"></div>
</div>
</div>

最後に

いかがでしたでしょうか。

JavaScriptで祖先要素を取得するには「element.closest(selector)」を知っているだけで可能です。簡単に覚えられますし、今後の制作に役立ててはいかがでしょうか。

以上、JavaScriptでセレクタを指定して祖先要素を取得する【closest()】のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍