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 sophiawong
sophiawong
9,104 Points

let navigationLinks = document.getElementsByTagName('nav > li'); May I ask what's wrong with it?

let navigationLinks = document.getElementsByTagName('nav > li');

May I ask what's wrong with it?

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>

4 Answers

sophiawong
sophiawong
9,104 Points

I tried document.querySelectorAll('nav li'); and document.getElementsByTagName('nav li')"

The system told me that i didn't choose all 3 links, or no select all links inside '<nav>'.

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

The method is only half of the issue. The challenge is asking you to select links, which are implemented with anchor (a) elements. An "li" element is a list item, not a link.

I'll bet you can get it now.

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

The list items are not direct children of the "nav" element (they are children of the "ul"). But the challenge also asks you to select links, which are implemented with anchor (a) elements.

But they are also descendants, so just "nav a" will work as a selector.

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

Oops, I forgot to also mention that the "getElementsByTagName" method does not work for complex selectors. Try using "querySelectorAll" instead.

sophiawong
sophiawong
9,104 Points
sophiawong
sophiawong
9,104 Points

However, it doesn't work. It told me that I didn’t choose all 3 links. :-(

sophiawong
sophiawong
9,104 Points
sophiawong
sophiawong
9,104 Points

Yes.I did it. Thank you so much!

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

sophiawong — Normally you would pick "best answer" on the one that helped the most in resolving the question!