Очистить элемент .classList

Ответ 1

Я не знаю "метода" в смысле "функции", связанной с classList. Он имеет методы .add() и .remove() для добавления или удаления отдельных классов, но вы можете очистить список в смысле удаления всех классов из этого элемента следующим образом:

element.className = "";

Ответ 2

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

Ответ 3

С ES6 и оператором распространения это просто.

element.classList.remove(...element.classList);

Это распространит элементы списка в качестве аргументов метода удаления.
Поскольку метод classList.remove может принимать много аргументов, все они удаляются, а classList очищается.

Несмотря на то, что он читабелен, он не очень эффективен. @Фредрик Макробонд ответ быстрее.
Посмотреть различные решения и результаты их испытаний на jsperf.

Ответ 4

Я рекомендую не использовать className, поскольку classList может привести к более быстрым обновлениям DOM.

Метод remove() DOMTokenList (который является тем, что classList) может принимать несколько аргументов - каждая строка имени класса для удаления (ссылка). Сначала вам нужно преобразовать classList в массив планов классов. Некоторые люди используют Array.prototype.slice() для этого, но я не поклонник, и я думаю, что цикл for работает быстрее в большинстве браузеров, но в любом случае у меня нет ничего против циклов, и срез часто кажется мне взломанным. Когда у вас есть массив, вы просто используете apply() для передачи этого массива в виде списка аргументов.

Я использую класс утилиты, который я написал, чтобы выполнить это. Первый метод - тот, который вы ищете, но я включаю немного больше для вашей справки.

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);
};

Обратите внимание, что я не полностью тестировал это во всех браузерах, поскольку проект, над которым я работаю, должен работать только в очень ограниченном наборе современных браузеров. Но он должен вернуться к IE10, и если вы включите прокладку (https://github.com/eligrey/classList.js) для classList, она должна вернуться к IE7 (и также с SVG, так как прокладка Eli Grey добавляет поддержку SVG в неподдерживаемые браузеры тоже).

Альтернативный подход, который я рассматривал, состоял в том, чтобы прокручивать назад через classList и вызывать remove() в classList для каждой записи. (В обратном направлении, поскольку длина изменяется при каждом удалении.) Хотя это также должно работать, я решил, что использование нескольких аргументов в remove() может быть быстрее, поскольку современные браузеры могут оптимизировать для него и избегать множественных обновлений в DOM каждый раз, когда я вызываю remove() в цикле for. Кроме того, для обоих подходов требуется цикл for (либо для создания списка, либо для его удаления), поэтому я не видел преимуществ для этого альтернативного подхода. Но опять же, я не делал никаких тестов скорости.

Если кто-то проверяет скорость различных подходов или имеет лучшее решение, отправьте сообщение.

РЕДАКТИРОВАТЬ: я обнаружил ошибку в прокладке, которая мешает ей правильно добавить поддержку IE11/10 для нескольких аргументов в add() и remove(). Я отправил отчет в github.

Ответ 5

Вот еще один способ сделать это:

element.setAttribute("class", "")