JavaScript 中通过ID获取元素

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

Vue React JavaScript Angular CSS HTML

JavaScript 中通过ID获取元素

作者：迹忆客最近更新：2022/11/22 浏览次数：

使用 getElementById() 方法通过 id 获取元素（如果存在），例如 if (document.getElementById('my-id') !== null){}。该方法返回其 id 与提供的字符串匹配的元素。如果没有元素匹配，则返回 null。

这是本文中示例的 HTML。

index.html

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

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

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

这是相关的 JavaScript 代码。

index.js

const el = document.getElementById('box');
console.log(el); // 👉️ div#box

if (el !== null) {
  console.log('✅ Element exists');
  // 👉️ safe to work with element here
} else {
  console.log('⛔️ Element does NOT exist in DOM');
}

我们使用 document.getElementById() 方法获取其 id 与提供的字符串匹配的元素。

如果 DOM 中没有元素与提供的字符串匹配，则该方法返回 null。

我们的 if 块仅在方法未返回 null 时运行。

如果 getElementById 返回 null，则运行 else 块。

我们还可以检查 el 变量是否存储真值，这会使我们的 if 检查更加隐含。

const el = document.getElementById('box');
console.log(el); // 👉️ div#box

if (el) {
  console.log('✅ Element exists');
} else {
  console.log('⛔️ Element does NOT exist in DOM');
}

在我们的 if 条件中，我们检查 el 变量是否存储了一个真值。

真实是所有不虚假的价值观。

JavaScript 中的虚假值是：null 、undefined 、0 、false 、“”（空字符串） 、NaN（不是数字） 。

如果 getElementById() 方法返回一个元素，它返回一个对象类型的值，这是一个真值，所以我们的 if 块将运行。

另一方面，如果没有找到具有提供的 id 的元素，该方法将返回一个空值，这是错误的，因此我们的 else 块将运行。

我们还可以使用布尔值检查元素是否存在。

const elementExists = document.getElementById('box') !== null;
console.log(elementExists); // 👉️ true

if (elementExists) {
  console.log('✅ Element exists');
} else {
  console.log('⛔️ Element does NOT exist in DOM');
}