Attr — Schnittstelle · JavaScript-Referenz

Signatur

interface Attr extends Node

Beschreibung

Ein Attr-Objekt steht für genau ein Attribut eines Elements, etwa class="aktiv" oder data-id="42". Solche Objekte bekommst du meist über element.attributes (eine NamedNodeMap), über element.getAttributeNode() oder du erzeugst sie selbst mit document.createAttribute().

Die wichtigsten Eigenschaften sind:

name: der qualifizierte Name des Attributs (nur lesbar)
value: der Wert als Zeichenkette (lesbar und schreibbar)
ownerElement: das Element, zu dem das Attribut gehört, oder null
localName, prefix, namespaceURI: Angaben zum Namensraum, wichtig bei SVG und XML
specified: liefert aus Kompatibilitätsgründen immer true

Im Alltag reichen fast immer getAttribute(), setAttribute() und dataset. Attr brauchst du vor allem, wenn du alle Attribute eines Elements durchlaufen willst (zum Beispiel zum Klonen, Serialisieren oder Bereinigen), wenn du mit Namensräumen arbeitest oder wenn ein MutationObserver Änderungen an Attributen auswerten soll.

Attr erbt zwar von Node, ist aber seit DOM4 kein Kindknoten im DOM-Baum mehr: parentNode ist null, und childNodes ist leer. Das zugehörige Element findest du nur über ownerElement.

Rückgabewert

Typ

Attr

Beschreibung

Instanzen entstehen über document.createAttribute(name), document.createAttributeNS(ns, qname), element.getAttributeNode(name) oder element.attributes. Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Attribut erzeugen und an ein Element hängen

const button = document.createElement('button');

// Attr-Objekt erzeugen und Wert setzen
const attr = document.createAttribute('aria-label');
attr.value = 'Menü öffnen';

console.log(attr.ownerElement); // noch keinem Element zugeordnet

button.setAttributeNode(attr);
console.log(attr.ownerElement === button);
console.log(button.outerHTML);

null true <button aria-label="Menü öffnen"></button>

Alle Attribute eines Elements auflisten

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

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

href = /kontakt class = nav-link data-track = footer

Attribute bereinigen: Event-Handler-Attribute entfernen

const container = document.createElement('div');
container.innerHTML = '<img src="bild.png" onerror="alert(1)" alt="Logo">';
const img = container.firstElementChild;

// Kopie anlegen, weil die NamedNodeMap sich beim Entfernen live ändert
[...img.attributes]
  .filter((attr) => attr.name.startsWith('on'))
  .forEach((attr) => img.removeAttributeNode(attr));

console.log(img.outerHTML);

Wert über getAttributeNode ändern

const input = document.createElement('input');
input.setAttribute('placeholder', 'Name');

const node = input.getAttributeNode('placeholder');
node.value = 'Vor- und Nachname';

console.log(input.getAttribute('placeholder'));
console.log(node.name, node.localName, node.namespaceURI);

Vor- und Nachname placeholder placeholder null

// Wichtig · Fallstricke

Live-Sammlung: element.attributes ist eine live aktualisierte NamedNodeMap. Wenn du in einer Schleife Attribute entfernst, werden Einträge übersprungen. Lege vorher mit [...el.attributes] eine Kopie an.
Kein Kindknoten: Seit DOM4 gehört Attr nicht mehr zum Baum. parentNode, firstChild und ähnliche Eigenschaften liefern null. Veraltete Eigenschaften wie nodeValue und textContent spiegeln zwar weiterhin value, nutze aber direkt value.
Nur ein Element pro Attribut: Ein Attr, das schon einem Element gehört, lässt sich nicht an ein zweites hängen. setAttributeNode() wirft dann einen InUseAttributeError. Nimm stattdessen attr.cloneNode().
Attribut ist nicht Eigenschaft: attr.value ist immer eine Zeichenkette und zeigt den Wert aus dem Markup. Bei value oder checked von Formularfeldern weicht er vom aktuellen Zustand der DOM-Eigenschaft ab.
Groß- und Kleinschreibung: In HTML-Dokumenten werden Attributnamen in Kleinbuchstaben umgewandelt, in XML und SVG bleibt die Schreibweise erhalten (zum Beispiel viewBox).
Sicherheit: Wenn du Werte in Attribute wie href, src oder on* schreibst, kann das zu XSS führen (etwa über javascript:-URLs). Fremde Eingaben musst du prüfen. Für echtes Bereinigen von HTML verwende eine geprüfte Bibliothek wie DOMPurify oder, wo verfügbar, die Sanitizer-API.
Kompatibilität: Das Interface wird von allen Browsern unterstützt. ownerElement, localName und die Namensraum-Eigenschaften funktionieren in allen modernen Browsern, ältere Engines haben sie teils uneinheitlich umgesetzt.

Siehe auch

Element Element.attributes Node Blob CSS