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

こんにちは、Ryohei（@ityryohei）です！

本記事では、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()】のご紹介でした！