hasClass(), addClass(), removeClass(), toggleClass() - pure JavaScript
Само собой, подобных решений представлено огромное количество, но подумал, что надо бы начать наконец заполнять гитхаб. Пусть лежит.
Достаточно подключить xDom.min.js к Вашей странице:
<script src="/path/to/xDom.min.js"></script>
Добавление класса выбранным элементам. Если какие-то из элементов уже имеют некий класс, то новый добавится.
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. Решение писалось ради развития/обучения, но думаю добавлю недостающие возможности со временем.