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

使用 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 变量中的值不为 null 或 undefined,请使用可选链接。

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 块。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 使用 JavaScript 检查元素是否为 Select 下拉列表