Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Selecting Multiple Elements

Michael Niers
Michael Niers
7,560 Points

I absolutely don't know how to do this: Complete the code by setting the variable listItems to refer to a collection...

Complete the code by setting the variable listItems to refer to a collection. The collection should contain all list items in the <ul> element with the ID of rainbow.

What do I have to do?

var listItems = documentQuerySelectorAll('li:nth-child()');
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
<!DOCTYPE html>
    <ul id="rainbow">
      <li>This should be red</li>
      <li>This should be orange</li>
      <li>This should be yellow</li>
      <li>This should be green</li>
      <li>This should be blue</li>
      <li>This should be indigo</li>
      <li>This should be violet</li>
    <script src="js/app.js"></script>

5 Answers

Alex Koumparos
Alex Koumparos
Python Development Techdegree Student 36,886 Points

Hi Michael,

We can select an element using code like this (let's imagine that the target element had the ID 'select-me'):

var myElement = document.querySelector('#select-me');

Once we have an element selected, we want to select all its children as a single collection. The challenge provides a link to the MDN documentation, the first line of which provides the following example code:

var children = node.children;

Thus we could use this approach with our code from above as follows:

var myElement = document.querySelector('#select-me');
var children = myElement.children;

Since myElement is the same object as document.querySelector('#select-me'), we could replace our reference to the myElement variable with the selector itself and shrink the two lines of code to just one:

var children = document.querySelector('#select-me').children;

Hope that clears things up.



Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,731 Points

1) You need a period between document and querySelectorAll

2) querySelectorAll needs to start with a lowercase q. There is an object called document and querySelectorAll is a method you call on that object.

3) The argument you need to pass to that method is ul#rainbow li. I'm not sure how you got to li:nth-child(). What they want here is "all list items in the <ul> element with the ID of rainbow.".

Let me know if you need more help.

var listItems = document.querySelectorAll("li");

This is very simple. Took me a few minutes to have the lightbulb above my head turn on... The replies so far on this page do not work. It's easy, you replace querySelector with .getElementsByTag(); like Guil explains in the video before the challenge.

let listItems = document.getElementsByTagName("li");

Jamar Sloss
Jamar Sloss
2,874 Points

Thanks, your answer is correct.