getElementById を使用せずに可視 DOM に要素が存在するかどうかを確認する方法

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

getElementById を使用せずに要素が可視 DOM に存在するかどうかを確認するには、次のことを考慮してください。代替案:

ドキュメント本文内の存在の確認:

Csuwldcat が提案しているように、DOM 要素の contains() メソッドを使用して、要素が子孫であるかどうかを確認できます。文書本文の。このメソッドは、要素が表示可能な DOM の一部であるかどうかを示すブール値を返します。

<code class="js">document.body.contains(elementReference);</code>

他の要素選択メソッドの使用:

などの他の要素選択メソッドquerySelector()、querySelectorAll()、および getElementsByClassName() を使用して、特定の条件に基づいて要素を検索できます。結果の要素参照または NodeList の長さが 0 の場合、その要素は存在しません。

たとえば、ID が「find-me」の要素を確認するには:

<code class="js">var elementExists = !!document.getElementById("find-me");</code>

注: querySelector() と querySelectorAll() は、それぞれ最初に一致した要素または NodeList を返します。 getElementsByClassName() は NodeList を返します。したがって、要素が存在するかどうかを判断するには、NodeList の長さプロパティをチェックする必要があります。

要素の存在をチェックするカスタム関数:

提供された isNull 関数は、次の目的で使用できます。一時的にランダムな ID を割り当て、その ID を持つ要素を検索し、その後ランダムな ID を削除することにより、要素の存在を確認します。このアプローチは、要素が DOM に存在するかどうかを効果的に検証します。

JavaScript 変数の動作に関する関連リソース:

• [JavaScript のスコープとクロージャについて](https: //developer.mozilla.org/en-US/docs/Glossary/Closure)
• [JavaScript 変数: 値と参照](https://www.w3schools.com/js/js_variables.asp)
• [JavaScript における値渡しと参照渡し](https://developer.mozilla.org/en-US/docs/Glossary/Pass_by_reference)

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