Testando o tipo de um elemento DOM em JavaScript

99

Existe uma maneira de testar o tipo de um elemento em JavaScript?

A resposta pode ou não exigir a biblioteca de protótipos, no entanto, a configuração a seguir faz uso da biblioteca.

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

Respostas:

125

Você pode usar typeof(N)para obter o tipo de objeto real, mas o que você deseja fazer é verificar a tag, não o tipo do elemento DOM.

Nesse caso, use a propriedade elem.tagNameou elem.nodeName.

se quiser ser realmente criativo, você pode usar um dicionário de tagnames e encerramentos anônimos em vez de alternar ou if / else.

FlySwat
fonte
68
if (element.nodeName == "A") {
 ...
} else if (element.nodeName == "TD") {
 ...
}
bobwienholt
fonte
1
Às vezes é. De qualquer forma, você sempre pode usar element.nodeName.match(/\bTBODY\b/i)ou element.nodeName.toLowerCase() == 'tbody'etc.
Robusto
9
@Robusto está incorreto. Se o documento for HTML e a implementação do DOM estiver correta, sempre estará em letras maiúsculas. De acordo com: w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 na seção "tagName" (para elementos nodeName == tagName) "O HTML DOM retorna o tagName de um elemento HTML em a forma canônica em maiúsculas, independentemente da caixa no documento HTML de origem. "
bobwienholt
19

Talvez você precise verificar o tipo de nó também:

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
  }
}

Editar: corrigido o valor nodeType

Roenving
fonte
3
Cuidado com o caso de tagName.
ausência de pálpebras,
@Casey: Será em uma página HTML; em uma página XHTML, a caixa da tag é preservada (então "a" será "A" nas páginas HTML e "a" nas páginas XHTML): w3.org/TR/2000/REC-DOM-Level-2- Core-20001113 /… (Supondo que a página XHTML foi exibida corretamente e não foi exibidatext/html .)
TJ Crowder
2
@TJCrowder, então parece que a melhor opção éelement.tagName.toLowerCase() === 'a'
p3drosola
@Ped: Sim, ou element.nodeName.toLowerCase()se for possível element, não será realmente um elemento (por exemplo, se você não fez a nodeType == 1verificação listada acima). A Nodeinterface tem nodeName. Por Elementexemplo, é o mesmo que tagName. Para outros tipos de nós, é algo como "#text"ou "#document". Mas acho que sempre usaria o nodeTypecheque.
TJ Crowder
Atualização de 2019: pelo menos no Chromium moderno (v79.0.3945.79), a string tagname está em maiúsculas. "Para árvores DOM que representam documentos HTML, o nome da tag retornado está sempre na forma canônica em maiúsculas. Por exemplo, tagName chamado em um elemento <div> retorna" DIV " https://developer.mozilla.org/en- US / docs / Web / API / Element / tagName a maneira correta de comparar serianode.tagName == 'DIV'
marcs
6

roenving está correto, MAS você precisa alterar o teste para:

if (element.nodeType == 1) {
//código
}

porque nodeType de 3 é na verdade um nó de texto e nodeType de 1 é um elemento HTML. Consulte http://www.w3schools.com/Dom/dom_nodetype.asp

Eric Wendelin
fonte
2

Normalmente, eu pego no valor de retorno toString (). Funciona em elementos DOM acessados ​​de forma diferente:

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]"

Então, a peça relevante:

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

Funciona no Chrome, FF, Opera, Edge, IE9 + (no IE mais antigo retorna "[object Object]").

Herbertusz
fonte
2

Embora as respostas anteriores funcionem perfeitamente, vou apenas adicionar outra maneira em que os elementos também podem ser classificados usando a interface que eles implementaram.

Consulte W3 Org para interfaces disponíveis

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">

A verificação da interface pode ser feita de 2 maneiras elem instanceof HTMLAnchorElementou elem.constructor.name == "HTMLAnchorElement", ambos os retornostrue

Vignesh Raja
fonte
0

Eu tenho outra maneira de testar o mesmo.

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
}

nicolsondsouza
fonte