DOMTokenList.value — Eigenschaft · JavaScript-Referenz

Signatur

DOMTokenList.value

Beschreibung

Die Eigenschaft value einer DOMTokenList (z. B. element.classList oder link.relList) liefert den Wert des zugehörigen Attributs als Zeichenkette. Sie ist der Stringifier der Schnittstelle: String(element.classList) und element.classList.toString() geben denselben Wert zurück.

Beim Lesen bekommen Sie den Attributwert genau so, wie er im Attribut steht, also auch mit doppelten Tokens und zusätzlichen Leerzeichen. Das ist etwas anderes als die normalisierte Token-Liste, die Sie beim Durchlaufen der Liste bekommen.

Beim Schreiben wird das zugehörige Attribut (z. B. class) vollständig durch den neuen String ersetzt. Die Liste wird danach aus diesem String neu aufgebaut. Das entspricht in der Wirkung element.className = "…" bzw. element.setAttribute("class", "…").

Nützlich ist value, wenn Sie alle Klassen auf einmal speichern, vergleichen, protokollieren oder wiederherstellen wollen. Für einzelne Änderungen sind add(), remove(), toggle() und replace() besser geeignet.

Parameter

Name	Typ	Default	Beschreibung
$neuerWert	string		Nur beim Setzen: Zeichenkette mit durch Leerzeichen getrennten Tokens. Sie ersetzt den kompletten Attributwert. Werte, die keine Zeichenkette sind, werden in einen String umgewandelt.

Beispiele

Klassen als String auslesen

const box = document.createElement("div");
box.className = "karte  aktiv karte";

console.log(box.classList.value);   // Rohwert des Attributs
console.log(box.classList.length);  // normalisierte Token-Anzahl
console.log([...box.classList]);

karte aktiv karte 2 ["karte", "aktiv"]

Alle Klassen auf einmal ersetzen

const button = document.createElement("button");
button.classList.add("btn", "btn-primary", "loading");

// Kompletten Zustand in einem Schritt setzen
button.classList.value = "btn btn-success";

console.log(button.className);
console.log(button.classList.contains("loading"));

btn btn-success false

Klassenzustand sichern und wiederherstellen

const panel = document.createElement("section");
panel.classList.add("panel", "offen");

// Zustand sichern
const gesichert = panel.classList.value;

// Temporäre Änderungen
panel.classList.remove("offen");
panel.classList.add("highlight", "geschlossen");
console.log(panel.classList.value);

// Ursprünglichen Zustand wiederherstellen
panel.classList.value = gesichert;
console.log(panel.classList.value);

panel highlight geschlossen panel offen

relList eines Links setzen

const link = document.createElement("a");
link.href = "https://example.com";
link.relList.value = "noopener noreferrer";

console.log(link.getAttribute("rel"));
console.log(link.relList.contains("noopener"));

noopener noreferrer true

// Wichtig · Fallstricke

Rohwert statt Normalisierung: Beim Lesen werden doppelte Tokens und zusätzliche Leerzeichen nicht entfernt. Für einen bereinigten String verwenden Sie [...list].join(" ").
Setzen überschreibt alles: Beim Schreiben gehen alle bisherigen Tokens verloren, auch solche, die andere Skripte oder Bibliotheken gesetzt haben. Für gezielte Änderungen verwenden Sie add() oder remove().
Im Gegensatz zu add() löst ein Wert mit Leerzeichen oder ein leerer String hier keinen Fehler aus, weil ganz normal der Attributwert gesetzt wird.
Setzen Sie "", bleibt das Attribut als leeres Attribut stehen (class=""). Um es ganz zu entfernen, verwenden Sie removeAttribute().
Wenn Sie den Wert setzen, reagieren MutationObserver und CSS-Selektoren darauf wie auf jede andere Attributänderung.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome 50+, Firefox 47+, Safari 10+, Edge 17+). Der Internet Explorer kennt value nicht. Dort war className der Ersatz.

Siehe auch

DOMTokenList DOMTokenList.prototype.toString() DOMTokenList.prototype.add() DOMTokenList.prototype.replace() Element.classList Element.className Element.setAttribute()