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