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

Kenan Spahic
Kenan Spahic
2,936 Points
Posted by Kenan Spahic
Kenan Spahic
2,936 Points

need help for challenge

I am stuck with this challenge can someone help and how this parent child relation works...Don't know how to get just <li> in <nav>

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>

2 Answers

Caleb Kemp
Caleb Kemp
12,754 Points
Caleb Kemp
Caleb Kemp
12,754 Points

It's pretty simple, think of peeling an onion, in order to get to absolute center of the onion, you have to peel some of the middle layers out of the way first. Same thing, so if you just want li elements inside of nav, you can't just go "nav li", you have to go "nav ul li".

Kenan Spahic
Kenan Spahic
2,936 Points
Kenan Spahic
Kenan Spahic
2,936 Points

but I don't know the syntax how to put all in one. I watched every previous video and could not found any similar example

Caleb Kemp
Caleb Kemp
12,754 Points
Caleb Kemp
Caleb Kemp
12,754 Points

Okay, I was looking at the wrong challenge (sorry about that). However, after looking at the correct challenge, I was able to get it to pass, although it wasn't particularly pretty looking. First I got the list of all the li elements.

var myList = document.getElementByTagName("li");

then, if you look at the index.html file, you see that we need the first three li elements or myLIst[0,1,2]

now to get the a elements inside of those, we grab the first childNode of each one. (since there is only one child)

var submitList = [myList[0].childNodes[0], myList[1].childNodes[0], myList[2].childNodes[0]]

then make navlinks = submitList. I feel certain that this is not an ideal way to solve this, however, it does work. Your right, I didn't see him giving examples about this in the video either. Hope it helps

Kenan Spahic
Kenan Spahic
2,936 Points
Kenan Spahic
Kenan Spahic
2,936 Points

Thank you that helped. Do you know where can I learn more about .childNodes?

Caleb Kemp
Caleb Kemp
12,754 Points
Caleb Kemp
Caleb Kemp
12,754 Points

Here's a couple of links I found helpful

https://www.w3schools.com/jsref/prop_node_childNodes.asp https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

however, I think most people do that sort of searching with jquery, (although you might not be able to use it in the challenges), and here is a link to jquery selectors.

https://www.w3schools.com/jquery/jquery_selectors.asp

ps I find w3schools in generally to be very helpful, they usually give an example of how to use the code.