Question

我正在进行树屋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];    
}`

在index.html内，我们所指的行如下。

<ul id="rainbow">

所以我认为我应该能够做到这一点：

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

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

TypeError：＆＃39; undefined＆＃39;不是一个对象（评估＆＃39; listItems [i] .style＆＃39;）

特别说明：这不能是jquery必须是javascript。

Answer 1

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

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

解释

传递给querySelectorAll方法的选择器与编写CSS选择器的方式相匹配：您正在收集与该选择器匹配的所有元素，而仅该选择器。选择器#rainbow li也可能有点贪婪，因为它会选择li元素的后代的所有#rainbow，而不仅仅是的的子即可。要只选择你能写的孩子：

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

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

如果querySelectorAll给出了你没有明确要求的元素，我会说这是一个破碎的方法。

Answer 2

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

在javascript中按ID选择UL

2 个答案:

解释