Attr.name — Eigenschaft · JavaScript-Referenz

Signatur

Attr.name

Beschreibung

Die schreibgeschützte Eigenschaft name eines Attr-Knotens gibt den qualifizierten Namen des Attributs zurück. Hat das Attribut ein Namensraum-Präfix, lautet der Name präfix:lokalerName, zum Beispiel xlink:href oder xml:lang. Ohne Präfix sind name und localName gleich.

Gebraucht wird name vor allem, wenn man über element.attributes (eine NamedNodeMap) läuft, um alle Attribute eines Elements auszulesen, zu kopieren oder zu protokollieren. Das ist nützlich für Serialisierung, Debugging, das Klonen von Attributen auf ein anderes Element oder das Filtern von data-*- und aria-*-Attributen.

Bei HTML-Elementen in einem HTML-Dokument schreibt der Parser Attributnamen immer klein. name liefert deshalb z. B. onclick, auch wenn im Markup onClick steht. In SVG, MathML und XML-Dokumenten bleibt die Groß- und Kleinschreibung erhalten (z. B. viewBox).

Umbenennen lässt sich ein Attribut nicht. Dafür legt man ein neues Attribut an, zum Beispiel mit setAttribute(), und entfernt das alte mit removeAttribute().

Rückgabewert

Typ

string

Beschreibung

Der qualifizierte Name des Attributs, also präfix:lokalerName oder nur lokalerName, wenn es kein Präfix gibt.

Beispiele

Alle Attribute eines Elements auflisten

const link = document.createElement('a');
link.setAttribute('href', '/kontakt');
link.setAttribute('data-track', 'nav');
link.setAttribute('Title', 'Kontakt');

for (const attr of link.attributes) {
  console.log(`${attr.name} = ${attr.value}`);
}

href = /kontakt data-track = nav title = Kontakt

Qualifizierter Name bei Namensraum-Attributen (SVG)

const SVG_NS = 'http://www.w3.org/2000/svg';
const XLINK_NS = 'http://www.w3.org/1999/xlink';

const use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(XLINK_NS, 'xlink:href', '#icon-stern');

const attr = use.attributes[0];
console.log(attr.name);         // qualifizierter Name
console.log(attr.localName);    // ohne Präfix
console.log(attr.prefix);
console.log(attr.namespaceURI);

xlink:href href xlink http://www.w3.org/1999/xlink

data-Attribute von einem Element auf ein anderes kopieren

const quelle = document.createElement('div');
quelle.dataset.userId = '42';
quelle.dataset.rolle = 'admin';
quelle.className = 'karte';

const ziel = document.createElement('section');

// Nur data-* übernehmen
for (const { name, value } of quelle.attributes) {
  if (name.startsWith('data-')) {
    ziel.setAttribute(name, value);
  }
}

console.log(ziel.outerHTML);

Schreibversuch wird ignoriert

const el = document.createElement('input');
el.setAttribute('placeholder', 'Suche');
const attr = el.getAttributeNode('placeholder');

attr.name = 'title'; // kein Effekt, name hat keinen Setter
console.log(attr.name);

placeholder

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an attr.name wird im nicht-strikten Modus stillschweigend ignoriert. Im Strict Mode (z. B. in ES-Modulen) wirft sie einen TypeError, weil es nur einen Getter gibt.
Groß- und Kleinschreibung: Bei HTML-Elementen stehen Attributnamen immer in Kleinbuchstaben. Bei SVG und XML bleibt die ursprüngliche Schreibweise erhalten. Namen besser nicht mit === gegen gemischte Schreibweisen prüfen, ohne das zu berücksichtigen.
name und localName: Für Vergleiche mit Namensraum lieber localName zusammen mit namespaceURI verwenden. Das Präfix ist frei wählbar und daher kein verlässliches Merkmal.
Veraltet: Attr.nodeName liefert denselben Wert. Im Code sollte man name verwenden, das ist eindeutiger.
Browser-Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt. Früher stammte Attr von Node ab und hatte Kindknoten. Seit DOM4 ist das vereinfacht, an name ändert das aber nichts.

Siehe auch

Attr Attr.prefix Attr.value Element.attributes Attr.localName