使用 JavaScript 获取 DOM 元素的类型

在编写 JavaScript 代码时，我们经常需要获取 DOM 元素的类型。这样可以根据元素的类型执行不同的操作。下面介绍几种常见的方式来获取 DOM 元素的类型。

1. 使用 typeof 操作符

使用 typeof 操作符可以获取任意变量的类型，包括 DOM 元素。但是使用该方式并不是最优的，因为它返回的类型并不是我们通常使用的类型名称，例如获取 div 元素的类型为 "object"，而不是 "div"。

const div = document.querySelector('div');
console.log(typeof div); // 输出 "object"

2. 使用 HTMLElement.tagName 属性

每个 HTMLElement 对象都有一个 tagName 属性，表示该元素的标签名。通过获取这个属性值就可以获取 DOM 元素的类型，例如获取 div 元素的类型为 "DIV"。

const div = document.querySelector('div');
console.log(div.tagName); // 输出 "DIV"

3. 使用 HTMLElement.nodeName 属性

与 tagName 属性类似，每个 HTMLElement 对象也有一个 nodeName 属性，表示该元素的节点名称。该属性除了可以获取标签名外，还可以获取其他节点的名称，例如文本节点的名称为 "#text"，注释节点的名称为 "#comment"。

const div = document.querySelector('div');
console.log(div.nodeName); // 输出 "DIV"

4. 使用 HTMLElement.localName 属性

除了 tagName 属性外，每个 HTMLElement 对象还有一个 localName 属性。该属性与 tagName 属性类似，表示该元素的标签名，但是对于 XML 文档而言，该属性会返回标签名的本地名称，不包括命名空间前缀。

const xml = '<foo:div xmlns:foo="http://example.com"><foo:span></foo:span></foo:div>';
const parser = new DOMParser();
const doc = parser.parseFromString(xml, 'application/xml');
const div = doc.documentElement;
console.log(div.localName); // 输出 "div"

以上几种方式都可以用于获取 DOM 元素的类型，具体使用哪种方式取决于具体的应用场景。