在javascript中按ID选择UL答案

【问题标题】：Select UL by ID in javascript在javascript中按ID选择UL
【发布时间】：2017-10-20 20:39:22
【问题描述】：

我正在做树屋 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: 'undefined' 不是一个对象（评估 'listItems[i].style'）

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

【问题讨论】：

您希望 <ul> 中的列表项而不是 <ul> 本身 let listItems = document.querySelectorAll('#rainbow li'); 或 ol 如果这是用于代替 li 的标签
谢谢@charlietfl

标签： javascript css-selectors selectors-api

【解决方案1】：

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

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

说明

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

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

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

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

【讨论】：

感谢 Chaz，所以选择无序列表不会自动选择 ul 中的所有内容？能否请您进一步解释一下。
@RobHudson 当然。我会用解释编辑答案。
很好的解释，非常感谢。尚未在树屋上研究儿童/祖先。

【解决方案2】：

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

【讨论】：