【脱jQuery】.parents()で親要素よりも上の要素の取得をネイティブJavascriptに書き換え

2020.08.20　Posted by Coding_team

Webプログラミング

2126351_s こんにちはウェブラボ技術メモです。
親要素よりも上の、先祖要素を取得したいときありますよね。そんなときjQueryの.parents()メソッドを使用して取得することができます。今回は.parents()メソッドの紹介と、ネイティブで書きたいマニアの方へ、Javascriptではどのように書けばいいのかご紹介します。

jQuery「.parents()」メソッド

Javascript「.closest()」メソッドでネイティブに書き換え

jQuery「.parents()」メソッド

まず先にjQueryの「.parents()」メソッドの使用例を示します。

例:HTML

<div class="div1">
	<div class="div2">
		<div class="div3">
			<div class="div4">
				<div class="div5"></div>
			</div>
		</div>
	</div>
</div>

</div>

このようなHTMLにおいて、
div5からdiv1を取得したい場合、

例:jQuery

$(function(){
	var div1=$(".div5").parents(".div1");
});

$(function(){

var div1=$(".div5").parents(".div1");

});

このように書くだけで取得できます。
似たようなもので、.parent()メソッドというものがありますが、これは直上の親要素を取得するメソッドであり、オーストラリアとオーストリアくらい違います。これを使い、
$(“.div5”).parent().parent()・・・のようにメソッドチェーンで先祖要素を取得することもできますが、HTML構造を守らないといけなくなるので、先祖の場合はparents()を使用したほうがいいでしょう。

Javascript「.closest()」メソッドでネイティブに書き換え

jQueryの「.parents()」メソッドの書き換えには、Javascriptの「.closest()」メソッドを使用します。

例:Javascript

var div1=document.getElementsByClassName("div5")[0].closest(".div1");

1	var div1=document.getElementsByClassName("div5")[0].closest(".div1");

のように使用します。
「.closest([セレクター])」なので、クラスにはドットを付け忘れないようご注意ください。

ちなみに、.parent()メソッドの書き換えは.parentNodeです。
parentNodeとwhile文とかで探し出すのかな～なんて思ってましたが、.closest()なんてものがあったんですね！
どうしても先祖要素の取得が必要な場面はあるかと思います。ぜひお役立てください。

以上、.parents()と、書き換えJavascriptでした。