¿Cómo puedo determinar el tipo de un elemento HTML en JavaScript?

191

Necesito una forma de determinar el tipo de elemento HTML en JavaScript. Tiene la ID, pero el elemento en sí podría ser un <div>, un <form>campo, un <fieldset>, etc. ¿Cómo puedo lograr esto?

javascript dom

— AdamTheHutt
fuente

290

nodeNamees el atributo que estás buscando. Por ejemplo:

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

Tenga en cuenta que nodeNamedevuelve el nombre del elemento en mayúscula y sin los corchetes angulares, lo que significa que si desea verificar si un elemento es un <div>elemento, puede hacerlo de la siguiente manera:

elt.nodeName == "DIV"

Si bien esto no le daría los resultados esperados:

elt.nodeName == "<div>"

— pkaeding
fuente

29

Recomiendo hacerlo así: if (elt.nodeName.toLowerCase () === "div") {...} De esta manera, si por alguna razón ya no se devuelve en letras mayúsculas (minúsculas o mixtas), no tendrá que cambiarlo y este código seguirá funcionando bien.

— TheCuBeMan

66

En respuesta a @TheCuBeMan, usar toLowerCase () significa que también debe asegurarse de que nodeName exista (si es posible, elt no es, de hecho, un elemento):if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }

— Erik Koopmans

¿qué pasa localName?

— bomba

46

¿Qué hay de element.tagName?

Ver también tagNamedocumentos en MDN .

— Brian Cline
fuente

44

Según las marcas de tiempo, ¡me ganaste en menos de 1 segundo!

— párpado

27

De QuirksMode: Mi consejo es no usar tagName en absoluto. nodeName contiene todas las funcionalidades de tagName, además de algunas más. Por lo tanto, nodeName es siempre la mejor opción.

— bdukes

7

A veces quieres element.constructor.name

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

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

document.createElement('foo').constructor.name
// HTMLUnknownElement

— golopot
fuente

7

Puede usar la inspección de código genérico a través de 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

Busque aquí una lista completa de interfaces.

— Código4R7
fuente