ywork2020.com

Title

祖先要素を取得する

目次 (INDEX)

closestとは

ここで説明するclosest とは次の語句からなるjavascriptのメソッドです。
closest
読み: クローゼスト
意味: 最も近い、近接した

目次に戻る

closestメソッドの概要

このメソッドは、引数に指定したセレクターに該当する最初の祖先要素を返します。

これは呼び出し元の要素を基準にルートノードに向かって該当するノードを検索します。 該当するノードが見つからない場合は null を返します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

var closestElement = targetElement.closest(selectors);

目次に戻る

サンプルコードと実行結果

ここでは、span要素とp要素とdiv要素を題材にします。

  • span: この要素がメソッドの呼び出し元になります。
  • p: この要素は span の親要素になります。
  • div: この要素は p の親要素になります。
    つまり span から見るとお爺ちゃん要素になります。

初期状態では span 要素には予めCSSで背景色を設定しています。 p と div には背景色が設定されていませんが、実行ボタンをクリックすると closest を使って祖先要素を検索してスタイルを設定します。

サンプルコード: CSS 
<style>
	#idSpan{
		display: block;
		background-color: ##darkseagreen;
		padding: 1em;
	}
</style>
  • 02: display (要素のボックスの種類です。)
  • 03: background-color (要素の背景色です。)
  • 04: padding (要素の境界線とコンテンツの間にある余白です。)
サンプルコード: HTML 
<body>
	<button onclick="func()">実行</button>
	<div>
		div elemnt
		<p>
			p elemnt
			< span id="idSpan">span elemnt< /span>
		</p>
	</div>
</body>
  • 02: button (onclick属性にscriptのfunc()関数を指定しています。)
  • 03-09: div (span から見るとお爺ちゃん要素です。)
  • 04-08: p (span から見ると親要素です。)
  • 07: span (この要素からルートノードに向かって検索します。)
サンプルコード: script 
<script>
	let elmSpan = document.querySelector("#idSpan");
	function func(){
		elmSpan.closest("p").setAttribute("style", "background-color: ##darkkhaki; padding: 1em;");
		elmSpan.closest("div").setAttribute("style", "background-color: ##darkgoldenrod; padding: 1em;");
	}
</script>
  • 02: elmSpan (識別子=idSpan の要素をElementオブジェクトとして取得します。)
  • 03-06: func() (関数を作成しています。実行ボタンをクリックすると呼び出されます。)
  • 04: closest("p") (呼び出し元の要素からルートノードに向かって p 要素を検索します。)
  • 05: closest("div") (呼び出し元の要素からルートノードに向かって div 要素を検索します。)
実行結果:
div elemnt

p elemnt span elemnt

目次に戻る