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

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