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 kazue watanabe
kazue watanabe
3,814 Points

how can i select elements inside the tag? I would like to use getElementsByTagName('nav').querySelectorAll('li') but it

how can i select elements inside the tag? I would like to use document.getElementsByTagName('nav').querySelectorAll('li') but it doesn't work

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

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

I think your problem is that getElementsByTagName('nav') returns a collection, and you just need a single element. Try getElementsByTagName('nav')[0].querySelectorAll('li')

kazue watanabe
kazue watanabe
3,814 Points
kazue watanabe
kazue watanabe
3,814 Points

Thanks David. I tried that but it still doesn't work. :(

Redweb FED
Redweb FED
15,517 Points
Redweb FED
Redweb FED
15,517 Points

Give this a try.

for (var i = 0; i < navigationLinks.length; i++){
   console.log(navigationLinks[i]);
}
Gary Boyer
Gary Boyer
3,622 Points
Gary Boyer
Gary Boyer
3,622 Points

You can access them like this:

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