Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Practice Selecting Elements

Posted by devin leyba
devin leyba
7,209 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 />
17,062 Points
<noob />
<noob />
17,062 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
7,209 Points

awesome thanks for the help it worked well.

Daniel Barros
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Barros
Front End Web Development Techdegree Graduate 23,589 Points
Daniel Barros
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Barros
Front End Web Development Techdegree Graduate 23,589 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
7,209 Points

thanks for the help. That did it.