在javascript中选择并添加类

Question

跨平台如果可能的话,如何在Javascript中选择类(但不是Jquery请-MooTools就好了 - )代码我无法添加ID？具体来说,我想在下面的任何li上添加"cf"类:

HTML

<div class="itemRelated">
  <ul>
<li class="even">
<li class="odd">
<li class="even">

我试图摆弄它,但缺少一些东西:

使用Javascript

 var list, i;
list = document.getElementsByClassName("even, odd");
for (i = 0; i < list.length; ++i) {
    list[index].setAttribute('class', 'cf');
}

的jsfiddle

PS.这个问题有惊人可能重复,(其它一个),但没有一个答案清楚.

Answer 1

使用普通的javascript:

var list;
list = document.querySelectorAll("li.even, li.odd");
for (var i = 0; i < list.length; ++i) {
   list[i].classList.add('cf');
}

演示

对于旧版浏览器,您可以使用:

var list = [];
var elements = document.getElementsByTagName('li');
for (var i = 0; i < elements.length; ++i) {
    if (elements[i].className == "even" || elements[i].className == "odd") {
        list.push(elements[i]);
    };
}
for (var i = 0; i < list.length; ++i) {
    if (list[i].className.split(' ').indexOf('cf') < 0) {
        list[i].className = list[i].className + ' cf';
    }
}

演示

使用Mootools:

$$('.itemRelated li').addClass('cf');

演示

或者如果您想按类别定位:

$$('li.even, li.odd').addClass('cf');

演示

Answer 2

我知道这是旧的，但是有什么理由不简单地这样做（除了潜在的浏览器支持问题）？

document.querySelectorAll("li.even, li.odd").forEach((el) => {
    el.classList.add('cf');
});

支持：https : //caniuse.com/#feat=es5