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! While you're at it, check out some resources Treehouse students have shared here.

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

Em Har
Em Har
9,775 Points
Posted by Em Har
Em Har
9,775 Points

JavaScript and the DOM

I got my answer from another post, but my question is when did the video ever cover what my answer is supposed to be? let listItems = document.querySelectorAll('ul#rainbow > li');

I recall the #. But we never really covered UL being placed before the ID and the >li was never covered either. Did I miss something? Maybe I did, help me out, thanks!

js/app.js 
let listItems = document.querySelectorAll('ul#rainbow > li');
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", 
              "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Rainbow!</title>
  </head>
  <body>
    <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>
    </ul>
    <script src="js/app.js"></script>
  </body>
</html>

1 Answer

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

I can't say exactly when this was taught, but what you pass into document.querySelectorAll() is the same as a CSS selector. Maybe they assume you've encountered this before in your CSS travels.

FYI, the angle bracket > is the child combinator. I don't see it that often. It targeting only elements that are direct children. More common is just a space (the descendent combinator) which is for any descendants - children, grandchildren, etc. etc.,

In this case it would have worked just fine with the space. 

let listItems = document.querySelectorAll('ul#rainbow li');
Em Har
Em Har
9,775 Points
Em Har
Em Har
9,775 Points

Thanks, Brendan.