Element.attributes — Eigenschaft · JavaScript-Referenz

Signatur

get Element.attributes

Beschreibung

Die schreibgeschützte Eigenschaft Element.attributes gibt eine NamedNodeMap zurück, die alle Attribute des Elements als Attr-Objekte enthält. Jedes Attr hat unter anderem die Eigenschaften name, value, localName, namespaceURI und ownerElement.

Die Sammlung ist live: Wird ein Attribut per setAttribute() oder removeAttribute() geändert, spiegelt sich das sofort in der bereits abgerufenen NamedNodeMap wider. Die Eigenschaft selbst ist zwar schreibgeschützt, die enthaltenen Attribute lassen sich aber über attr.value oder Methoden wie removeNamedItem() verändern.

Typische Einsatzzwecke sind das Auflisten oder Kopieren aller Attribute (z. B. beim Klonen oder Umbauen von Elementen), Debugging, Sanitizer-Logik oder das generische Auslesen unbekannter data-*- und aria-*-Attribute. Wenn Sie nur die Namen benötigen, ist Element.getAttributeNames() meist einfacher; für einzelne Werte genügen getAttribute() bzw. hasAttribute().

Die Reihenfolge der Einträge ist nicht verbindlich spezifiziert – in der Praxis entspricht sie meist der Reihenfolge im Quelltext bzw. des Hinzufügens, darauf sollten Sie sich aber nicht verlassen.

Rückgabewert

Typ

NamedNodeMap

Beschreibung

Eine live aktualisierte, array-ähnliche Sammlung von Attr-Objekten. Zugriff per Index (attributes[0]), per Name (attributes.getNamedItem('id') bzw. attributes['id']) und über length. Die Sammlung ist iterierbar (for...of).

Beispiele

Alle Attribute eines Elements auflisten

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

for (const attr of link.attributes) {
  console.log(`${attr.name} = "${attr.value}"`);
}
console.log('Anzahl:', link.attributes.length);

href = "/kontakt" class = "btn" data-track = "nav" Anzahl: 3

Attribute als einfaches Objekt auslesen

const input = document.createElement('input');
input.setAttribute('type', 'email');
input.setAttribute('name', 'mail');
input.setAttribute('required', '');

const attrsToObject = (el) =>
  Object.fromEntries(Array.from(el.attributes, ({ name, value }) => [name, value]));

console.log(attrsToObject(input));

{ type: "email", name: "mail", required: "" }

Attribute auf ein neues Element übertragen (Tag umbenennen)

const div = document.createElement('div');
div.id = 'hinweis';
div.className = 'box warn';
div.setAttribute('role', 'note');
div.textContent = 'Achtung!';

const section = document.createElement('section');
for (const { name, value } of div.attributes) {
  section.setAttribute(name, value);
}
section.append(...div.childNodes);

console.log(section.outerHTML);

<section id="hinweis" class="box warn" role="note">Achtung!</section>

Live-Verhalten und sicheres Entfernen aller data-Attribute

const el = document.createElement('span');
el.setAttribute('data-a', '1');
el.setAttribute('data-b', '2');
el.setAttribute('title', 'Info');

const attrs = el.attributes;
console.log(attrs.length); // 3

// Erst in ein Array kopieren, da die Sammlung live ist
[...attrs]
  .filter((a) => a.name.startsWith('data-'))
  .forEach((a) => el.removeAttribute(a.name));

console.log(attrs.length, el.outerHTML);

3 1 <span title="Info"></span>

// Wichtig · Fallstricke

Live-Sammlung: Wer beim Durchlaufen per Index Attribute entfernt, überspringt Einträge, weil sich Indizes verschieben. Vorher mit [...el.attributes] oder Array.from() kopieren oder rückwärts iterieren.
NamedNodeMap ist kein Array: map(), filter() usw. fehlen. for...of und Array.from() funktionieren in allen modernen Browsern.
Der Zugriff per Name (attributes.id oder attributes['data-x']) funktioniert, kann aber mit Eigenschaften der NamedNodeMap (z. B. length, item) kollidieren – sicherer ist getNamedItem().
Die Reihenfolge der Attribute ist nicht garantiert.
Attribute sind nicht dasselbe wie DOM-Eigenschaften: input.value nach einer Benutzereingabe unterscheidet sich vom Attribut value in attributes.
Sicherheit: Beim Kopieren von Attributen aus fremdem Markup werden auch Event-Handler-Attribute wie onclick oder href="javascript:…" übertragen – bei nicht vertrauenswürdigen Inhalten filtern (XSS-Gefahr).
Kompatibilität: in allen Browsern verfügbar; Attr erbt seit DOM4 nicht mehr sinnvoll von Node-Kindknoten-Logik – ältere Muster wie attr.nodeValue besser durch attr.value ersetzen.

Siehe auch

Attr Element.ariaBusy Element.ariaLabel Element.ariaLevel Element.ariaLive