Como posso determinar o tipo de um elemento HTML em JavaScript?

191

Eu preciso de uma maneira de determinar o tipo de um elemento HTML em JavaScript. Ele possui o ID, mas o elemento em si pode ser a <div>, um <form>campo, um <fieldset>etc. Como posso conseguir isso?

javascript dom AdamTheHutt
fonte

Respostas:

290

nodeNameé o atributo que você está procurando. Por exemplo:

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

Observe que nodeNameretorna o nome do elemento em maiúsculas e sem os colchetes angulares, o que significa que, se você quiser verificar se um elemento é um <div>elemento, poderá fazê-lo da seguinte maneira:

elt.nodeName == "DIV"

Embora isso não lhe dê os resultados esperados:

elt.nodeName == "<div>"
pkaeding
fonte
29
Eu recomendo fazer assim: if (elt.nodeName.toLowerCase () === "div") {...} Dessa forma, se por algum motivo ele não for mais retornado em letras maiúsculas (minúsculas ou mistas), você não precisará alterá-lo e esse código ainda funcionará bem.
TheCuBeMan
6
Em resposta a @TheCuBeMan, usando toLowerCase () significa que você também precisa ter certeza existe nodeName (se for de todo possível elt não é, de fato, um elemento):if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }
Erik Koopmans
que tal localName?
bomba
46

Que tal element.tagName?

Veja também tagNamedocumentos sobre o MDN .

Brian Cline
fonte
4
De acordo com os timestamps, você me venceu em menos de 1 segundo!
Eyelidlessness 31/10/08
27
De QuirksMode: Meu conselho é não usar o tagName. nodeName contém todas as funcionalidades de tagName, além de mais algumas. Portanto, nodeName é sempre a melhor escolha.
bdukes
7

As vezes voce quer element.constructor.name

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

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

document.createElement('foo').constructor.name
// HTMLUnknownElement
golopot
fonte
7

Você pode usar a inspeção de código genérico via 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

Procure aqui uma lista completa de interfaces.

Code4R7
fonte