Добавить Удалить класс в элемент DOM, используя только JavaScript, и лучший из этих двух способов

Что такое хороший подход к добавлению класса в элемент DOM с использованием JavaScript. И удалить также.

Я натолкнулся на следующие коды для добавления:

1:

Element.prototype.addClassName = function (cls) {
    if (!this.hasClassName(cls)) {
        this.className = [this.className, cls].join(" ");
    }
};

2:

document.querySelector(element).classList.add(cls)

Оба они работают для меня. Какая разница между ними и какая из них лучше?

ОТВЕТЫ

Ответ 1

1. Если вы перемещены с помощью слова прототипа, вы можете проверить MDN Docs - Наследование и цепочка прототипов.

2. Первый код, который вы упомянули, является обычным кросс-браузерным способом добавления класса в элемент.
Вместо того, чтобы быть объявлением функции, он добавлен как метод к прототипу Элемент, так что, когда вы запрашиваете элемент через его id (хороший ol JavaScript) вы можете просто вызвать метод на самом элементе.

3. Второй код, который вы опубликовали, соответствует новой спецификации DOM. W3 Link. Он будет работать только в тех браузерах, которые реализуют DOM Level 4 Specs. Он не будет работать в старых браузерах.

Это имеет значение.

Для лучшего метода собственный метод всегда является лучшим и быстрым.
Итак, для браузеров, поддерживающих clasList, второй должен быть лучшим. Однако, по моему мнению, до тех пор, пока события (черновики) не будут завершены, вы можете рассмотреть метод, который работает кросс-браузер и совместим как с JavaScript (ECMA-3), так и с поддержкой DOM Spec.

Простейшей идеей должно быть изменение свойства className, доступного во всех новых и старых браузерах, и добавление к нему class в виде строки:

var el = document.getElementById(id);
el.className = el.className + " " + cls; 
// mind the space while concatening

Конечно, вы можете добавить методы проверки, такие как использование regex для обрезки пробелов при добавлении и удалении.

Кстати, я получил полную часть кода, который вы отправили в качестве первого примера:

Element.prototype.hasClassName = function(name) {
    return new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)").test(this.className);
};

Element.prototype.addClassName = function(name) {
    if (!this.hasClassName(name)) {
        this.className = this.className ? [this.className, name].join(' ') : name;
    }
};

Element.prototype.removeClassName = function(name) {
    if (this.hasClassName(name)) {
        var c = this.className;
        this.className = c.replace(new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)", "g"), "");
    }
};

Ответ 2

Это код jquery.

Адаптированные версии jQuery addClass
И jQuery removeClass

Если вы посмотрите на исходный код jQuery, вот как они это делают. Это адаптировано из них, но в значительной степени полностью написано jQuery и является их кодом. Я не являюсь оригинальным автором и просто показываю, как одна часть может использоваться вместо всей библиотеки.

jQuery addClass:

//This code is jQuery's
function AddClassToElement(elem,value){
 var rspaces = /\s+/;
 var classNames = (value || "").split( rspaces );
 var className = " " + elem.className + " ",
 setClass = elem.className;
 for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
  if ( className.indexOf( " " + classNames[c] + " " ) < 0 ) {
   setClass += " " + classNames[c];
  }
 }
 elem.className = setClass.replace(/^\s+|\s+$/g,'');//trim
}

jQuery removeClass:

//This code is jQuery's
function RemoveClassFromElement(elem,value){
 var rspaces = /\s+/;
 var rclass = /[\n\t]/g
 var classNames = (value || "").split( rspaces );
 var className = (" " + elem.className + " ").replace(rclass, " ");
 for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
  className = className.replace(" " + classNames[c] + " ", " ");
 }
 elem.className = className.replace(/^\s+|\s+$/g,'');//trim
}

Вот рабочая скрипка: http://jsfiddle.net/C5dvL/