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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Traversing Elements

Posted by israelmaykut
israelmaykut
8,730 Points

Is the <li> element the children they are referring to?

I'm pretty sure that the navigation.querySelector is appropriate here just not sure what to put in the argument. I've tried many combinations. ex: li.a, li[a] and as shown here just li. Any ideas would be appreciated.

app.js 
//Select the naviagation
var navigation = document.getElementById("navigation");

//Select all listItems from the navigation
var listItems = navigation.querySelector("li");

//When a navigation link is pressed
var linkListener = function() {
  console.log("Listener is clicked!");
}

var bindEventsToLinks = function(listItem) {
  //Select the anchor
  var anchor = listItem;
  //Bind the linkListener to the anchor element (a) 
  anchor.onclick = linkListener;
}

for(var i = 0; i < listItems.length ; i++) {
    bindEventsToLinks(listItems[i]);
}
index.html 
<!DOCTYPE html>
<html>
<head></head>
<body>

<ul id="navigation">
  <li>
    <a href="#home">Home</a>
  </li>
  <li>
    <a href="#about">About</a>
  </li>
  <li>    
    <a href="#contact">Contact</a>
  </li>
</ul>

<p>A few of my favourite things:</p>
<ul>
  <li>
    Rain drops on roses
  </li>
  <li>
    Whiskers on kittens
  </li>
  <li>
    Brown paper packages wrapped up with string
  </li>
</ul>

<script src="app.js"></script>
</body>
</html>

1 Answer

Luciano Bruzzoni
Luciano Bruzzoni
15,518 Points
Luciano Bruzzoni
Luciano Bruzzoni
15,518 Points

yes the list items (li) are the elements. you can access them by using the children property like this:

var listItems = navigation.children;

that will grab the children from the ul.