使用 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 块。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
