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。这个问题现在有可能duplicates，（另一个one），但没有一个答案说得清楚。

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');
}

Demo

对于旧版浏览器，您可以使用此功能：

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';
    }
}

Demo

使用Mootools：

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

Demo

或者如果您希望按类定位特定目标：

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

Demo

Answer 2

使用一些较新的浏览器对象和方法。

纯JS： 细节：老式的方式，在一个大的循环中迭代的东西比在索引'i'的元素上迭代，这里没有大的科学。有一件事是使用classList对象，这是一种在数组中添加/删除/检查类的智能方法。

var elements = document.querySelectorAll('.even','.odd'),
    i, length;

for(i = 0, length = elements.length; i < length; i++) {
    elements[i].classList.add('cf');
}

纯JS - 2： 详细信息：document.querySelectorAll返回一个类似于数组的对象，可以通过索引访问但没有Array方法。从Array.prototype调用切片会立即返回一个已获取元素的数组（可能是最快的NodeList - ＆gt;数组转换）。您可以在新创建的数组对象上使用.forEach方法。

Array.prototype.slice.call(document.querySelectorAll('.even','.odd'))
 .forEach(function(element) {
    element.classList.add('cf');
});

纯JS - 3： 细节：这与v2非常相似，[].map与Array.prototype.map大致相同，除非您在此处声明一个空数组来调用map方法。它更短但更多（确实更多）内存消耗。 .map方法对数组中的每个元素运行一个函数并返回一个新数组（在函数内部添加return会导致填充返回的值，这里它是未使用的）。

[].map.call(document.querySelectorAll('.even','.odd'), function(element) {
    element.classList.add('cf');
});

选择一个并使用;）

Answer 3

在IE8中支持

querySelectorAll，getElementsByClassName不支持，它不会同时获得两个类。他们都没有在iE7中工作，但谁在乎。

然后，只需迭代并添加到className属性。

var list = document.querySelectorAll(".even, .odd");
for (var i = list.length; i--;) {
    list[i].className = list[i].className + ' cf';
}

FIDDLE

Answer 4

正如其他人提到的那样，您应该使用.querySelectorAll()方法来选择元素。 DOM还提供classList API，支持添加，删除和切换类：

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

一如既往IE9和bellow不支持API，如果你想支持这些浏览器你可以使用垫片，MDN有one。

Answer 5

我知道这已经很老了，但是有什么理由不能简单地做到这一点（除了潜在的浏览器支持问题）？

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

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

在javascript中选择并添加类

5 个答案:

使用普通的javascript：

Demo

Demo

使用Mootools：

Demo

Demo