Wie kann ich den Typ eines HTML-Elements in JavaScript bestimmen?

189

Ich brauche eine Möglichkeit, den Typ eines HTML-Elements in JavaScript zu bestimmen. Es hat die ID, aber das Element selbst kann ein <div>, ein <form>Feld, ein <fieldset>usw. sein. Wie kann ich dies erreichen?

javascript dom AdamTheHutt
quelle

Antworten:

290

nodeNameist das Attribut, nach dem Sie suchen. Beispielsweise:

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

Beachten Sie, dass nodeNameder Elementname groß und ohne spitze Klammern zurückgegeben wird. Wenn Sie also überprüfen möchten, ob ein Element ein Element ist <div>, können Sie dies wie folgt tun:

elt.nodeName == "DIV"

Dies würde Ihnen zwar nicht die erwarteten Ergebnisse bringen:

elt.nodeName == "<div>"
pkaeding
quelle
29
Ich empfehle, dies folgendermaßen zu tun: if (elt.nodeName.toLowerCase () === "div") {...} Auf diese Weise, wenn es aus irgendeinem Grund nicht mehr in Großbuchstaben (Kleinbuchstaben oder gemischt) zurückgegeben wird, Sie muss es nicht ändern und dieser Code wird immer noch gut funktionieren.
TheCuBeMan
6
Als Antwort auf @TheCuBeMan bedeutet die Verwendung von toLowerCase (), dass Sie auch sicherstellen müssen, dass nodeName vorhanden ist (wenn es überhaupt möglich ist, ist elt tatsächlich kein Element):if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }
Erik Koopmans
was ist mit localName?
Bomba
46

Was ist mit element.tagName?

Siehe auch tagNameDokumente zu MDN .

Brian Cline
quelle
4
Laut Zeitstempeln hast du mich um weniger als 1 Sekunde geschlagen!
Augenlidlosigkeit
27
Von QuirksMode: Mein Rat ist, tagName überhaupt nicht zu verwenden. nodeName enthält alle Funktionen von tagName sowie einige weitere. Daher ist nodeName immer die bessere Wahl.
Bdukes
7

Manchmal willst du element.constructor.name

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

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

document.createElement('foo').constructor.name
// HTMLUnknownElement
Golopot
quelle
6

Sie können die generische Codeüberprüfung verwenden über 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

Schauen Sie hier für eine vollständige Liste der Schnittstellen.

Code4R7
quelle