获取元素类型 JavaScript

在 JavaScript 中，要获取元素的类型有多种方法，这些方法适用于不同类型的元素。在本文中，我们将讨论获取以下类型元素的方法：

• HTML 元素
• DOM 元素
• 输入元素
• 选择元素

获取 HTML 元素类型

要获取 HTML 元素的类型，您可以使用 tagName 属性。该属性返回大写的标签名称。

const element = document.getElementById("myElement");
const elementType = element.tagName;
console.log(elementType); // 输出 "DIV"

您还可以使用 nodeName 属性，该属性返回元素的节点名称，但是它返回的值与 tagName 属性相同。

const element = document.getElementById("myElement");
const elementType = element.nodeName;
console.log(elementType); // 输出 "DIV"

获取 DOM 元素类型

要获取 DOM 元素的类型，您可以使用 nodeType 属性。这将返回一个数字，如下所示：

• 1: 元素节点
• 2: 属性节点
• 3: 文本节点
• 8: 注释节点
• 9: 文档节点

const element = document.getElementById("myElement");
const elementType = element.nodeType;
console.log(elementType); // 输出 1

您还可以使用 instanceof 关键字来确定元素是否为特定类型的 DOM 元素。

const element = document.getElementById("myElement");
if (element instanceof HTMLDivElement) {
  console.log("元素为 DIV 元素");
}

获取输入元素类型

通过 type 属性，您可以获取输入元素的类型。

const inputElement = document.getElementById("myInput");
const inputType = inputElement.type;
console.log(inputType); // 输出 "text"

获取选择元素类型

要获取选择元素的类型，您可以使用以下方法：

获取单选按钮或复选按钮的值

const radioOrCheckboxElement = document.querySelector('input[name="myRadioOrCheckbox"]:checked');
const radioOrCheckboxValue = radioOrCheckboxElement.value;
console.log(radioOrCheckboxValue);

获取下拉列表框的值

const selectElement = document.getElementById("mySelect");
const selectValue = selectElement.options[selectElement.selectedIndex].value;
console.log(selectValue);

结论

以上是获取元素类型的几种方法。您可以使用它们中的任何一种来确定任何类型的元素。这将使您能够以不同的方式处理元素，具体取决于该元素的类型。