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 Phillip Lewis
Phillip Lewis
8,549 Points

I assigned a class to the other links in the Nav element and selected them but I am still getting the answer wrong

The requirement was to select all the links in the Nav tag. The only way I knew how to do this was to assign all the links the same class. But it is not working.

js/app.js 
let navigationLinks = document.getElementsByClassName("selected");
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" class="selected">About</a></li>
          <li><a href="contact.html" class="selected">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>

1 Answer

ve
ve
5,048 Points

Delete the classes and use querySelectorAll() instead. This is much faster as it doesn't need any additional classes. You just use the selector you would also use in CSS:

let navigationLinks = document.querySelectorAll("nav a");
Phillip Lewis
Phillip Lewis
8,549 Points

I have not seen this notation before ("nav a"). Is this the pre-ordered traversal of the documents nodes?

ve
ve
5,048 Points

That is a common css selector - you first select the parent, in this case <nav>, then a space, then you add the child you want to select, in this case I want to select the <a>-Elements. Each of these <a>-Elements is a child of the <nav>-element, even if there's the <ul> and the <li> in between.

Say you want to select each paragraph (<p>) inside a <div>: Html:

<div>
   <p>Paragraph One</p>
   <p>Paragraph Two</p>
</div>

The matching css selector would be

div p{}

as <p> is the child of the <div> element.

In this case, you could also use your javascript method querySelectorAll():

var paragraph = document.querySelectorAll("div p");

You see? It looks just like the css selector in quote marks!