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

shay elbaz
shay elbaz
2,885 Points

getElementByTagName look the only way here... but its not working?... PLEASE HELP?

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("nav");
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>
Ruben Ponce
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,030 Points

it should work. the parentElement should be nav. and the child element should be a. because nav is the parent element of the links you want to target

6 Answers

shay elbaz
shay elbaz
2,885 Points

let navigationLinks = document.querySelectorAll("nav > ul > li > a"); this is the answer! it was really hard... but i did it!

Ruben Ponce
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,030 Points

hi. You had the right idea that you want gather up all the elements nav, but when you say getElementsByTagName("nav"), it will not only select the nav, but also the ul, li, and a. In this case you want to use the querySelectorAll() method. This will allow you to select all elements of nav, and then specify where in the nav you want to select.

So try using document.querySelectorAll(parentElement, childElement);

shay elbaz
shay elbaz
2,885 Points

Hi, Thank you very much but your line is not working my friend...

shay elbaz
shay elbaz
2,885 Points

Bummer: There was an error with your code: ReferenceError: Can't find variable: parentElement It's not working my friend... wow really do not know what to do...

Gonzalo Torres del Fierro
PRO
Gonzalo Torres del Fierro
Pro Student 16,737 Points

this was the right answer.....uhmm

let navigationLinks = document.querySelectorAll('nav > ul > li > a'); let galleryLinks; let footerImages;

Gonzalo Torres del Fierro
PRO
Gonzalo Torres del Fierro
Pro Student 16,737 Points
let navigationLinks = document.querySelectorAll('nav > ul > li > a');
let galleryLinks;
let footerImages;s code!</p>
Gonzalo Torres del Fierro
Gonzalo Torres del Fierro
Pro Student 16,737 Points

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.

Gonzalo Torres del Fierro
PRO
Gonzalo Torres del Fierro
Pro Student 16,737 Points

what´s the difference let navigationLinks = document.querySelectorAll('nav , ul , li, a'); let navigationLinks = document.querySelectorAll('nav > ul > li > a')

Everistus Akpabio
Everistus Akpabio
2,929 Points

note the '>' symbol is not required when working with JS; the solution can also be achieved using:

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