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

Callum Chetty
Callum Chetty
6,295 Points

descendant selectors in javascript

how do i select all list items if they are set up as follows 1.<nav> 2.<ul> 3.<li>

and should i use getElementsByTagName? or querySelectAll?

Thank you

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

Owen Bell
Owen Bell
7,722 Points

You can use either document.getElementsByTagName or document.querySelectorAll in this context. The key thing is that the question is asking you to select the links <a></a>, not the list item <li></li> surrounding it.

You can approach this in any way that gets you the links you need, pretty much. Add an a or swap li for a in your query above and that does fine. To meet the requirements for the question as cleanly as possible, strip it down to:

let navigationLinks = document.querySelectorAll('nav a');

Just remember that when you're dealing with more complex documents, you need to be aware of exactly what your query can select, so that you're only selecting the exact list/collection of elements that you want.