如何在不依赖 getElementById 的情况下验证可见 DOM 中元素是否存在

如何确定可见 DOM 中元素是否存在

您可能会遇到需要验证元素是否存在而不依赖于在 getElementById 方法上。本文讨论了一种改进的方法，并提供了对 JavaScript 变量行为的见解。

用于元素存在性检查的自定义函数

如提供的代码中所示，检索元素到变量中并不能保证对 DOM 的实时引用。要准确检查是否存在，可以使用 isNull() 等函数。此函数为元素分配一个随机 ID，使用分配的 ID 检索它，然后删除该 ID 以避免副作用。

替代方法

除了此自定义之外函数，还有更直接的选项来检查元素是否存在：

• 浏览器选择方法： document.getElementById("find-me") 或返回引用的类似方法等技术可以使用元素或 null。对于布尔结果，请申请！
• 其他元素选择方法：文档提供了多种查找元素的方法，例如 querySelector()、getElementsByClassName() 等。验证它们的长度属性，因为某些方法（如 NodeList）即使在为空时也会返回真值。

可见 DOM 检查

专门检查元素是否驻留在可见 DOM，在 DOM 元素上使用 contains() 方法：

document.body.contains(someReferenceToADomElement);

此方法提供更精确的存在验证。

理解 JavaScript 变量行为

关于 JavaScript 变量为何显示观察到的行为，解释在于变量的本质。考虑以下代码：

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

myVar 存储对元素的引用，而不是对其的实时连接。当元素从 DOM 中删除时，它在 myVar 中的引用指针不会更新。因此，typeof myVar 仍然是“object”，isNull(myVar) 返回 false，表明尽管元素已被删除，但明显存在。

通过理解这些概念，您可以有效地验证各种 DOM 场景中的元素是否存在。

以上是如何在不依赖 getElementById 的情况下验证可见 DOM 中元素是否存在的详细内容。更多信息请关注PHP中文网其他相关文章！