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

Posted by noel tanyanyiwa
noel tanyanyiwa
6,877 Points

n the following tasks you'll be required to select various elements on the index.html In the app.js file on line

task 1 of 3

js/app.js 
let navigationLinks;
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>
Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

It doesn't look like you've written any code yet. Please give it your best "good faith" attempt, and then post again if you're still having trouble.

1 Answer

Jeff Waite
Jeff Waite
8,257 Points
Jeff Waite
Jeff Waite
8,257 Points

I had tons of trouble with the very first step in this challenge because I assumed, like we did repeatedly in the course, it wanted us to return the correct list of <li> elements. Once you realize it wants the <a> elements themselves, it's easy to satisfy the first step--

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

(or as Steven correctly pointed out--) let navigationLinks = document.querySelectorAll('nav a');

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Good point, remember that "li" elements are list items, not links. What we call "links" are actually implemented with anchor (a) elements.

And your selector will work but it doesn't need to be so specific. Just naming the outer container and the target is enough ("nav a").

Jeff Waite
Jeff Waite
8,257 Points

Thanks Steven. I didn't realize you could just call the outer element and then the child you wanted to target without 'stepping through the tree'. I thought I had tried this and it failed, but maybe I had something else mixed up when I tried it or only thought that I did.

Because the list items contained only links, it's easy for a beginner to assume that that's what they are looking for in this particular code challenge, especially since the entire lesson teaching this principle used only <li> elements.

It's a great example of reading the question thoroughly and not assuming you know what it's asking for, but I think it also could do more to be clear about what it's asking of the student. (especially the hints provided when you provide the wrong code-- they could be a little clearer that you are providing the list elements and they want only the anchor elements themselves.)