Каков наиболее эффективный метод добавления / удаления классов из элементов DOM с использованием Javascript?

Question

Я перебираю большое количество элементов dom в Javascript, и я хотел бы добавлять / удалять классы по мере необходимости.

Какую наиболее эффективную операцию добавления / удаления классов я могу использовать?

Answer 1

• Строки малого класса: JSPerf .
• Большие строки класса: JSPerf .
• Большие строки класса, повторяющиеся имена классов: JSPerf .

Удалить

Самый быстрый и надежный способ (маленький / средний размер):

var clss = 'classToRemove';
elem.className = (' '+elem.className+' ').split(' ' + clss + ' ').join(' ');

Если вы точно знаете, что строка не содержит несколько вхождений одного и того же имени класса, лучше использовать метод string.replace (любой размер):

var clss = 'classToRemove';
elem.className = (' '+elem.className+' ').replace(' ' + clss + ' ', ' ');

Другие альтернативы:

• Использование RegExp в сочетании с заменой - медленно во всех случаях
• Использование indexOf для поиска позиции и использование конкатенации строк (подстрока) для удаления класса (повторите это в цикле, чтобы удалить все возможные дубликаты).
  Самый медленный для больших строк с повторением , не медленный и не быстрый в других случаях.

Добавить (без сомнения):

var clss = 'classToAdd';
element.className += ' ' + clss;

Answer 2

Где поддерживается, element.classList примерно в 1000 раз быстрее , чем лучшие предложения Rob_W (без поддержки ie8 / 9, хотя существует запасной вариант от Mozilla).

http://jsperf.com/best-way-to-remove-class/6

Тесты Rob_W были ошибочными, потому что они не использовали DOM - просто тестировали производительность различных замен строк (см. Тесты).

Answer 3

Узким местом является извлечение элементов, а не добавление / удаление имен классов.

el.className = "another_class"; //Simple

В зависимости от структуры вашей DOM, вы можете оптимизировать поиск элементов, выполняя следующие действия:

• Получение определенного элемента оболочки через getElementById
• Получение связанных подэлементов с getElementsByTagName или childNodes (в зависимости от того, что больше подходит для ситуации)
• При рекурсивной ссылке сохранение ссылок на элементы доступа

Как правило, инфраструктура будет извлекать элементы намного медленнее, чем ванильный метод Javacript, но если вы сохраните ссылки, выгрузив доступные элементы в локальный массив, разница будет почти незначительной.

---

Редактировать: getElementsByClassName - это еще один способ извлечения элементов, но он пока не так хорошо поддерживается, как описанные выше методы.

Опять же, если бы мы могли видеть ваш код, мы могли бы дать более прямой ответ.

Answer 4

без jQuery:

function addClass(domElement, class) {
    var classes = domElement.getAttribute("className");

    if (!classes.indexOf(class))
        classes += " " + class;

    domElement.setAttribute("className", classes);
}

function removeClass(domElement, class) {
    domElement.setAttribute("className", domElement.getAttribute("className").replace(class, ""));
}