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

但它不起作用,我收到错误:

未捕获的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);
}

这是一个可以玩的小提琴.