Element.tagName — Eigenschaft · JavaScript-Referenz

Signatur

Element.tagName

Beschreibung

Element.tagName gibt den Tag-Namen des Elements zurück, auf dem die Eigenschaft gelesen wird. Das ist praktisch, wenn man in Event-Handlern, beim Traversieren des DOM oder bei generischen Hilfsfunktionen wissen muss, welche Art von Element vorliegt, etwa ob ein Klick auf einen Button, einen Link oder ein Eingabefeld ging.

Die Groß- und Kleinschreibung hängt vom Dokumenttyp ab:

In HTML-Dokumenten wird der Name von HTML-Elementen immer in Großbuchstaben zurückgegeben ("DIV", "INPUT"), egal wie er im Quelltext steht.
In XML-/XHTML-Dokumenten und bei Elementen aus anderen Namensräumen (z. B. SVG, MathML) bleibt die ursprüngliche Schreibweise erhalten ("svg", "linearGradient").
Hat das Element ein Namensraum-Präfix, ist es Teil des Werts (z. B. "xlink:foo").

Bei Elementen ist tagName gleich Node.nodeName. Der Unterschied: nodeName gibt es auf allen Knoten (z. B. "#text" bei Textknoten), tagName nur auf Element. Soll die Prüfung unabhängig von der Schreibweise funktionieren, vergleicht man am besten mit localName (immer so geschrieben wie erstellt, bei HTML also klein) oder nutzt element.matches().

Rückgabewert

Typ

string

Beschreibung

Der qualifizierte Name des Elements (gegebenenfalls mit Präfix). Bei HTML-Elementen in HTML-Dokumenten in Großbuchstaben, sonst in der ursprünglichen Schreibweise.

Beispiele

Tag-Namen eines Elements auslesen

const p = document.createElement('p');
const custom = document.createElement('my-widget');

console.log(p.tagName);
console.log(custom.tagName);
console.log(document.body.tagName);

P MY-WIDGET BODY

Event-Delegation: auf den Elementtyp reagieren

const list = document.querySelector('#todo-list');

list.addEventListener('click', (event) => {
  const target = event.target;
  switch (target.tagName) {
    case 'BUTTON':
      target.closest('li')?.remove();
      break;
    case 'INPUT':
      target.closest('li')?.classList.toggle('done', target.checked);
      break;
    default:
      console.log(`Klick auf <${target.tagName.toLowerCase()}>`);
  }
});

HTML und SVG: unterschiedliche Schreibweise

const container = document.createElement('div');
container.innerHTML = '<svg><linearGradient id="g"></linearGradient></svg>';

const svg = container.firstElementChild;
const gradient = svg.firstElementChild;

console.log(container.tagName); // HTML-Namensraum
console.log(svg.tagName);       // SVG-Namensraum
console.log(gradient.tagName);
console.log(container.localName);

DIV svg linearGradient div

Robuste Typprüfung ohne Schreibweisen-Probleme

const isTag = (el, name) =>
  el instanceof Element && el.tagName.toLowerCase() === name.toLowerCase();

const input = document.createElement('input');
console.log(isTag(input, 'input'));
console.log(isTag(input, 'textarea'));
// Alternative mit CSS-Selektor:
console.log(input.matches('input'));

true false true

// Wichtig · Fallstricke

Groß-/Kleinschreibung: Ein Vergleich wie el.tagName === 'div' schlägt in HTML-Dokumenten fehl, weil der Wert "DIV" ist. Umgekehrt ist svg.tagName === 'SVG' falsch. Besser ist localName, tagName.toLowerCase() oder el.matches('div').
Schreibgeschützt: Eine Zuweisung an tagName wird ignoriert (im Strict Mode gibt es einen TypeError). Um den Typ eines Elements zu ändern, muss man ein neues Element erzeugen (document.createElement()), die Kinder und Attribute übernehmen und das alte mit replaceWith() ersetzen.
Nur auf Elementen: Textknoten, Kommentare und das document haben kein tagName (undefined). Wer beliebige Knoten verarbeitet, sollte nodeName oder vorher node.nodeType === Node.ELEMENT_NODE prüfen.
Für typsichere Prüfungen ist el instanceof HTMLInputElement oft besser als ein String-Vergleich, weil TypeScript den Typ dann automatisch einengt.
Kompatibilität: wird seit DOM Level 1 von allen Browsern unterstützt. In sehr alten Browsern gab es Abweichungen bei der Schreibweise in XHTML.

Siehe auch

Element.localName Node.nodeName Element.namespaceURI Element.matches() Document.createElement() Element Element.part