Klare Element.ClassList

Question

element.classList ist von DOMTokenList Typ.

Gibt es eine Methode, um diese Liste zu löschen?

Answer 1

Mir ist keine "Methode" im Sinne einer "Funktion" im Zusammenhang mit classList bekannt. Es hat .add() und .remove() Methoden einzelne Klassen hinzuzufügen oder zu entfernen, aber Sie können im Sinne der Beseitigung aller Klassen aus dem Elemente wie folgt die Liste löschen:

element.className = ""; 

Answer 2

Ich empfehle, nicht mit className als classList führen könnte in schnellen DOM-Aktualisierungen

remove() Die Methode der DOMTokenList (was classList ist) können mehrere Argumente - jeweils eine Kette von einem Klassennamen entfernen (reference). Zuerst müssen Sie die classList in ein Plan-Array von Klassennamen konvertieren. Einige Leute verwenden Array.prototype.slice(), um das zu tun, aber ich bin kein Fan und ich glaube, eine for-Schleife ist schneller in den meisten Browsern - aber so oder so habe ich nichts gegen für Schleifen und das Stück fühlt sich oft wie ein Hack für mich. Sobald Sie das Array haben, verwenden Sie einfach apply(), um dieses Array als eine Liste von Argumenten zu übergeben.

Ich benutze eine Dienstklasse, die ich schrieb, um dies zu erreichen. Die erste Methode ist die, die Sie suchen, aber ich nehme etwas mehr für Ihre Referenz.

ElementTools.clearClassList = function(elem) { 
    var classList = elem.classList; 
    var classListAsArray = new Array(classList.length); 
    for (var i = 0, len = classList.length; i < len; i++) { 
     classListAsArray[i] = classList[i]; 
    } 
    ElementTools.removeClassList(elem, classListAsArray); 
} 
ElementTools.removeClassList = function(elem, classArray) { 
    var classList = elem.classList; 
    classList.remove.apply(classList, classArray); 
}; 
ElementTools.addClassList = function(elem, newClassArray) { 
    var classList = elem.classList; 
    classList.add.apply(classList, newClassArray); 
}; 
ElementTools.setClassList = function(elem, newClassArray) { 
    ElementTools.clearClassList(elem); 
    ElementTools.addClassList(elem, newClassArray); 
}; 

Bitte beachten Sie, dass ich nicht gründlich dies als das Projekt in allen Browsern auf arbeite ich nur in einer sehr begrenzten Anzahl von modernen Browsern arbeiten muß getestet haben. Aber es sollte arbeiten zurück zu IE10, und wenn Sie eine Shim (https://github.com/eligrey/classList.js) für classList, es sollte Arbeit zurück zu IE7 (und auch mit SVGs seit Eli Grey Shim fügt Unterstützung für SVG in nicht unterstützten Browsern auch).

Ein anderer Ansatz, den ich in Betracht gezogen habe, war, rückwärts durch classList zu gehen und remove() auf classList für jeden Eintrag aufzurufen. (Rückwärts, weil sich die Länge ändert, wenn Sie beide entfernen.) Obwohl dies auch funktionieren sollte, dachte ich, dass die Verwendung mehrerer Argumente auf remove() schneller sein könnte, da moderne Browser dafür optimiert werden können und mehrere Aktualisierungen des DOM bei jedem Aufruf von remove() vermeiden. in einer for-Schleife. Zusätzlich erfordern beide Ansätze eine for-Schleife (entweder um eine Liste zu erstellen oder um jede zu entfernen), so dass ich keinen Nutzen für diesen alternativen Ansatz sah. Aber wieder habe ich nicht irgendwelche Geschwindigkeitstests gemacht.

Wenn jemand die Geschwindigkeiten der verschiedenen Ansätze testet oder eine bessere Lösung hat, bitte posten.

EDIT: Ich habe einen Fehler in der Zwischenscheibe gefunden, die sie hält von richtig Hinzufügen von Unterstützung zu IE11/10 für mehrere Argumente zu add() und remove(). Ich habe eine report auf GitHub eingereicht.

Answer 3

var classList = element.classList; 
while (classList.length > 0) { 
    classList.remove(classList.item(0)); 
}