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 Practice Selecting Elements

Daniel Berbece
Daniel Berbece
2,669 Points
Posted by Daniel Berbece
Daniel Berbece
2,669 Points

How on earth can I call only the li from the nav??

I have been trying and doesn`t come to mind how can I do this exercise

js/app.js 
let navigationLinks =document.getElementsByTagName('li') ;
let galleryLinks;
let footerImages;
index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Pettit.</p>
      </footer>
    </div>
  <script src="js/app.js"></script>
  </body>
</html>

4 Answers

Alexander Solberg
Alexander Solberg
14,350 Points
Alexander Solberg
Alexander Solberg
14,350 Points

Unless the challenge specifies something else, then use querySelectorAll(), it's easier and lets you use css selection.

In this case, they want you to select the links within the nav. Keyword is "links", so basically the a-tags.

Example:

let navigationLinks = document.querySelectorAll('nav a');
Matthew Lanin
seal-mask
.a{fill-rule:evenodd;}techdegree
Matthew Lanin
Full Stack JavaScript Techdegree Student 8,003 Points
Matthew Lanin
.a{fill-rule:evenodd;}techdegree
Matthew Lanin
Full Stack JavaScript Techdegree Student 8,003 Points

Alexander has the right of it, querySelectorAll() is best, but I don't think that has been introduced at the stage of the course you're at.

To do it the hard way (which is the way I think the challenge expects) you'd do this.

let navBar = document.getElementsByTagName("ul")[0];
let navigationLinks = navBar.getElementsByTagName("a");
//or, you could just do it all at once by chaining them
let navigationLinks = document.getElementsByTagName("ul")[0].getElementsByTagName("a");

So we're creating a variable for the actual navbar, selecting all of the UL elements, but only storing the first element we find, which is at index 0. Then, within navBar, we're getting all of the elements with a tag name of a, rather than li.

But yeah, soon enough you will find that querySelector() and querySelectorAll() are your go to's. But, hope that works.

Alexander Solberg
Alexander Solberg
14,350 Points
Alexander Solberg
Alexander Solberg
14,350 Points

Good point! This is probably how they intended it to be solved.

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,671 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,671 Points

This challenge is after the introduction of querySelectorAll(). So, it will and should be the correct method of selecting your elements. Alexander Solberg is correct.

Daniel Berbece
Daniel Berbece
2,669 Points
Daniel Berbece
Daniel Berbece
2,669 Points

I used the querySelectorAll() but only game me one link...didn`t think about " a ". Silly me :). Thank you all for the support, I really appreciate.