jQueryで特定の一意の要素がDOMノードとして存在しているかを確かめる最良の方法

Question

現在

$(コンテナ).find( 探したい要素 ).length

という方法を使っていますが、このやり方で合っているでしょうか？

動くことは動くものの若干腑に落ちなさもあり、このやり方しかないのかな？と疑問に思っています。

[0]や.size()など、いくつかやり方はあるようですが…

あるいは逆に

$( 探したい要素 ).closest().length

のように、探したい要素から見て親があるかどうかを調べたほうがいいとかあったりするのでしょうか？

const $main = $('#main'); //documentとかbodyとかでもいいかもしれないけど、IDで絞っておいたほうが高速らしいので

const $header = $('<header><h1>ハロー、ハッピーワールド！</h1></header>');

if( $main.find( $header ).length ) {
	console.log("そんなわけない");
}
else {
	console.log("そうだよね")
}

$header.appendTo( $main );

if( $main.find( $header ).length ) {
	console.log("そうだよね");
}
else {
	console.log("そんなわけない");
}

$header.remove();

if( $main.find( $header ).length ) {
	console.log("そんなわけない");
}
else {
	console.log("そうだよね");
}

追記

関数の引数として、すでに消えたはずの子要素（上記の場合は h1 ）を渡し、その関数の中で親要素を削除しようとするとエラーになるようです
これがどうも回避できずにいます…

const $main = $('#main');
const $header = $('<header><h2>追記</h2></header>');

const func = ( $node ) => {
	//中略
	const $closest = $node.closest();

	if( $main.find( $node ).length && $main.find( $closest ).length ) {
		$closest.remove(); //エラー
	}
};

const $h2 = $header.children('h2');

//中略

$h2.remove();

//中略

func( $h2 );

Comments

[kei344]

どちらも再現しません。最初の物は$h1が定義されておらず、後者は$headerが定義されていません。

[flc]

訂正のための編集をした際に漏れがあったようです。気付かせていただきありがとうございます。

[kei344]

https://jsfiddle.net/ed24v6xa/ エラーは出ませんね。（Windows/Chrome&Firefox）

[m.ts10806]

追記に今更気づきました。タイトルと質問内容精査したほうがいいです。何がベストかは人によって違うので明確な基準も欲しいですね

Answer 1

質問自体はすでに出ている回答で十分です。
追記は「以前取得した要素のドキュメントツリーへの存在確認をしたい」ということになります。

document.contains(対象要素ノード);

あるいは(IE用には)ドキュメントツリーはルートがdocument.documentElementなので

document.documentElement.contains(対象要素ノード);

https://developer.mozilla.org/ja/docs/Web/API/Node/contains

jQueryで書く場合は次のようになります。

$node.closest(':root').length; // 1 or 0

Comments

[flc]

.closest(':root')！
単純明快でよいですね。そのうちVanilla JSへの以降も考えておりますので、いずれも使わせていただきたく思います。

Answer 2

ちょっと大喜利要素がありそうな質問ですね・・。

「探したい要素」にもよるかと思いますが、提示部分の$(ｺﾝﾃﾅ)の「ｺﾝﾃﾅ」部分は子要素を辿ることもできたはずなので、親子関係がはっきりしているのであれば下記のような書き方「も」出来ると思います。

※未検証です

if( $("#main > header > h1").length > 0 ){

}

• jQueryのセレクタメモ

「腑に落ちない」と仰っていますが、やり方が１つでない以上は、同じコード内で同じようなことをする際に記法が散らばらないように気をつければあとは好みでいいようにも思います。

速度をそこまで気にされるのであればjQueryではなくPure JavaScriptを選択するのが最も賢明です。

Answer 3

jQueryの特徴は、セレクタで指定した存在しない要素もlength=0のオブジェクトとして返すことですね
ちょうどquerySeletorAllをすると空のNodeListをつかめるのと同じ状況です
つまり戻り値がかならずオブジェクトなので

console.log($('hoge')?1:2);

のような処理が適用できません

したがって、lengthを調べるか1つ目の要素を抜き出すかするのが妥当です。
なお１つ目の要素を抜き出すという意味では.eq()がありますが、これも
0個の要素しかないjQueryオブジェクトからeq(0)しても
結果はまた0個の要素をもつjQueryを返すので意味がありません。

<script>
$(function(){
  console.log($('div')?'ok':'ng');
  console.log($('span')?'ok':'ng');//想定どおりにならない

  console.log(document.querySelectorAll('div')?'ok':'ng');
  console.log(document.querySelectorAll('span')?'ok':'ng');//想定どおりにならない

  console.log(document.querySelector('div')?'ok':'ng');
  console.log(document.querySelector('span')?'ok':'ng');

  console.log($('div').length>0?'ok':'ng');
  console.log($('span').length>0?'ok':'ng');

  console.log($('div').get(0)?'ok':'ng');
  console.log($('span').get(0)?'ok':'ng');

  console.log(document.querySelectorAll('div')[0]?'ok':'ng');
  console.log(document.querySelectorAll('span')[0]?'ok':'ng');

  console.log($('div')[0]?'ok':'ng');
  console.log($('span')[0]?'ok':'ng');
});
</script>
<div>1</div>
<div>2</div>
<div>3</div>