迹忆客 专注技术分享

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

使用 JavaScript 检查元素是否为 Select 下拉列表

作者:迹忆客 最近更新:2022/09/23 浏览次数:

使用 tagName 属性检查元素是否是 select 下拉列表,例如 if (select.tagName === 'SELECT') {}tagName 属性返回访问它的元素的标签名称。 请注意,该属性以大写形式返回 DOM 元素的标记名称。

这是本文中示例的 HTML。

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

  <body>
    <select name="fruits" id="fruit-select">
      <option value="">--Choose an option--</option>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="kiwi">Kiwi</option>
    </select>

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

这是相关的 JavaScript 代码。

const select = document.getElementById('fruit-select');

if (select.tagName === 'SELECT') {
  console.log('✅ 元素是一个 select 下拉菜单');
} else {
  console.log('⛔️ 元素不是一个 select 下拉菜单');
}

tagName 属性返回访问它的元素的标签名称。

应该注意的是 DOM 元素名称是大写的。 例如,如果在 div 元素上访问,则 tagName 属性将返回“DIV”。

const select = document.getElementById('fruit-select');
console.log(select.tagName); // 👉️ "SELECT"

我们可以使用 String.toLowerCase 方法将标签名称转换为小写。

const select = document.getElementById('fruit-select');

if (select.tagName.toLowerCase() === 'select') {
  console.log('✅ 元素是一个 select 下拉菜单');
} else {
  console.log('⛔️ 元素不是一个 select 下拉菜单');
}

这种方法更直观一点,因为我们的代码的读者可能会对大写的 SELECT 字符串感到困惑。

如果大家需要确保在访问 tagName 属性之前存储在 select 变量中的值不为 nullundefined,请使用可选链接。

const select = null;

if (select?.tagName?.toLowerCase() === 'select') {
  console.log('✅ 元素是一个 select 下拉菜单');
} else {
  console.log('⛔️ 元素不是一个 select 下拉菜单');
}

如果向 getElementById 方法提供不存在的 id 或向 querySelector 方法提供不存在的选择器,则可能会返回 null 值。

如果引用指向 null 值或 undefined 值,可选的链接 (?.) 运算符允许我们进行短路。

运算符短路返回 undefined,而不是抛出错误。

在上面的示例中,select 变量的值为 null,因此运行 else 块。

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

本文地址:

扫一扫阅读全部技术教程

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

热门文章

教程更新

热门标签

扫码一下
查看教程更方便