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

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