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 Matt Duarte
Matt Duarte
2,497 Points

Selecting all elements within the nav tag

let navigationLinks = document.getElementsByTagName('nav'); let galleryLinks; let footerImages;

What am I doing wrong? First I tried using querySelectorAll but it did not work, and now I'm using getElementsByTagName and its only selecting one LI.

js/app.js 
let navigationLinks = document.getElementsByTagName('nav');
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>

2 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

It's actually not selecting an "LI", but it is selecting the "nav" element you asked it to get. But the instructions say to "select all links in the nav element", and links are represented by anchor ("a") elements.

Since you specifically want the links that are in the nav element, this might be a good opportunity to use a descendant selector where you name both the container and the target tags separated by a space.

josh hahn
josh hahn
5,926 Points
josh hahn
josh hahn
5,926 Points

Thank you for connecting the technical language to the practical answer that was previously given for me. Without out the practical answer the technical language would not have meant much but for the future the technical language will be more useful. :)

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

I'm not sure what you mean by "the practical answer that was previously given for me". But hopefully these hints are enough to help Matheus pass the challenge without an explicit code spoiler.

josh hahn
josh hahn
5,926 Points
josh hahn
josh hahn
5,926 Points

LOL. Oops. I actually asked the exact same question and was given the syntax of ('nav a'). which told me the answer but did not tell me why. Your answer to Matheus told me why and connected it to the technical language. Sorry for the confusion I did not realize I was on a different thread.

Matt Duarte
Matt Duarte
2,497 Points
Matt Duarte
Matt Duarte
2,497 Points

Yeah that technical answer really helped. I completely forgot about using a descendent selector. Only after you said that I was like, shit I forgot about that. Thank you.