表示可能な DOM に要素が存在するかどうかを確認する方法

ID を使用して DOM 内の要素を検索することは、JavaScript の一般的なタスクです。ただし、このメソッドを使用せずに要素の存在を確認する必要がある場合はどうすればよいでしょうか?

非表示要素の識別

要素が DOM から削除されても、JavaScript 変数内のその参照は依然として残ります。存在します。これにより、typeof または === null を使用して要素の存在をチェックするときに予期しない結果が生じる可能性があります。

現在のアプローチ

isNull() 関数は、ランダムな ID を一時的に設定することでこの問題を回避しようとします。 getElementById() を使用して要素を検索し、一時 ID を削除します。このアプローチは、要素が DOM 内に見つからない場合は true を返し、見つかった場合は false を返します。

存在チェックの簡略化

目的が単に要素が存在するかどうかを確認することである場合 (要素に関係なく)可視性)、より簡単なアプローチは、ブラウザの要素選択メソッドのいずれかを使用することです:

var elementExists = document.getElementById("find-me");

ブール値の場合値を使用できます!!選択メソッドの呼び出し前。さらに、querySelector() や getElementsByTagName() などのメソッドも使用できます。

DOM の可視性のチェック

可視 DOM に要素が存在するかどうかを具体的にチェックするには、contains() メソッドを使用できます。使用可能:

document.body.contains(someReferenceToADomElement);

このメソッドは、要素が DOM に存在する場合は true を返し、それ以外の場合は false を返します。