Select UL 在 javascript 中的 ID

Question

我正在做树屋 JavaScript 赛道，并得到一个 objective，我不知道如何通过。我不明白为什么我编写的代码不起作用。

Objective：在 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

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

Answer 2

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

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

说明

传递给 querySelectorAll 方法的 selector 与您编写 CSS selector 的方式匹配：您正在收集与 selector 和仅 selector。 select 或 #rainbow li 可能也有点贪心，因为它将 select 所有 li 是后代 #rainbow 元素，而不仅仅是 children。对于 select 只有 children 你可以写：

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

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

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

Select UL 在 javascript 中的 ID

Select UL by ID in javascript

javascript

css-selectors

selectors-api

说明