在javascript中选择并添加类

Question

如果可能的话跨平台，我如何在无法添加 ID 的代码上选择 Javascript 中的类（但不是 Jquery -MooTools 也可以 -）？ 具体来说，我想在下面的任何 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

Answer 3

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

纯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 调用 slice 会立即返回所获取元素的数组（可能是最快的 NodeList -> Array 转换）。您可以在新创建的数组对象上使用

.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 4

IE8 支持

querySelectorAll

，不支持

getElementsByClassName

，IE8 也不能同时获取两个类。它们都不能在 iE7 中工作，但谁在乎呢。

然后只需迭代并添加到

className

属性即可。

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

小提琴

Answer 5

正如其他人提到的选择元素，您应该使用

.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 及以下浏览器不支持 API，如果你想支持这些浏览器，你可以使用 shim，MDN 有 one。

Answer 6

如果你想同时选择不同类的元素，那么最好的选择是querySelectorAll。

querySelectorAll

使用 CSS 选择器来选择元素。当我们通过用逗号分隔它们来将相同的 CSS 属性添加到不同的元素时，我们可以使用它来选择这些元素。

.even, .odd {
    font-weight: bold;
}

类为“偶数”和“奇数”的两个元素都会变为粗体。

let list = document.querySelectorAll('.even, .odd');

现在，两个元素都被选中。

+Point：您应该使用

classList.add()

方法来添加类。

这是给您的完整代码。

let list = document.querySelectorAll('.even, .odd');

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