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

Michael Zito
PRO
Michael Zito
Pro Student 4,073 Points

First objective I'm struggling with

What I've entered is one of many of a variety of things I've tried. Driving myself insane with trying to figure what I've doing wrong. Can't list all the options I've tried. Sure it is simpler than what I'm doing, but I started out with simpler, and didn't make it anywhere there either. Assistance would really be appreciated.

js/app.js
let navigationLinks = document.querySelectorAll(['title = navigation-links']);
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 = 'navigation-link'>
        <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

Cooper Runstein
Cooper Runstein
11,752 Points

You need to select all links that are children of a nav, the css selector for this is nav a. In a querySelectorAll that looks like:

let navigationLinks = document.querySelectorAll("nav a");
Michael Zito
Michael Zito
Pro Student 4,073 Points

Thanks so much for the help! Didn't see this option taught in the lessons leading up to this objective. How is it a but not ul or li or both?

Michael Zito
Michael Zito
Pro Student 4,073 Points

Nevermind, I figured it out thanks to your clarification!

Cooper Runstein
Cooper Runstein
11,752 Points

If you wanted to be really precise (and this might be a better practice) you could do:

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

But since you know there is only one nav on the page, and the challenge asks you to select all the a tags (which are links) that are nested under the nav, you can use the first option.

In css selectors, the for selector1 selector2 will select all the selector2 elements nested within selector1.

For example:

<div>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
  </ul>
</div>

div li will select all the li elements, those with text 1,2, and 3, even though they're nested in different ul elements.