【问题标题】：Testing the type of a DOM element in JavaScript在 JavaScript 中测试 DOM 元素的类型
【发布时间】：2010-09-16 03:34:41
【问题描述】：

有没有办法在 JavaScript 中测试元素的类型？

答案可能需要也可能不需要原型库，但以下设置确实使用了该库。

function(event) {
  var element = event.element();
  // if the element is an anchor
  ...
  // if the element is a td
  ...
}

【问题讨论】：

您不是在询问类型。该类型可能是一个对象。您要求的是标签，如答案中所述，tagName 属性

标签： javascript prototypejs

【解决方案1】：

您可以使用typeof(N) 来获取实际的对象类型，但您要做的是检查标签，而不是 DOM 元素的类型。

在这种情况下，请使用 elem.tagName 或 elem.nodeName 属性。

如果您想真正发挥创意，可以使用标记名字典和匿名闭包来代替 switch 或 if/else。

【讨论】：

【解决方案2】：

if (element.nodeName == "A") {
 ...
} else if (element.nodeName == "TD") {
 ...
}

【讨论】：

有时是这样。无论如何，您总是可以使用element.nodeName.match(/\bTBODY\b/i) 或element.nodeName.toLowerCase() == 'tbody' 等。
@Robusto 不正确。如果文档是 HTML 并且 DOM 实现是正确的，它总是大写的。根据：w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 在“tagName”部分下（对于元素 nodeName == tagName）“HTML DOM 以规范的大写形式返回 HTML 元素的 tagName，无论源 HTML 文档中的大小写如何。”跨度>

【解决方案3】：

也许您也必须检查节点类型：

if(element.nodeType == 1){//element of type html-object/tag
  if(element.tagName=="a"){
    //this is an a-element
  }
  if(element.tagName=="div"){
    //this is a div-element
  }
}

编辑：更正了 nodeType-value

【讨论】：

注意tagName的大小写。
@Casey：它将在 HTML 页面中；在 XHTML 页面中，标记的大小写被保留（因此“a”在 HTML 页面中将是“A”，而在 XHTML 页面中将是“a”）：w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/…（假设 XHTML 页面已正确提供，而不是作为text/html.)
@T.J.Crowder 所以看起来最好的选择是element.tagName.toLowerCase() === 'a'
@Ped：是的，或者element.nodeName.toLowerCase()，如果element 可能实际上不是一个元素（例如，如果你没有完成上面列出的nodeType == 1 检查）。 Node 接口有nodeName。对于Element 实例，它与tagName 相同。对于其他类型的节点，例如"#text" 或"#document"。不过，我想我会一直使用nodeType 支票。
2019 更新：至少在现代 Chromium (v79.0.3945.79) 上，标记名字符串是大写的。 "对于表示 HTML 文档的 DOM 树，返回的标签名称始终采用规范的大写形式。例如，在
元素上调用的 tagName 返回 "DIV" https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName 正确方式要比较的是node.tagName == 'DIV'

【解决方案4】：

roenving 是正确的，但您需要将测试更改为：

如果（元素.nodeType == 1）{ //代码 }

因为 nodeType 为 3 实际上是一个文本节点，而 nodeType 为 1 是一个 HTML 元素。见http://www.w3schools.com/Dom/dom_nodetype.asp

【讨论】：

【解决方案5】：

我通常从 toString() 返回值中得到它。它适用于不同访问的 DOM 元素：

var a = document.querySelector('a');

var img = document.createElement('img');

document.body.innerHTML += '<div id="newthing"></div>';
var div = document.getElementById('newthing');

Object.prototype.toString.call(a);    // "[object HTMLAnchorElement]"
Object.prototype.toString.call(img);  // "[object HTMLImageElement]"
Object.prototype.toString.call(div);  // "[object HTMLDivElement]"

然后是相关的部分：

Object.prototype.toString.call(...).split(' ')[1].slice(0, -1);

它适用于 Chrome、FF、Opera、Edge、IE9+（在旧版 IE 中它返回“[object Object]”）。

【讨论】：

【解决方案6】：

虽然前面的答案完美无缺，但我将添加另一种方法，元素也可以使用它们实现的接口进行分类。

参考W3 Org for available interfaces

console.log(document.querySelector("#anchorelem") instanceof HTMLAnchorElement);
console.log(document.querySelector("#divelem") instanceof HTMLDivElement);
console.log(document.querySelector("#buttonelem") instanceof HTMLButtonElement);
console.log(document.querySelector("#inputelem") instanceof HTMLInputElement);

<a id="anchorelem" href="">Anchor element</a>
<div id="divelem">Div Element</div>
<button id="buttonelem">Button Element</button>
<br><input id="inputelem">

接口检查有elem instanceof HTMLAnchorElement或elem.constructor.name == "HTMLAnchorElement"两种方式，都返回true

【讨论】：

【解决方案7】：

我有另一种测试方法。

Element.prototype.typeof = "element";
var element = document.body; // any dom element
if (element && element.typeof == "element"){
   return true; 
   // this is a dom element
}
else{
  return false; 
  // this isn't a dom element
}

【讨论】：

扩展原型通常是个坏主意。