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

Cody Martens
Cody Martens
6,825 Points
Posted by Cody Martens
Cody Martens
6,825 Points

How to use parent/children node to get listItems to refer to a collection?

I've tried approaching this with the ElementsByTagName and the ElementById. I would think document.getElementsByTagName('ul') would work, but since it doesn't, I don't know how to access the list items.

js/app.js 
var listItems; 
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
const listItems = document.getElementById.ParentNode.children('rainbow');
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>
Abdullah Howard
Abdullah Howard
11,955 Points

What is it that you are trying to accomplish?

1 Answer

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Hi Cody,

Either one of the methods you’ve listed would work. The thing is, that only gets you the unordered list element. You want the list items.

So after you grab the <ul> you want to chain the children property onto the end of it. Well, you don’t have to use that method, but it’s one way you could go about it.

So...

var listItems = document.getElementById(‘rainbow’).children

👆🏾 That statement says, “Target the element in the DOM with an id of rainbow and store all of its children in the variable listItems”.

Does that make sense?

If you need any more assistance, let me know.