使用classList.add和getElementsByClassName存在困难

Question

我正在尝试为一些具有特定类（input-fieldset）的元素添加额外的类。

<fieldset id="pay" class="input-fieldset"></fieldset>
<fieldset id="address" class="input-fieldset"></fieldset>

所以我进行了一些搜索，找到了这个：

var element = document.getElementsByClassName('input-fieldset');
element.classList.add(' input-fieldset-awesome');

我正在尝试添加类input-fieldset-awesome。

但它不起作用，我收到错误消息：

Uncaught TypeError: Cannot read property 'add' of undefined(anonymous function)

我做错了什么？

- aproskam

---

你正在从 getElementsByClassName 获取一个元素数组，尝试仅针对特定元素进行定位。 - Jon Snow

Answer 1

.getElementsByClassName() 返回一个必须迭代的 HTMLCollection（对象数组）。

下面的代码将实现你想要的功能。

// Get desired elements
var element = document.getElementsByClassName('input-fieldset');

// Iterate through the retrieved elements and add the necessary class names.
for(var i = 0; i < element.length; i++)
{
    element[i].classList.add('input-fieldset-awesome');
    console.log(element[i].className);
}

这里有一个可以玩耍的实例链接：点击这里

- James Hill

---

classList，（兼容性）。 - David Thomas

Classlist是一种更加清晰、好用且相对较新的添加类到元素的方式。它不涉及操作className字符串。 - Jon Snow

太棒了，它能正常工作！感谢@JamesHill。 - aproskam

非常感谢，我已经找了一整天了，终于你给了我可用的代码。 - Khalil

删除类的代码是相同的吗？ - Khalil

Answer 2

document.getElementsByClassName 返回一个类数组对象，其中包含所有具有给定类名的子元素。

在您的情况下，您应该像这样修改您的代码。

var element = document.getElementsByClassName('input-fieldset')[0];
element.classList.add(' input-fieldset-awesome');

或者

var elements = document.getElementsByClassName('input-fieldset');
for (var i = 0; i<elements.length; i++) {
   elements[i].classList.add('input-fieldset-awesome');
}

- neformal

Answer 3

getElementsByClassName 返回的是一个 HTMLCollection，该对象没有 classList 属性，因此你需要遍历整个集合。

[].slice.call(document.getElementsByClassName('input-fieldset'))
  .forEach(function(elem) {
      elem.classList.add('cls');
  });

- Ram