Comment puis-je déterminer le type d'un élément HTML dans JavaScript?

191

J'ai besoin d'un moyen de déterminer le type d'un élément HTML dans JavaScript. Il a l'ID, mais l'élément lui-même peut être un <div>, un <form>champ, un <fieldset>, etc. Comment puis-je y parvenir?

javascript dom AdamTheHutt
la source

Réponses:

290

nodeNameest l'attribut que vous recherchez. Par exemple:

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

Notez que nodeNamerenvoie le nom de l'élément en majuscule et sans les chevrons, ce qui signifie que si vous voulez vérifier si un élément est un <div>élément, vous pouvez le faire comme suit:

elt.nodeName == "DIV"

Bien que cela ne vous donne pas les résultats escomptés:

elt.nodeName == "<div>"
pkaeding
la source
29
Je recommande de le faire comme ceci: if (elt.nodeName.toLowerCase () === "div") {...} De cette façon, si pour une raison quelconque il n'est plus renvoyé en majuscules (minuscules ou mixtes), vous n'aura pas à le changer et ce code fonctionnera toujours correctement.
TheCuBeMan
6
En réponse à @TheCuBeMan, utiliser toLowerCase () signifie que vous devez également vous assurer que nodeName existe (si c'est possible, elt n'est pas, en fait, un élément):if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }
Erik Koopmans
et quoi localName?
bomba le
46

Et quoi element.tagName?

Voir également tagName documentation sur MDN .

Brian Cline
la source
4
Selon les horodatages, vous m'avez battu de moins d'une seconde!
paupière
27
De QuirksMode: Mon conseil est de ne pas utiliser du tout tagName. nodeName contient toutes les fonctionnalités de tagName, plus quelques autres. Par conséquent, nodeName est toujours le meilleur choix.
bdukes
7

Parfois tu veux element.constructor.name

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

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

document.createElement('foo').constructor.name
// HTMLUnknownElement
Golopot
la source
7

Vous pouvez utiliser l'inspection de code générique 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

Regardez ici pour une liste complète des interfaces.

Code4R7
la source