javascript - 在javascript中通过ID选择UL

Question

我正在做 treehouse JavaScript track，并给出了一个我无法弄清楚如何通过的目标。我不明白为什么我编写的代码不起作用。

目标:在 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: 'undefined' 不是一个对象(评估 'listItems[i].style')

特别提示:不能是jquery，必须是javascript。

Answer 1

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

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

说明

传递给 querySelectorAll 方法的选择器与您编写 CSS 选择器的方式相匹配:您正在收集与该选择器匹配的所有元素，并且仅该选择器。选择器 #rainbow li 也可能有点贪心，因为它会选择 后代 的所有 li >#rainbow 元素，而不仅仅是 children。只选择你可以写的 child :

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

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

如果 querySelectorAll 返回您未明确要求的元素，我会说这是一个错误的方法。