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

lexter acosta
lexter acosta
7,222 Points
Posted by lexter acosta
lexter acosta
7,222 Points

I cannot determine the correct query to get all the 'li' under the 'nav'

i need to select all the links in the nav, easier if 'li' have classes or id

js/app.js 
let navigationLinks = document.querySelectorAll('nav > ul > li[href$="html"]');
let galleryLinks;
let footerImages;


//ocument.getElementsByTagName('nav + li');
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>

3 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

You seem to be overthinking or misunderstanding the problem a bit. Your selector is way more specific than it needs to be, and it is targeting the wrong element. Links in HTML are represented by the <a> element, not the <li> element. So if you changed your selector to this:

let navigationLinks = document.querySelectorAll('nav > ul > li > a[href$="html"]');

It would work, but again be way more specific than it needs to be.

When selecting elements it's usually best to make the selector as broad as it can be while still selecting the right elements, as this makes it more flexible and resistant to breaking from minor changes to the website in the future. In this case a descendant selector that targets the <a> elements that descent from <nav> elements like this:

let navigationLinks = document.querySelectorAll('nav a');

Will work just as well, and be far less specific.

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I received your request for assistance. It seems to me like you simply misread the question. The challenge is asking you to get all the links inside the <nav>, but you are trying to get all the list items. A link is denoted with the anchor tag or <a>, while a list item is denoted with the <li> tag.

So, to get all links in the nav element, I would use the selector 'nav a'.

Hope this helps! :sparkles:

lexter acosta
lexter acosta
7,222 Points
lexter acosta
lexter acosta
7,222 Points

Thanks Jennifer and Andren :) Appreciate the quick response