如何在JavaScript中确定HTML元素的类型？

Question

我需要一种在JavaScript中确定HTML元素类型的方法。它有ID，但元素本身可能是<div>、<form>字段、<fieldset>等。我该如何实现这个功能？

- AdamTheHutt

Answer 1

nodeName是你要寻找的属性。例如：

var elt = document.getElementById('foo');
console.log(elt.nodeName);

请注意：nodeName返回元素名称的大写形式，不包括尖括号。这意味着如果您想检查一个元素是否为 <div> 元素，则可以按照以下方式进行：

elt.nodeName == "DIV"

虽然这样做不能给你预期的结果：

elt.nodeName == "<div>"

- pkaeding

---

我建议这样做：如果(elt.nodeName.toLowerCase() === "div") { ... }这样，如果由于某种原因它不再以大写字母返回(变成小写或混合大小写)，你就不必更改它，这段代码仍将正常工作。 - TheCuBeMan

回应 @TheCuBeMan，使用 toLowerCase() 方法意味着你还需要确保 nodeName 存在（如果有可能 elt 实际上并不是一个元素）: if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }。 - Erik Koopmans

localName 是什么？ - bomba

Answer 2

那么关于 element.tagName 呢？

还可以参考 MDN 上的 tagName 文档。

- Brian Cline

---

根据时间戳，你比我快不到1秒！ - eyelidlessness

从 QuirksMode 来看，我的建议是完全不要使用 tagName。 nodeName 包含了 tagName 的所有功能，并且还有一些额外的功能。因此，nodeName 总是更好的选择。 - bdukes

@bdukes 你还在吗？你说你引用了QuirksMode，但我在那里找不到原始文本，我很好奇差异在哪里。以及localName。 - Mr Lister

https://www.quirksmode.org/dom/core/#t23 看起来 nodeName 除了标签/元素之外，还提供属性、文本和注释节点的名称。我相信 localName 是来自 XML API 的。如果你知道你总是在处理一个元素，那么可能没有太大的区别，但 nodeName 是更通用的选项。 - bdukes

Answer 3

您可以使用 instanceof 进行通用代码检查：

var e = document.getElementById('#my-element');
if (e instanceof HTMLInputElement) {}         // <input>
elseif (e instanceof HTMLSelectElement) {}    // <select>
elseif (e instanceof HTMLTextAreaElement) {}  // <textarea>
elseif (  ... ) {}                            // any interface

点击这里查看完整的接口列表。

- Code4R7

Answer 4

有时你想要 element.constructor.name

document.createElement('div').constructor.name
// HTMLDivElement

document.createElement('a').constructor.name
// HTMLAnchorElement

document.createElement('foo').constructor.name
// HTMLUnknownElement

- golopot