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

devin leyba
devin leyba
3,844 Points

Dont Understand

Can someone please tell me a way to use the descendent selector to target the anchor elements inside the nav element. The a tag is nested a few levels within the nav element and neither the video on descendent selectors or the documentation makes it clear on how to write this. Thanks for any help you can provide me.

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

2 Answers

<noob />
<noob />
16,315 Points

Hi this topic is confusing :]. I advise u to use the DOM selector "querySelectorAll" because he is more flexible. in order to target the anchor links inside the nav u need to first select the nav , then u get, u can call it "access" to the li tag that is nested inside the nav and then u get accees to the a tag that is nested inside the li.

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

as u can see in the code, i first get access to the nav by selecting him first since the li tag and the a tag are nested inside him and then i continue down the hierarchy.

this is the same idea in the next questions as well.

let galleryLinks = document.querySelectorAll("#gallery li a");
let footerImages = document.querySelectorAll("footer a img");

the main thing to understand is u start select the tag that he is in the highest hierarchy and then continue down.

devin leyba
devin leyba
3,844 Points

awesome thanks for the help it worked well.

Daniel Barros
Daniel Barros
Front End Web Development Techdegree Student 17,726 Points

Hi Devin,

I would try using the document object method 'querySelectorAll' rather than 'getElementsByTagName'. Give it a go and let us know if it works. Cheers.

Daniel

let navigationLinks = document.querySelectorAll('nav ul li a');
devin leyba
devin leyba
3,844 Points

thanks for the help. That did it.