在JavaScript中测试DOM元素的类型


99

有没有一种方法可以测试JavaScript中的元素类型?

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

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

Answers:


125

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

在这种情况下,请使用elem.tagNameelem.nodeName属性。

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


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

1
有时候是。不管怎么说,你总是可以使用element.nodeName.match(/\bTBODY\b/i)element.nodeName.toLowerCase() == 'tbody'
的robusto

9
@Robusto不正确。如果文档是HTML,并且DOM实现正确,则它将始终为大写。根据:w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815在“ tagName”部分下(对于元素nodeName == tagName)“ HTML DOM在以下位置返回HTML元素的tagName规范的大写形式,无论源HTML文档中的大小写如何。”
bobwienholt 2014年

19

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

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值


3
当心tagName的大小写。
2008年

@Casey:它将在HTML页面中;在XHTML页面中,保留了标签的大小写(因此,在HTML页面中“ a”将为“ A”,在XHTML页面中“ a”):w3.org/TR/2000/REC-DOM-Level-2- Core-20001113 /…(假设XHTML页面已正确提供,而未提供text/html。)
TJ Crowder

2
@TJCrowder,所以看来最好的选择是element.tagName.toLowerCase() === 'a'
p3drosola 2012年

@Ped:是的,或者element.nodeName.toLowerCase()是否有可能element实际上不是一个元素(例如,如果您没有完成nodeType == 1上面列出的检查)。该Node接口具有nodeName。对于Element情况下,这是一样的tagName。对于其他类型的节点,则为"#text""#document"。我想我总是会用nodeType支票。
TJ Crowder

2019更新:至少在现代Chromium(v79.0.3945.79)上,标记名字符串为大写。 “对于表示HTML文档的DOM树,返回的标签名称始终为规范的大写形式。例如,在<div>元素上调用的tagName返回“ DIV” https://developer.mozilla.org/zh- US / docs / Web / API / Element / tagName 进行比较的正确方法是node.tagName == 'DIV'
marcs


2

我通常从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]”)。


2

尽管前面的答案很完美,但我将添加另一种方式,也可以使用它们已实现的接口对元素进行分类。

有关可用的接口,请参考W3 Org

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 HTMLAnchorElementelem.constructor.name == "HTMLAnchorElement",均返回true


0

我有另一种测试方法。

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
}

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.