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

【问题标题】：How can I determine the type of an HTML element in JavaScript?如何确定 JavaScript 中 HTML 元素的类型？
【发布时间】：2010-09-20 05:42:28
【问题描述】：

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

【问题讨论】：

标签： javascript dom

【解决方案1】：

nodeName 是您要查找的属性。例如：

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

请注意，nodeName 返回的元素名称大写且不带尖括号，这意味着如果要检查元素是否为 <div> 元素，可以按如下方式进行：

elt.nodeName == "DIV"

虽然这不会给你预期的结果：

elt.nodeName == "<div>"

【讨论】：

我建议这样做： if(elt.nodeName.toLowerCase() === "div") { ... } 这样，如果由于某种原因不再以大写形式返回字母（小写或混合），您不必更改它，此代码仍然可以正常工作。
回应@TheCuBeMan，使用 toLowerCase() 意味着您还需要确保 nodeName 存在（如果它完全可能 elt 实际上不是一个元素）：if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }
localName 呢？

【解决方案2】：

element.tagName 呢？

另见tagName docs on MDN。

【讨论】：

根据时间戳你领先我不到 1 秒！
来自 QuirksMode：我的建议是根本不要使用 tagName。 nodeName 包含 tagName 的所有功能，以及更多功能。因此 nodeName 总是更好的选择。

【解决方案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

查看here 获取完整的接口列表。

【讨论】：

【解决方案4】：

有时你想要element.constructor.name

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

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

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

【讨论】：