指定した親要素を取得する

指定した親要素を取得する

JavaScriptで特定のHTMLから親要素を取得するときはclosest関数を使います。
closest関数は指定したセレクタで1番近い親要素を検索して取得することができます。
特定の要素から子孫要素を検索して取得するquerySelector関数の親要素版として使うことができます。

JavaScript コード例

// 指定したid属性のHTML要素を取得
const btn = document.getElementById("btn");

// 指定したid属性を持つ親要素を取得
let parent = btn.closest("#section3");

closest関数は親要素を探して該当するHTML要素があったときはElementオブジェクトを返し、見つからなかったときはnullを返します。

取得する親要素のセレクタはid属性の他に要素名や各種属性を指定することができます。
以下のHTMLにおいて、id属性がbtnのa要素から親要素を取得することを想定してclosest関数を使うと以下のようになります。

index.html

<main>
  <article title="test">
    <header>
      <h1>記事のタイトル</h1>
      <p>この記事はJavaScriptを確認するために書いています。</p>
    </header>
    <section id="section1">
      <h2>1章 親要素を探す</h2>
      <p>JavaScriptを使って指定した親要素を探し、取得することができます。</p>
    </section>
    <section id="section2">
      <h2>2章 親要素を取得する</h2>
      <p>子要素だけでなく、親要素を探すことができると、同じ親要素に属する子孫要素を検索するときにも便利です。<br>検索では要素名の他に、以下の属性を指定できます。</p>
      <ul>
        <li>テストテキスト1</li>
        <li>テストテキスト2</li>
        <li>テストテキスト3</li>
      </ul>
    </section>
    <section id="section3" class="parent">
      <h2>3章 実際に取得してみる</h2>
      <p><samp>a要素</samp>をクリックすると親要素を探すことができます。</p>
      <div class="btn_area">
        <a id="btn" class="btn" href="#">親要素を取得する</a>
      </div>
    </section>
  </article>
</main>

main.js

// 指定したid属性のHTML要素を取得
const btn = document.getElementById("btn");

// HTML要素名から取得
let parent1 = btn.closest("section");
// <section id="section3">...</section>

// id属性から取得
let parent2 = btn.closest("#section3");
// <section id="section3">...</section>

//　class名から取得
let parent3 = btn.closest(".parent");
// <section id="section3">...</section>

// HTML要素名から取得
let parent4 = btn.closest("article");
// <article title="test">...</article>

// title属性から取得
let parent5 = btn.closest("[title=test]");
// <article title="test">...</article>