Javascript 将getElementById更改为GetElementsByCassName会中断代码

所以我有了这个工作代码

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>

<button id="expand" onclick="openAll()">Expand All +</button>

var elems = document.getElementsByTagName("details");

function openAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].setAttribute("open", "true");
  }
  document.getElementById("expand").setAttribute( "onClick", "javascript: closeAll();" );
  document.getElementById("expand").innerHTML = "Collapse All -";
}

function closeAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].removeAttribute("open");
  }
  document.getElementById("expand").setAttribute( "onClick", "javascript: openAll();" );
  document.getElementById("expand").innerHTML = "Expand All +";
}

在第一次单击时，代码将全部展开，但不会更改文本，也不会折叠。我缺少什么？

getElementsByCassName方法返回元素的集合，因此需要一个循环来与每个元素交互

var exp = document.getElementsByClassName("expand");
for (var i = 0; i < exp.length; i++) {
  exp[i].setAttribute( "onClick", "javascript: closeAll();" );
  exp[i].innerHTML = "Collapse All -";
}

---

另一个问题是for循环，迭代时使用：for var i=4；我在一定程度上误解了这个问题： 使用getElementById，您可以获得对HtmleElement->ID的引用必须是唯一的，因此您可以获得一个元素

id属性指定其元素的唯一标识符id。该值在元素的主子树中的所有id中必须是唯一的，并且必须至少包含一个字符。该值不能包含任何空格字符

getElementById

通过元素的ID返回对元素的引用；ID是一个字符串，可用于标识元素；可以使用HTML中的id属性或脚本来建立它

getElementsByClassName

返回具有所有属性的所有子元素的类似数组的对象 给定的类名。在文档对象上调用时 搜索完整文档，包括根节点。你也可以 对任何元素调用getElementsByClassName；它只会回来 元素，这些元素是具有 给定类名

由于有2个元素具有类expand，因此必须使用for来迭代此数组

Cheerio:

您的for循环将遍历31-4=27次，即使您只有两个细节标记。getElementsByClassName返回集合。如果要处理集合中的项，必须使用索引。 请尝试以下代码：

var elems=document.getElementsByTagNamedetails； 函数openAll{ 对于变量i=0；i对于var i=0；i document.getElementsByTagNamedetails中的详细信息是什么；它是HTML5中的标记在html中没有标记“详细信息”中的此类元素。尝试用上述结果替换两个document.getElementsByClassName行…相同的结果。尝试将函数直接分配给属性也是不可能的。请确保检查t中的错误他是开发人员控制台。

var exp = document.getElementsByClassName("expand");
for (var i = 0; i < exp.length; i++) {
  exp[i].setAttribute( "onClick", "javascript: closeAll();" );
  exp[i].innerHTML = "Collapse All -";
}

  exp[i].onclick = closeAll; // No parentheses!