hasClass(), addClass(), removeClass(), toggleClass() - pure JavaScript

Само собой, подобных решений представлено огромное количество, но подумал, что надо бы начать наконец заполнять гитхаб. Пусть лежит.

Достаточно подключить xDom.min.js к Вашей странице:

<script src="/path/to/xDom.min.js"></script>

• addClass()
• removeClass()
• toggleClass()
• hasClass()

Добавление класса выбранным элементам. Если какие-то из элементов уже имеют некий класс, то новый добавится.

xDom.addClass( "[селектор]", "[класс]" );

Например, Добавим ко всем элементам списка, в блоке с id="content", класс red:

xDom.addClass( "#content ul li", "red" );

// или только к первому элементу списка

xDom.addClass( "#content ul li:first-child", "red" );

...

В качестве селектора может выступать всё, что привычно использовать в .addClass() представленном в jQuery.

Удаляет заданный класс у найденных элементов на странице.

xDom.removeClass( "[селектор]", "[класс]" );

Например, удалим класс red у первого элемента списка:

xDom.addClass( "#content ul li:first-child", "red" );

Добавляет или удаляет заданный класс. Если класс у найденного элемента есть, то соответсвенно удаляет его, в противном случаи - добавляет.

xDom.toggleClass( "[селектор]", "[класс]" );

Например:

xDom.toggleClass( "#content ul li", "red" );

Проверяет наличие класса у найденных элементов на странице.

xDom.hasClass( "[селектор]", "[класс]", function() { /* true callback */ } );

В случаи наличия у найденного элемента требуемого класса, можно совершить некие действия. Например

xDom.hasClass( "#content ul li", "green", function() {
	console.log( "Есть такой класс" );
});

Конечно, имеются существенные отличия от одноимённых методов из jQuery. Решение писалось ради развития/обучения, но думаю добавлю недостающие возможности со временем.