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

handy christian
handy christian
2,899 Points

I dont know what should i do with this code challenge, anybody can solve this?

Please let me know how the descendants operators work and give me the right answer of this challenge

js/app.js
let navigationLinks;
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>

4 Answers

Berian Lowe
Berian Lowe
15,439 Points

The descendant selector matches all elements that are descendants of a specified element. The first selector here would be the nav selector as this represents the ancestor element—a structurally superior element. The second selector is for links, so we would use the anchor tag selector (a) this represents the descendant element we’re trying to match.

For example:

let navigationLinks = document.querySelectorAll("nav a");
handy christian
handy christian
2,899 Points

HOLYYY thanks brother.... i got stuck in it for 3 hours already. I keep using commas, dot, >, and others with nav ul li a :'(

Berian Lowe
Berian Lowe
15,439 Points
let navigationLinks = document.querySelectorAll("nav ul li a");
let navigationLinks = document.querySelectorAll("nav > ul > li > a");

The two examples above should also work, it comes down to how specific you want to be. Using nav a as a selector would select all links within the nav element. Say that we had two lists, an unordered and ordered list. Using the selectors above would be a good way of being more specific and only selecting the links in the unordered list.

When using the > symbol, be sure to follow every descendant between the ancestor and the descendant you want to select. e.g:

let navigationLinks = document.querySelectorAll("nav > ul > a") 
//This wouldn't work as it's missing the li descendant

let navigationLinks = document.querySelectorAll("nav ul a");
 //This however will work fine

Hope this clears things up a bit!

Regards,
Berian

handy christian
handy christian
2,899 Points

nah, it wont work sir. I'm stuck with this challenge before because i did this code. The right answer is above you.

document.querySelectorAll('nav a');

this one will target all the element under ul with id 'gallery' and find for link 'a' document.querySelectorAll('ul#gallery a');

this is the last one which will look for img inside the footer. document.querySelectorAll('footer img');

Alasdair Marchant
Alasdair Marchant
4,592 Points

Hey ! I tried the following code:

navigationLinks = document.getElementsByTagName("nav a");

does anyone know why this doesn't work?