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。

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

未捕获的TypeError：无法读取未定义（匿名函数）的属性“add”

我做错了什么？

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

此处a working fiddle to play with。

Answer 2

getElementsByClassName返回HTMLCollection，但没有classList属性，您应该遍历该集合。

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

Answer 3

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

与classList.add和getElementsByClassName一起苦苦挣扎

3 个答案: