Javascript 如何编辑儿童div？

我有这个HTML代码（我想要编辑它的变量的组件的数量，可以是3或20）

我在我的网站上创建了一个类似场景的小示例

正如您所看到的，我的脚本能够编辑父div并添加类名。第一个孩子也一样

我想编辑firstchild中的所有div，但不是立即div，它必须是两个

你知道为什么我的代码在最后一部分不起作用吗？ 谢谢

//工作正常
var firstc=document.getElementById（'father'）；
firstc.classList.add（“父类”）；
firstc.children[0]。children[0]。children[0]。setAttribute（“id”，“firstchild”）；//行吗
var second=document.getElementById（'firstchild'）；
classList.add（“子类”）；
//不起作用
var孙子=秒。子项[0]。子项[0]。子项[0]；
for（设z=0；z

一,
二,
三,

代码中的问题是最后一个

子项[0]

。您只选择了第一个div，它不是数组。修好那条线，一切都会好起来的

var孙子女=second.children[0]。children[0]。children；

作为旁注：如果出于某种原因，第一个或第二个

.children[0]

未定义，则会出现错误。 更好的方法是使用

querySelectorAll

返回数组； 如果您的数组为空，则不会发生任何事情

second.querySelectorAll（'#firstchild>div>div>div'）
.forEach（el=>el.classList.add（'slide'））

您不需要一些ULs吗？LIs本身就是嘿，添加它只是为了能够右键单击inspect并查看类名。@hashw好吧，不要。LI不是

的有效后代，您只能在浏览器上进行解释，这可能会导致意外行为。