Javascript 检查 DOM 元素是否存在

在前端开发中，我们常常需要判断某个 DOM 元素是否存在。这个判断通常是基于我们的需求来做的，比如需要判断某元素是否已经被加载到页面中、是否已经被创建等等。这篇文章将介绍如何在 JavaScript 中检查 DOM 元素是否存在。

方法一：使用 document.getElementById()

最常见的检查 DOM 元素是否存在的方法是使用 getElementById() 方法。这个方法可以返回具有指定 ID 的元素。如果该元素不存在，将返回 null。

以下是使用 getElementById() 方法的示例代码：

if (document.getElementById("element-id")) {
  // DOM 元素存在
} else {
  // DOM 元素不存在
}

方法二：使用 document.querySelector()

另一种检查 DOM 元素是否存在的方法是使用 querySelector() 方法。这个方法可以返回与指定 CSS 选择器匹配的第一个元素。如果没有找到任何元素，将返回 null。

以下是使用 querySelector() 方法的示例代码：

if (document.querySelector("#element-id")) {
  // DOM 元素存在
} else {
  // DOM 元素不存在
}

方法三：使用 document.getElementsByTagName()

如果您知道要查找的元素的标签名称，可以使用 getElementsByTagName() 方法来查找该元素。这个方法返回一个 NodeList 对象，该对象包含指定标签名称的所有元素。

以下是使用 getElementsByTagName() 方法的示例代码：

if (document.getElementsByTagName("div")[0]) {
  // DOM 元素存在
} else {
  // DOM 元素不存在
}

请注意，这个方法返回的是一个 NodeList，而不是一个单独的元素。要检查 NodeList 是否为空，可以使用 length 属性进行判断。

方法四：使用 document.getElementsByClassName()

如果您知道要查找的元素的 class 名称，可以使用 getElementsByClassName() 方法来查找该元素。这个方法返回一个包含指定 class 名称的所有元素的 HTMLCollection 对象。

以下是使用 getElementsByClassName() 方法的示例代码：

if (document.getElementsByClassName("class-name")[0]) {
  // DOM 元素存在
} else {
  // DOM 元素不存在
}

请注意，这个方法返回的也是一个 HTMLCollection，而不是一个单独的元素。要检查 HTMLCollection 是否为空，可以使用 length 属性进行判断。

总结

以上是检查 DOM 元素是否存在的四种方法。您可以根据自己的需求选择最适合的方法。如果您知道要查找的元素的 ID 或 class 名称，最好使用第一种或第四种方法。如果您知道要查找的元素的标签名称，则最好使用第三种方法。如果您有更复杂的查询需求，则可以使用第二种方法。

希望这篇文章能够帮助您更好地理解如何在 JavaScript 中检查 DOM 元素是否存在。