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

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

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

コード例

// 指定した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>