Come posso determinare il tipo di un elemento HTML in JavaScript?

191

Ho bisogno di un modo per determinare il tipo di un elemento HTML in JavaScript. Ha l'ID, ma l'elemento stesso potrebbe essere un <div>, un <form>campo, un <fieldset>, ecc. Come posso ottenere questo?

javascript dom

— AdamTheHutt
fonte

290

nodeNameè l'attributo che stai cercando. Per esempio:

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

Si noti che nodeNamerestituisce il nome dell'elemento in maiuscolo e senza le parentesi angolari, il che significa che se si desidera verificare se un elemento è un <div>elemento, è possibile farlo come segue:

elt.nodeName == "DIV"

Anche se questo non ti darebbe i risultati attesi:

elt.nodeName == "<div>"

— pkaeding
fonte

29

Consiglio di farlo in questo modo: if (elt.nodeName.toLowerCase () === "div") {...} In questo modo, se per qualche motivo non viene più restituito in lettere maiuscole (minuscole o miste), tu non dovrà cambiarlo e questo codice funzionerà comunque bene.

— TheCuBeMan,

6

In risposta a @TheCuBeMan, l'uso di toLowerCase () significa anche che è necessario assicurarsi che nodeName esista (se è possibile, elt non è, in realtà, un elemento):if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }

— Erik Koopmans il

che dire localName?

— Bomba,

46

Che dire element.tagName?

Vedi anche tagNamedocumenti su MDN .

— Brian Cline
fonte

4

Secondo i timestamp mi hai battuto di meno di 1 secondo!

— palpebre

27

Da QuirksMode: Il mio consiglio è di non usare affatto tagName. nodeName contiene tutte le funzionalità di tagName, più alcune altre. Pertanto nodeName è sempre la scelta migliore.

— bdukes il

7

A volte vuoi element.constructor.name

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

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

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

— golopot
fonte

7

È possibile utilizzare l'ispezione del codice generico tramite 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

Cerca qui un elenco completo di interfacce.

— Code4R7
fonte