Attr.value — Eigenschaft · JavaScript-Referenz

Signatur

Attr.value

Beschreibung

Die Eigenschaft Attr.value enthält den aktuellen Wert eines Attributknotens, immer als string. Sie ist lesbar und schreibbar: Weist man ihr einen neuen Wert zu, wird das zugehörige Attribut am Besitzer-Element (Attr.ownerElement) sofort aktualisiert. Das löst auch MutationObserver-Einträge vom Typ attributes aus.

An Attr-Objekte kommt man typischerweise über element.attributes (eine NamedNodeMap), element.getAttributeNode() oder document.createAttribute(). Besonders nützlich ist value, wenn man alle Attribute eines Elements durchläuft, etwa zum Serialisieren, Kopieren oder Prüfen von Elementen.

Im Alltag ist element.getAttribute(name) bzw. element.setAttribute(name, wert) meist kürzer. Attr.value liefert dasselbe Ergebnis, arbeitet aber direkt auf dem Attributknoten. Wichtig: value spiegelt immer den Attributwert im Markup wider, nicht den aktuellen Zustand der DOM-Eigenschaft. So bleibt z. B. das value-Attribut eines <input> unverändert, wenn der Benutzer etwas eintippt.

Rückgabewert

Typ

string

Beschreibung

Der Attributwert als Zeichenkette. Ein Attribut ohne Wert (z. B. disabled) liefert "". Beim Setzen wird jeder Wert in einen string umgewandelt.

Beispiele

Alle Attribute eines Elements auslesen

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

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

href = /kontakt target = _blank data-track = nav

Wert über den Attributknoten ändern

const img = document.createElement('img');
img.setAttribute('alt', 'Logo');

const altAttr = img.getAttributeNode('alt');
altAttr.value = 'Firmenlogo programmierung.net';

// Die Änderung ist sofort am Element sichtbar
console.log(img.getAttribute('alt'));
console.log(img.outerHTML);

Firmenlogo programmierung.net <img alt="Firmenlogo programmierung.net">

Attribut mit createAttribute erzeugen und anhängen

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

const role = document.createAttribute('role');
role.value = 'alert';
div.setAttributeNode(role);

// Nicht-String-Werte werden umgewandelt
const tab = document.createAttribute('tabindex');
tab.value = 0;
div.setAttributeNode(tab);

console.log(div.outerHTML, typeof tab.value);

<div role="alert" tabindex="0"></div> string

Attribut und DOM-Eigenschaft unterscheiden

const input = document.createElement('input');
input.setAttribute('value', 'Start');

// Simuliert eine Benutzereingabe
input.value = 'Geändert';

const attr = input.getAttributeNode('value');
console.log(attr.value);  // Attribut bleibt unverändert
console.log(input.value); // aktueller Feldinhalt

Start Geändert

// Wichtig · Fallstricke

Attribut oder Eigenschaft: Attr.value liefert den Wert des HTML-Attributs, nicht den aktuellen Zustand von Formularfeldern. Für den aktuellen Inhalt eines Eingabefelds verwendet man HTMLInputElement.value, für Checkboxen checked.
Boolesche Attribute: Bei disabled, hidden usw. zählt nur, ob das Attribut vorhanden ist. attr.value = \"false\" lässt das Element trotzdem deaktiviert. Zum Entfernen dient removeAttribute().
Sicherheit: Werte in Attributen wie href, src oder Event-Handler-Attributen (onclick) nie ungeprüft aus Benutzereingaben setzen. javascript:-URLs oder Handler-Code können zu XSS führen. Wo Trusted Types erzwungen werden, gelten diese Regeln auch für Attr.value.
Node.nodeValue und Node.textContent geben bei Attr-Knoten denselben Wert zurück wie value. value ist jedoch die klarste Schreibweise.
Kompatibilität: Wird von allen modernen Browsern unterstützt. In alten DOM-Versionen war Attr von Node abgeleitet und hatte Kindknoten. Das ist heute nicht mehr so.

Siehe auch

Attr Attr.name Element.attributes Attr.localName Attr.prefix