javascript - 挣扎于 classList.add 和 getElementsByClassName

Question

这个问题在这里已经有了答案:





What do querySelectorAll and getElementsBy* methods return?

(12 个回答)


8年前关闭。




我正在尝试为具有特定类(输入字段集)的某些元素添加一个额外的类。

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

我究竟做错了什么？

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 .