JavaScript JavaScript and the DOM Getting a Handle on the DOM Practice Selecting Elements

Ian Olson
Ian Olson
2,204 Points

Not sure if I'm pulling things right from the HTML

Not sure if I have to Id or or create tags for the html items or if I'm just using the wrong method of pulling items from the html, since I'm just trying to pull the three items from the nav category.

js/app.js
let navigationLinks = document.querySelectorAll( '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">
          <a>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </li>
          </li>
          <a>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </a>
        </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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 79,474 Points

Hi Ian,

If you're familiar with CSS Selectors, selecting elements with querySelectorAll works the same way. You pass in a string that represents a selector that looks for the elements in the document Tree.

So you want the three list items. We know there's one nav element, so we can target the list items li which is inside the unordered list ulwhich is inside the nav elementnav`

('nav ul li')
Ian Olson
Ian Olson
2,204 Points

Thanks you for the quick reply, it seems like every time I put the 'li' element into the string it says too many elements selected and when I use 'ul' it either gives me that it has selected 0 elements.

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

this one says the wrong elements shave been selected.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 79,474 Points

There’s one more element to add go the selector.

nav ul li a

I didn’t account for the anchor tags inside the list items :-)