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 Sai Kiran Sagaram
Sai Kiran Sagaram
3,688 Points

What is the method to select all the href links in nav element of index.html and assign them to a variable in js?

In the following tasks you'll be required to select various elements on the index.html page.

In the app.js file on line 1, select all links in the nav element and assign them to navigationLinks.

js/app.js 
let navigationLinks = document.getElementsByTagName('a')[0];
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

zainsra7
zainsra7
3,237 Points

Hi Sai,

Your approach is good, let's break this code and understand each step.

Your code:

let navigationLinks = document.getElementsByTagName('a')[0];
let galleryLinks;
let footerImages;

In the above code you use getElementsByTagName property of document object,

It returns a list of elements based on the "tag" you give it in the parentheses. But you also wrote "[0]" after it which simply says

  1. Select all the links from document having tag name "a".
  2. Then give me only the first one as you know Array starts from 0.
let allLinks = document.getElementsByTagName('a')

The above code will select all the <a> tags in the whole document.

But the thing is you need only the <a> tags within <nav> , so in order to reach those <a> you will first need to go to <nav>

See it like a door , in order to reach <a> you need to open the door first or its parent <nav>

Here's the solution to get the list of all the <a> tags within <nav>

  1. Get to the <nav> first javascript let navigation = document.getElementsByTagName('nav')[0]; or let navigation = document.querySelector('nav');
  2. Get to the <a> within <nav> using the above navigation variable
let navigationLinks = navigation.getElementsByTagName('a');
or 
let navigationLinks = navigation.querySelectorAll('a');

or you can perform the above 2 steps in a single line of code as well:

let navigationLinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
or 
let navigationLinks = document.querySelector('nav').querySelectorAll('a');

I hope it answers your question , Happy Coding :)

  • Zain
Sai Kiran Sagaram
Sai Kiran Sagaram
3,688 Points

Thank you for your answer. Crystal clear explanation!!!

charles phiri
charles phiri
13,268 Points
charles phiri
charles phiri
13,268 Points

On the first question this worked for me let navigationLinks = document.querySelectorAll("nav ul a");