DOMTokenList.toString() — Methode · JavaScript-Referenz

Signatur

DOMTokenList.prototype.toString()

Beschreibung

toString() ist der sogenannte Stringifier von DOMTokenList. Die Methode liefert den Wert des Attributs, auf dem die Liste beruht, als String – bei element.classList also den Inhalt des class-Attributs, bei relList den Inhalt von rel, bei sandbox den von sandbox.

Laut Spezifikation entspricht toString() genau dem Getter von DOMTokenList.value. Deshalb wird die Methode auch automatisch aufgerufen, wenn eine DOMTokenList in einen String umgewandelt wird, etwa in Template-Literalen, bei der Verkettung mit + oder bei String(list).

Wichtig: Der zurückgegebene String ist nicht normalisiert. Er enthält den Attributwert unverändert, also auch doppelte Token und überzählige Leerzeichen. Erst wenn die Liste über add(), remove(), toggle() oder replace() verändert wird, schreibt der Browser das Attribut neu. Dabei entfernt er Duplikate und trennt die Token durch genau ein Leerzeichen.

Brauchst du eine bereinigte Liste der Token, nimm lieber [...list] oder Array.from(list) und verbinde sie bei Bedarf mit join(" ").

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des zugrunde liegenden Attributs, unverändert übernommen. Fehlt das Attribut, ist das Ergebnis ein leerer String "".

Beispiele

Klassen eines Elements als String auslesen

const box = document.createElement("div");
box.className = "card card--active shadow";

console.log(box.classList.toString());
console.log(box.classList.toString() === box.classList.value);

card card--active shadow true

Automatische Umwandlung in Template-Literalen

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

// toString() wird implizit aufgerufen
console.log(`Aktuelle Klassen: ${button.classList}`);
console.log("Als String: " + button.classList);

Aktuelle Klassen: btn btn-primary Als String: btn btn-primary

Rohwert und Normalisierung nach einer Änderung

const el = document.createElement("span");
el.setAttribute("class", "  a   b a  ");

// Rohwert inklusive Leerzeichen und Duplikat
console.log(JSON.stringify(el.classList.toString()));

// Bereinigte Token ohne Änderung am Attribut
console.log([...el.classList].join(" "));

// Änderung löst Neuschreiben des Attributs aus
el.classList.add("c");
console.log(JSON.stringify(el.classList.toString()));

" a b a " a b "a b c"

Klassen vor und nach einer UI-Aktion protokollieren

const nav = document.createElement("nav");
nav.className = "menu";

const logClasses = (label) => console.log(`${label}: "${nav.classList.toString()}"`);

logClasses("vorher");
nav.classList.toggle("menu--open");
logClasses("nachher");

vorher: "menu" nachher: "menu menu--open"

// Wichtig · Fallstricke

Keine Normalisierung: toString() gibt den Attributwert unverändert zurück, also auch mit Duplikaten und zusätzlichen Leerzeichen. Für einen bereinigten Vergleich nimm [...list].join(" ") oder prüfe einzelne Token mit contains().
Nicht für Klassenprüfungen: Abfragen wie list.toString().includes("active") sind fehleranfällig, weil sie auch bei "inactive" anschlagen. Besser: list.contains("active").
Nur lesend: Im Gegensatz zu value kann man über toString() nichts setzen. Zum Überschreiben der ganzen Liste dient list.value = "…" oder element.className.
Fehlendes Attribut: Ohne Attribut gibt die Methode "" zurück, nicht null. getAttribute("class") liefert in diesem Fall dagegen null.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Sehr alte Browser (z. B. der Internet Explorer) kennen DOMTokenList nur eingeschränkt oder bei SVG-Elementen gar nicht.

Siehe auch

DOMTokenList DOMTokenList.value DOMTokenList.contains() DOMTokenList.add() Element.classList Element.className Selection.toString()