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

Steven Cadwallader
Steven Cadwallader
6,610 Points

nth-child

I can't seem to figure out how to select the first three 'li' elements of the nav because nth-child is not working properly with querySelectorAll or I am making some other mistake

js/app.js
let navigationLinks = document.querySelectorAll('li:nth-child(-1n+3)');
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>
Óscar Hernández sandoval
Óscar Hernández sandoval
9,256 Points

let navigationLinks = document.querySelectorAll('nav ul li '); How to get multiple elements on the page

To select multiple elements on a HTML page you need the document.querySelectorAll()! Put your selector in and you will get all the elements.

The document.querySelectorAll is gonna return all the elements on the page that matches the selector as a NodeList Object.

For example, you have a navigation. But in the JavaScript you want to have access to all the <li> elements. Than the querySelectorAll() method comes to the rescue!

see some documentation here: https://blog.mrfrontend.org/2017/10/javascript-basics-select-one-or-multiple-html-elements/