javascript - setAttribute() 不工作

Question

同样，我在使用 setAttribute 时遵循我的引用书和在线引用:它根本不起作用；

HTML:

    <div id="page">
        <h1 id="header"></h1>
        <h2 id="subheader"></h2>
        <p id="pone"></p>
        <ul >
            <li id="one" class="lit" >ad nauseum</li>
            <li id="two" class="lit">ad item</li>
            <li id="three" class="lit">ad item</li>
            <li id="four" class="lit">ad item</li>
         </ul>
      </div>
      <script src="js/DOM_js.js"></script>

CSS:

  .lit { font-size: 14px;}
  .lite { font-size: 20px; font-style:italic;}   

js:

// Change class names of li
var alli = document.getElementsByTagName("li");
alert(alli.length);

// li one 
 var lione = document.getElementById("one"); 
lione.textContent = "First point: ";
 // Ask for first point
 var fpOne = prompt("What is your first point?");
//change li one text
lione.textContent += fpOne;
alli.setAttribute("class","lite");

即使我将这一行放在 alert() 之后，set 属性也不起作用:此时提示不起作用。我什至尝试过:

var alli = document.getElementsByTagName("li").setAttribute("class","lite");
alert(alli.length);

此时什么都不起作用。
我什至尝试按照类似的 stackoverflow 问题中的建议删除 li 标签的原始类属性，但都无济于事。

什么是正确的 setAttribute 技术？

Answer 1

getElementsByTagName 返回一个数组。您需要遍历数组

var alli = document.getElementsByTagName("li");
for (var i = 0; i < alli.length; i++) {
  alli[i].setAttribute("class", "lite");
}