在javascript中按ID选择UL

我正在做treehouse JavaScript跟踪，并且被赋予了一个我不知道如何通过的目标。我不明白为什么我写的代码不能工作

目标：在app.js的第1行，设置变量listItems以引用集合。集合应包含id为rainbow的无序列表元素中的所有列表项

对于app.js，您将看到：

let listItems;
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
listItems[i].style.color = colors[i];    
}`

但是当我这样做的时候，我得到了错误

TypeError:“undefined”不是对象（正在计算“listItems[i].style]”）

---

特别注意：这不能是jquery，必须是javascript。

颜色数组的元素可能比listItems数组多。因此，当i变量大于listItems数组的大小-1时，您将收到一个TypeError。当然，您必须选择ul内部的项目，而不是ul本身。

\rainbow

指的是无序列表，而不是列表项目本身。您需要更改选择器以包含列表元素：

let listItems = document.querySelectorAll('#rainbow li');

解释 传递给

querySelectorAll

方法的选择器与您编写CSS选择器的方式相匹配：您正在收集与该选择器匹配的所有元素，并且只收集该选择器。选择器

#rainbow li

也可能有点贪婪，因为它将选择

li

的所有

li

都是

#rainbow

元素的后代，而不仅仅是子元素。要仅选择您可以写入的子项，请执行以下操作：

let listItems = document.querySelectorAll('#rainbow > li');

// or, more verbose...
let rainbow = document.querySelectorAll('#rainbow');
let listItems = rainbow.children;

---

如果

querySelectorAll

返回了您没有明确要求的元素，我认为这是一个错误的方法。

您想要的是

中的列表项，而不是
本身
让列表项=文档。querySelectorAll（“#rainbow li”）
或
ol
如果这是用来代替
li
的标签，谢谢@charlietflThanks Chaz，那么选择无序列表不会自动选择ul内部的所有内容？“你能再给我解释一点吗？”罗布哈德森说。我将编辑答案并进行解释。非常好的解释，非常感谢。尚未研究树屋上的儿童/祖先。
let listItems = document.querySelectorAll('#rainbow li');

let listItems = document.querySelectorAll('#rainbow > li');

// or, more verbose...
let rainbow = document.querySelectorAll('#rainbow');
let listItems = rainbow.children;