Question

这应该采用class="one_level"的每个元素，并将其className更改为four_level。但这不会发生。只有这第一个列表项的外观改变了，第二个列表项仍然是相同的。

HTML：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>DOCUMENT OBJECT MODEL</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <ul>
            <li class="one_level" style="background-color:black; color:white; margin:5px; ">ONE</li>
            <li class="one_level" style="background-color:black; color:white; margin:5px ">TWO</li>
            <li class="two_level" style="background-color:orange; color:red; margin:5px">THREE</li>
            <li class="two_level" style="background-color:orange; color:red; margin:5px">FOUR</li>
        </ul>
        <div id="getValues"></div>
        <script src="javascript.js"></script>
    </body>
</html>

CSS：

.four_level{
    border:solid 5px orange;
    -webkit-border-radius:5px 6px;
}
.five_level{
    border:solid 5px pink;
    -webkit-border-radius:5px 6px;
}

JS：

//Get elements for class: one_level
var classOneSet = document.getElementsByClassName("one_level");
var lengthList = classOneSet.length;

//Change appearance
var i;
for (i = 0; i < lengthList; i++){
    classOneSet.item(i).className = "four_level";
}

Answer 1

getElementsByClassName方法返回元素的实时列表。当您更改第一个元素的类时，它将从列表中删除。当您尝试更改第二个元素时，它已移动到列表中的第一个位置，您将无法在第二个位置找到它。如果您要更改两个以上的元素，您会看到它改变了所有其他元素。

如果你向后循环列表它可以工作：

window.onload = function(){

  //Get elements for class: one_level
  var classOneSet = document.getElementsByClassName("one_level");
  var lengthList = classOneSet.length;

  //Change appearance
  var i;
  for (i = lengthList - 1; i >= 0; i--){
    classOneSet.item(i).className = "four_level";
  }

};

.four_level { background: red; }

        <ul>
            <li class="one_level">ONE</li>
            <li class="one_level">TWO</li>
            <li class="two_level">THREE</li>
            <li class="two_level">FOUR</li>
        </ul>

Answer 2

不要使用item，而应将其视为经典数组：

var i;
for (i = 0; i < lengthList; i++){
    classOneSet[i].className = "four_level";
}

NodeList上的“for”循环更改className

2 个答案: