如何使用 JavaScript 检查 DOM 元素是否存在

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

如何使用 JavaScript 检查 DOM 元素是否存在

作者：迹忆客最近更新：2023/02/23 浏览次数：

检查 DOM 中是否不存在元素：

使用 getElementById 或 querySelector 方法来选择元素。
检查该值是否不等于 null。
如果该值不等于 null，则该元素存在于 DOM 中。

这是示例的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>jiyik.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Box content</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

// ✅ 使用 getElementById
const el1 = document.getElementById('box');
console.log(el1); // 👉️ div#box

if (el1 !== null) {
  // 👇️ this runs
  console.log('The element exists in the DOM');
} else {
  console.log('The element does NOT exist in the DOM');
}

我们使用 document.getElementById 方法通过 id 选择元素。

该方法返回元素，其 id 属性与提供的字符串匹配。

传递给 getElementById 方法的 id 区分大小写，因此 box 不等于 Box。

如果文档中不存在具有提供的 id 的元素，则返回 null 值。

我们的 if 语句检查变量是否不存储空值。

if 块仅在元素存在于 DOM 中时运行，否则运行 else 块。

确保将我们的 JS 脚本标签放在 body 标签的底部。

<body>
  <div id="box">Box content</div>

  <!-- ✅ Placed at bottom of body tag -->
  <script src="index.js"></script>
</body>

HTML 代码是从上到下解析的，因此如果您的脚本标记位于声明 DOM 元素的代码之上，它们将不可用。

使用 querySelector 检查 DOM 元素是否存在

我们还可以使用 document.querySelector 方法检查元素是否存在于 DOM 中。

这是示例的 HTML。

<body>
  <div id="box">Box content</div>

  <div class="big-box">Big box content</div>

  <script src="index.js"></script>
</body>

这是相关的 Javascript 代码。

// ✅ select by ID
const el1 = document.querySelector('#box');
console.log(el1); // 👉️ div#box

if (el1 !== null) {
  // 👇️ this runs
  console.log('the element exists in the DOM');
} else {
  console.log('the element does NOT exist in the DOM');
}

请注意 ，我们将 CSS 选择器传递给了 document.querySelector 方法。

示例中的选择器选择了一个 id 为 box 的元素。

这是一个选择具有大盒子类的元素的示例。

// ✅ select by Class
const el1 = document.querySelector('.big-box');
console.log(el1); // 👉️ div.big-box

if (el1 !== null) {
  console.log('the element exists in the DOM');
} else {
  console.log('the element does NOT exist in the DOM');
}

querySelector 方法将表示有效 CSS 选择器的字符串作为参数。

如果没有元素与选择器匹配，则该方法返回空值，就像 getElementById 方法一样。

我们还可以为 querySelector 方法提供多个以逗号分隔的选择器。

const el = document.querySelector('.my-class, #my-id');

if (el !== null) {
  console.log('the element exists in the DOM');
} else {
  console.log('the element does NOT exist in the DOM');
}

该示例尝试选择一个类为 my-class 或 id 设置为 my-id 的元素。

如果两个元素都未找到，则 querySelector 方法返回 null。

使用 getElementsByClassName 检查 DOM 元素是否存在

我们还可以使用 document.getElementsByClassName 来检查具有给定类的元素是否存在。

这是示例的 HTML。

<body>
  <div class="box">Box content</div>

  <script src="index.js"></script>
</body>

这是相关的 JavaScript 代码。

const elements = document.getElementsByClassName('box');
console.log(elements); // 👉️ HTMLCollection [div.box]

if (elements.length > 0) {
  // 👇️ div.box
  console.log('At least one element with a class of box exists');
} else {
  console.log('No elements with a class of box exist');
}

console.log(elements[0]); // 👉️ div.box

代码示例检查页面上是否至少存在 1 个具有框类的元素。

document.getElementsByClassName 方法返回具有指定类名的所有元素的类数组对象。

请注意 ，该方法返回一个类数组对象而不是数组。

如果需要将 HTMLCollection 转换为数组，请使用 Array.from() 方法。

const elements = Array.from(
  document.getElementsByClassName('box'),
);
console.log(elements); // 👉️ [div.box]

if (elements.length > 0) {
  // 👇️ div.box
  console.log('At least one element with a class of box exists');
} else {
  console.log('No elements with a class of box exist');
}

// ✅ 遍历数组
elements.forEach(element => {
  console.log(element);
});

我们使用 Array.from() 方法将 HTML 元素集合转换为数组，并使用 Array.forEach() 方法迭代集合。

使用 querySelectorAll 检查 DOM 元素是否存在

document.querySelectorAll 方法也可用于检查 DOM 元素是否存在。

这是示例的 HTML。

<body>
  <div class="box">Box content</div>

  <script src="index.js"></script>
</body>

这是相关的 JavaScript 代码。

const elements = document.querySelectorAll('.box');
console.log(elements); // 👉️ NodeList [div.box]

if (elements.length > 0) {
  // 👇️ div.box
  console.log('At least one element with a class of box exists');
} else {
  console.log('No elements with a class of box exist');
}

console.log(elements[0]); // 👉️ div.box

请注意 ，我们将有效的 CSS 选择器传递给了 querySelectorAll 方法。

该方法返回一个 NodeList，其中包含与指定选择器匹配的所有元素。

如果 NodeList 的长度大于 0，则至少存在一个具有指定类的元素。

使用 getElementsByTagName 检查 DOM 元素是否存在

我们还可以使用 getElementsByTagName 方法检查元素是否存在于 DOM 中。

这是示例的 HTML。

<body>
  <p>jiyik.com</p>

  <script src="index.js"></script>
</body>

这是相关的 JavaScript 代码。

const elements = document.getElementsByTagName('p');
console.log(elements); // 👉️ HTMLCollection [p]

if (elements.length > 0) {
  // 👇️ this runs
  console.log('At least one p element exists');
} else {
  console.log('No p elements exists on the page');
}

console.log(elements[0]); // 👉️ p