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

Daniel Gibson
Daniel Gibson
Full Stack JavaScript Techdegree Graduate 15,904 Points

How do I select all list items under the <nav> tag?

I don't understand how to do the first task in this challenge. How do I select all list items under the <nav> tag? What is <nav>? Is it a class or tag? Do I need to use querySelectorAll or getElementsByClassName?

js/app.js
let navigationLinks = document.querySelector('[title=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 title='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>

1 Answer

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 9,727 Points

We can use the css selector: >. Which let's us choose a child of an element.

So if we were to say: ul > li it would grab all li elements that are children of any ul element.


I want you to use the logic above to try and get the elements you want.

Hint: You can chain the selector, so that you go further down the child list, ex: div > ul > li. To get all li elements that are part children of a ul element within a div.

If you are still stuck look below for the answer.


Still stuck?

Here you go: nav > ul > li that is the selector you need to use.

P.S. You are using the title attribute wrong reasons (though frankly it shouldn't be used at all). Title is for identifying an element mainly for the use of default tooltips built into the browser. However, you are using at an identifier for the use of coding/styling an element. Instead you should use the class or id tags for that.