迹忆客 专注技术分享

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

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 中的虚假值是:nullundefined0false“”(空字符串)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');
}

elementExists 变量存储一个布尔值:

  1. 如果 getElementById 未返回空值,则为真
  2. 如果方法返回 null,则为 false

这种方法也易于阅读并且对初学者更友好,因为没有必须在幕后发生的类型强制转换——值已经是布尔值。

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便