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

Lesezeit: 2 Minuten

AdamTheHutt

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

pkaeding

nodeName ist das gesuchte Attribut. Zum Beispiel:

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

Beachten Sie, dass nodeName gibt den Elementnamen in Großbuchstaben und ohne die spitzen Klammern zurück, was bedeutet, dass wenn Sie überprüfen möchten, ob ein Element ein ist <div> Element könntest du es wie folgt machen:

elt.nodeName == "DIV"

Dies würde zwar nicht die erwarteten Ergebnisse liefern:

elt.nodeName == "<div>"

Ich empfehle, es so zu machen: if(elt.nodeName.toLowerCase() === “div”) { … } Auf diese Weise, wenn es aus irgendeinem Grund nicht mehr in Großbuchstaben (Kleinbuchstaben oder gemischt) zurückgegeben wird, können Sie muss es nicht ändern und dieser Code wird immer noch gut funktionieren.

– TheCubeMan

20. Oktober 2014 um 15:39 Uhr
Als Antwort auf @TheCuBeMan bedeutet die Verwendung von toLowerCase(), dass Sie auch sicherstellen müssen, dass nodeName existiert (wenn es überhaupt möglich ist, dass elt tatsächlich kein Element ist): if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }

– Erik Koopmans

6. November 2017 um 7:10 Uhr
wie wäre es mit localName?

– Bombe

13. September 2018 um 9:03 Uhr

Brian Cline

Wie wäre es mit element.tagName?

Siehe auch tagName Dokumente auf MDN.

Laut Zeitstempel hast du mich um weniger als 1 Sekunde geschlagen!

– Lidlosigkeit

31. Oktober 2008 um 17:32 Uhr
Von QuirksMode: Mein Rat ist, tagName überhaupt nicht zu verwenden. nodeName enthält alle Funktionalitäten von tagName und einige mehr. Daher ist nodeName immer die bessere Wahl.

– bdukes

31. Oktober 2008 um 17:38 Uhr
@bdukes Bist du noch hier? Sie sagen, Sie zitieren QuirksMode, aber ich kann den Originaltext dort nicht finden und bin neugierig, was die Unterschiede sind. Ebenso gut wie localName.

– Herr Lister

27. Juli um 8:37 Uhr
quirksmode.org/dom/core/#t23 sieht aus wie nodeName stellt zusätzlich zu Tags/Elementen auch den Namen von Attribut-, Text- und Kommentarknoten bereit. Ich glaube localName stammt von den XML-APIs. Wenn Sie wissen, dass Sie es immer mit einem Element zu tun haben, gibt es wahrscheinlich keinen großen Unterschied, aber nodeName ist die vielseitigere Option.

– bdukes

27. Juli um 18:18 Uhr

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

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

Manchmal willst du element.constructor.name

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

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

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

13119300cookie-checkWie kann ich den Typ eines HTML-Elements in JavaScript bestimmen?

#dom #Javascript