Node.nodeName — Eigenschaft · JavaScript-Referenz

Signatur

Node.nodeName

Beschreibung

nodeName ist auf jedem DOM-Knoten verfügbar und liefert je nach Knotentyp einen anderen Namen. Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert, im Strict Mode lösen sie einen TypeError aus.

Der Rückgabewert hängt vom Knotentyp ab:

Element: der qualifizierte Name, also derselbe Wert wie Element.tagName. In HTML-Dokumenten ist er großgeschrieben ("DIV"), in XML- und SVG-Kontexten bleibt die Originalschreibweise erhalten ("svg", "circle").
Attr: der qualifizierte Attributname ("class").
Text: "#text". CDATASection: "#cdata-section". Comment: "#comment".
Document: "#document". DocumentFragment: "#document-fragment".
DocumentType: der Doctype-Name, z. B. "html".
ProcessingInstruction: der Wert von target.

Praktisch ist nodeName vor allem beim Durchlaufen gemischter Knotenlisten wie childNodes, weil die Eigenschaft anders als tagName auch für Text- und Kommentarknoten definiert ist. Um den Typ eines Knotens zu prüfen, ist nodeType meist zuverlässiger. nodeName eignet sich eher, um zwischen bestimmten Elementen zu unterscheiden.

Rückgabewert

Typ

string

Beschreibung

Der Name des Knotens. Bei Elementen ist das der Tag-Name (in HTML großgeschrieben), bei anderen Knotentypen ein fester Bezeichner wie "#text" oder "#comment".

Beispiele

Knotennamen der Kindknoten auflisten

// HTML: <div id="box">Hallo <b>Welt</b><!-- Hinweis --></div>
const box = document.getElementById('box');

for (const node of box.childNodes) {
  console.log(node.nodeName);
}

console.log(document.nodeName);
console.log(document.doctype?.nodeName);

#text B #comment #document html

Ereignisdelegation: Klicks nur auf Buttons auswerten

const toolbar = document.querySelector('.toolbar');

toolbar.addEventListener('click', (event) => {
  const target = event.target;
  // In HTML ist nodeName großgeschrieben
  if (target.nodeName === 'BUTTON') {
    console.log(`Aktion: ${target.dataset.action}`);
  }
});

Aktion: speichern

Robuster Vergleich in HTML und SVG

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
const div = document.createElement('div');

const isTag = (node, name) =>
  node.nodeName.toLowerCase() === name.toLowerCase();

console.log(svg.nodeName, circle.nodeName, div.nodeName);
console.log(isTag(circle, 'CIRCLE'), isTag(div, 'div'));

svg circle DIV true true

Leere Textknoten herausfiltern

const list = document.querySelector('ul');

const relevant = [...list.childNodes].filter((node) =>
  !(node.nodeName === '#text' && node.textContent.trim() === '')
);

console.log(relevant.map((n) => n.nodeName));

["LI", "LI", "LI"]

// Wichtig · Fallstricke

Groß- und Kleinschreibung: In HTML-Dokumenten liefern HTML-Elemente großgeschriebene Namen ("DIV"). SVG- und MathML-Elemente sowie Elemente in XML- bzw. XHTML-Dokumenten (application/xhtml+xml) behalten ihre Originalschreibweise. Wer robust vergleichen will, nutzt toLowerCase() oder localName, das bei HTML-Elementen immer kleingeschrieben ist.
Präfixe: Bei Elementen mit Namensraum-Präfix enthält nodeName das Präfix ("xlink:href", "svg:rect"). localName liefert den Namen ohne Präfix.
Typprüfung: Zur Unterscheidung von Knotentypen ist node.nodeType === Node.TEXT_NODE eindeutiger als ein Vergleich mit "#text", denn nodeName unterscheidet zum Beispiel nicht zwischen einem Element namens "#text" in XML und einem echten Textknoten.
Nur lesbar: Ein Element lässt sich nicht über nodeName umbenennen. Dafür muss man ein neues Element anlegen und die Kinder dorthin verschieben.
Kompatibilität: Wird von allen Browsern seit DOM Level 1 unterstützt, auch in Node.js-DOM-Implementierungen wie jsdom.

Siehe auch

Node.nodeType Element.tagName Element.localName Node.nodeValue Node.childNodes Node FontFace.unicodeRange