JavaScript | 检查元素是否存在于可见 DOM 中

在开发网站或应用程序时，我们经常需要检查元素是否存在于可见 DOM（文档对象模型）中。这对于许多操作都是必要的，例如，在添加或删除元素之前，我们需要检查其是否存在于 DOM 中。

在本文中，我们将学习如何使用 JavaScript 检查元素是否存在于可见 DOM 中。

方法一：使用 document.contains() 方法

JavaScript 中的 Document 对象有一个 contains() 方法，用于检查节点是否是另一个节点的子节点。因此，我们可以使用该方法来检查元素是否存在于 DOM 中。

下面是使用 contains() 方法的代码示例：

const element = document.getElementById('element-id');
const isElementInDOM = document.contains(element);
if(isElementInDOM){
   // 元素存在于 DOM 中
} else {
   // 元素不在 DOM 中
}

首先，我们使用 getElementById() 方法获取一个元素的引用，然后使用 contains() 方法检查它是否存在于 DOM 中。 如果结果为 true，则表示元素存在于 DOM 中。 否则，元素不存在于 DOM 中。

方法二：使用 document.body.contains() 方法

另一种方法是使用 document.body.contains() 方法。 这个方法也用于检查节点是否是另一个节点的子节点。 但是，它是在文档主体中查找元素，而不是整个文档中。

以下是使用 document.body.contains() 方法的示例：

const element = document.getElementById('element-id');
if (document.body.contains(element)) {
   // 元素存在于 DOM 中
} else {
   // 元素不存在于 DOM 中
}

我们仍然使用 getElementById() 方法获取元素的引用，但是我们在 if 语句中使用 document.body.contains() 方法来检查它是否存在于 DOM 中。

方法三：使用 querySelectorAll() 方法

querySelectorAll() 方法用于通过 css 选择器选择多个元素。如果元素在 DOM 中，则该方法至少会返回一个匹配的元素。 因此，我们可以使用该方法检查元素是否存在于 DOM 中。

以下是使用 querySelectorAll() 方法的示例：

const element = document.querySelectorAll('#element-id');
if (element.length > 0) {
   // 元素存在于 DOM 中
} else {
   // 元素不存在于 DOM 中
}

我们使用 querySelectorAll() 方法选择具有特定 ID 的元素。 如果该方法返回的 NodeList 对象中至少有一个元素，则表示该元素存在于 DOM 中。

注意：在使用 querySelectorAll() 方法时，我们需要确保选择器中的 ID 带有 # 前缀。

结论

在本文中，我们介绍了三种方法来检查元素是否存在于可见 DOM 中。 我们可以使用 document.contains() 方法， document.body.contains() 方法或 querySelectorAll() 方法。 根据您的实际需求，您可以选择最适合您的方法。