getElementById に依存せずに可視 DOM 内の要素の存在を確認する方法

可視 DOM 内の要素の存在を確認する方法

依存せずに要素の存在を確認する必要があるシナリオに直面する場合があります。 getElementById メソッドで。この記事では、改善されたアプローチについて説明し、JavaScript 変数の動作についての洞察を提供します。

要素の存在チェックのカスタム関数

提供されたコードで示されているように、要素を取得します。変数に変数を追加しても、DOM へのライブ参照は保証されません。存在を正確に確認するには、isNull() のような関数を使用できます。この関数は要素にランダムな ID を割り当て、割り当てられた ID を使用して要素を取得し、副作用を避けるために ID を削除します。

代替メソッド

このカスタムの他に関数では、要素の存在を確認するためのより簡単なオプションがあります:

• ブラウザ選択メソッド: document.getElementById("find-me") などの手法、または参照を返す同様のメソッド要素または null を使用できます。ブール値の結果を得るには、 apply !!
• その他の要素選択メソッド: ドキュメントには、querySelector()、getElementsByClassName() など、要素を検索するためのメソッドがいくつか用意されています。一部のメソッド (NodeList など) は空の場合でも真の値を返すため、長さプロパティを確認します。

Visible DOM Check

要素が存在するかどうかを具体的に確認するには表示される DOM では、DOM 要素で contains() メソッドを使用します。

document.body.contains(someReferenceToADomElement);

このメソッドは、より正確な存在検証を提供します。

JavaScript 変数の動作について

JavaScript 変数が観察された動作を示す理由については、変数の性質に説明があります。次のコードを考えてみましょう。

var myVar = document.getElementById("myElem");

myVar は、要素へのライブ接続ではなく、要素への参照を保存します。要素が DOM から削除されると、myVar 内のその参照ポインターは更新されません。したがって、myVar の typeof は「object」のままで、isNull(myVar) は false を返し、削除されたにもかかわらず要素が存在していることを示します。

これらの概念を理解することで、さまざまな DOM シナリオで要素の存在を効果的に検証できます。

以上がgetElementById に依存せずに可視 DOM 内の要素の存在を確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。