使用 JavaScript 检查元素是否为输入

Check if an Element is an Input using JavaScript

使用该tagName属性检查元素是否为输入，例如
if (element.tagName.toLowerCase() === 'input') {}. 该tagName属性返回访问它的元素的标签名称。请注意，该属性以大写形式返回 DOM 标签名称。

以下是本文示例的 HTML。

索引.html


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

  <body>
    <input type="text" id="first_name" name="first_name" />

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

这是相关的 JavaScript 代码。

索引.js


const element = document.getElementById('first_name');

// ✅ Check if element is an Input
if (element.tagName.toLowerCase() === 'input') {
  console.log('element is an input');
} else {
  console.log('element is NOT an input');
}

// ✅ Check if element is Textarea
if (element.tagName.toLowerCase() === 'textarea') {
  console.log('element is a textarea');
} else {
  console.log('element is NOT a text area');
}

// ✅ Check if element is input of specific type
if (
  element.tagName.toLowerCase() === 'input' &&
  element.getAttribute('type') === 'text'
) {
  console.log('element is an input of type text');
} else {
  console.log('element is NOT an input of type text');
}

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

请注意，DOM 元素名称是大写的。例如，如果访问一个
img元素，该tagName属性返回"IMG".

索引.js


const element = document.getElementById('first_name');

console.log(element.tagName); // 👉️ "INPUT"

这就是我们使用
String.toLowerCase
方法将结果转换为小写的原因。

我们的第二个示例检查元素是否为textarea.

在第三个示例中，我们检查元素是否为 type 的输入text。

索引.js


const element = document.getElementById('first_name');

// ✅ Check if element is input of specific type
if (
  element.tagName.toLowerCase() === 'input' &&
  element.getAttribute('type') === 'text'
) {
  console.log('element is an input of type text');
} else {
  console.log('element is NOT an input of type text');
}

我们使用了
逻辑与 (&&)
运算符，这意味着必须满足两个条件if才能运行该块。

该getAttribute方法返回元素上提供的属性的值。

如果元素上不存在该属性，则该方法返回null或为空字符串，具体取决于浏览器的实现。

如果您需要确保存储在element变量中的值不是
nullor undefined，请使用可选的链接 (?.) 运算符。

索引.js


const element = null;

// ✅ Check if element is an Input
if (element?.tagName?.toLowerCase() === 'input') {
  console.log('element is an input');
} else {
  console.log('element is NOT an input');
}

// ✅ Check if element is Textarea
if (element?.tagName?.toLowerCase() === 'textarea') {
  console.log('element is a textarea');
} else {
  console.log('element is NOT a text area');
}

// ✅ Check if element is input of specific type
if (
  element?.tagName?.toLowerCase() === 'input' &&
  element?.getAttribute('type') === 'text'
) {
  console.log('element is an input of type text');
} else {
  console.log('element is NOT an input of type text');
}

如果您向该方法提供不存在的选择器或向该方法提供不存在的选择器，您可能会取回一个null值。 idgetElementByIdquerySelector

可选的
链接 (?.)
运算符允许我们在引用指向 anull或
undefined值时短路。

运算符没有抛出错误，而是短路返回undefined.

该else块在所有三个示例中运行，并且没有抛出任何错误。

–