首页  >  文章  >  web前端  >  如何在不使用 getElementById 的情况下检查可见 DOM 中是否存在元素

如何在不使用 getElementById 的情况下检查可见 DOM 中是否存在元素

DDD
DDD原创
2024-10-21 22:18:31776浏览

How to Check if an Element Exists in the Visible DOM Without Using getElementById

如何检查可见 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn