在javascript中更改列表项

Question

我正在尝试更改整个文档中的列表项。我正在使用以下代码，但是我收到了一个错误。我做错了什么？

function changeListItems() {
var listItem = document.getElementsByTagName("ul");
var docItem = listItem.getElementsByTagName("li");
docItem.setAttribute("class", "list-group-item");
};
changeListItems();

Fiddle

Answer 1

因为document.getElementsByTagName()返回具有给定标记名称的元素的HTMLCollection。

你应该循环遍历每个元素并为其添加类。

对于Ex：

var docItem = listItem.getElementsByTagName("li");

for(var i=0; i< docItem.length; i++)
{
  docItem[i].className = "list-group-item"
}

• className

Answer 2

getElementsByTagName返回NodeList，你必须迭代它。

由于您有两个级别的标记，因此您必须编写嵌套循环。但是使用querySelectorAll一次获取所有列表项目更简单。

function changeListItems() {
    var docItem = document.querySelectorAll("ul li");
    for (var i = 0; i < docItem.length; i++) {
        docItem[i].setAttribute("class", "list-group-item");
    }
}