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

michael edmondson
michael edmondson
3,059 Points

I think im confused on what links are in the nav, heres my code

In this challenge, you're going to select various elements from index.html. First, select all links inside the <nav> element and assign them to the variable navigationLinks. (HINT: Use a descendant selector to match elements that are descendants of an element.)

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

1 Answer

Christopher Gardner
Christopher Gardner
12,347 Points

Michael, the links are what is contained in the <a> tags. The href is just where that link points to. So you want to just target the <a> tags like so:

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

Or just

let navigationLinks = document.querySelectorAll("nav a");
Jennifer Nordell
Jennifer Nordell
Treehouse Staff

Hi, Christopher Gardner ! I took the liberty of changing your comment to an "Answer" :smiley: Besides now being eligible for voting and possible assignment of "Best Answer" it helps keep the forums clean by marking the question as answered. Thanks for your help in the Community! :sparkles: