for/in 语句和常规 for 语句有什么区别？- 他们不一样

Question

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons

在我上面链接的页面上，左侧有一个侧边栏。

有一些下拉列表要求用户单击每个下拉列表才能看到子列表。

我正在尝试编写一个代码，以便它单击所有可切换列表以取消隐藏子列表。

在父元素上使用click()没有任何作用，我尝试了父元素的所有子元素和子元素，发现这有效：

x=document.querySelectorAll(".toggle").children[0].children[1];

所以我尝试编写一个对所有孩子都click()的代码，我写了这个并且它有效：

x=document.querySelectorAll(".toggle");
for(i=0;i<x.length;i++){
x[i].click();
y=x[i].children;
for (j=0;j<y.length;j++){
y[j].click();
z=y[j].children;
for(k=0;k<z.length;k++){
z[k].click();
}
}
}

由于我是一个新的JS学习者，我尝试使用for/in语句，但它不起作用：

x=document.querySelectorAll(".toggle");
for(i in x){
x[i].click();
y=x[i].children;
for (j in y){
y[j].click();
z=y[j].children;
for(k in z){
z[k].click();
}
}
}

Uncaught TypeError: z[k].click is not a function
at <anonymous>:9:9

我也尝试了每种方法，这也不起作用：

x=document.querySelectorAll(".toggle");
var y; var z;
x.forEach(i);
function i(item, index){
item.click();
y=item.children;
y.forEach(j);
}
function j(item,index){
item.click();
z=item.children;
z.forEach(k);
}
function k(item,index){
item.click();
}

Uncaught TypeError: y.forEach is not a function
at i (<anonymous>:7:4)
at NodeList.forEach (<anonymous>)
at <anonymous>:3:3

Answer 1

正如您已经通过子属性弄清楚的那样，事件侦听器在li.toggle > details > summary上，因此您必须触发对该元素的单击。最简单的方法是：

var x = document.querySelectorAll('li.toggle details summary');
for(var i=0; i < x.length; i++) {
x[i].click();
}

您可以看到此代码触发了侧边栏中每个元素的单击事件，因此不仅关闭打开的元素，而且还打开关闭的元素。但是，当您打开菜单时，您可以看到<details>元素获得open属性，因此它变得<details open>.如果仅定位这些元素，则会获得所需的结果：

var x = document.querySelectorAll('li.toggle details[open] summary');
for(var i=0; i < x.length; i++) {
x[i].click();
}

Answer 2

参考这个。 对于循环和 HTML 集合元素。

您不应该在 html 集合中使用 in。同样，在您的第一个函数中，您正在尝试在长度为 1 的 html 集合上运行 forEach，而不是在您抓取的每个项目上运行。

如果你想使用 for of 而不是常规的 for 循环，只需调整 frzsombor 写的内容，如下所示：

var x = document.querySelectorAll('li.toggle details summary');
for(let element of x) {
element.click();
}