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 multidrew97
multidrew97
4,823 Points

How am I supposed to do this?

How am I supposed to do this when, as far I remember, they didn't even go over how to select children of elements? Please Help

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

Did you watch the linked videos?

multidrew97
multidrew97
4,823 Points

If you are referring to the video on in the hint, I watched it twice now but it's only talking about how to make descendant selectors in CSS. It doesn't talk about how to use them in JavaScript with the querySelector functions. I've tried using document.querySelectorAll('nav:li') and I get 0 links document.querySelectorAll('nav.li') and get 0 links document.querySelectorAll('nav') and get 1 link document.querySelectorAll('li') and get 5 links. I'm just very lost in how this is supposed to work.

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

Descendent selectors are separated with a space. For example

div p {
  background-color: yellow;
}

selects all <p> elements inside <div> elements. You are on the right track using querySelectorAll just need to use a space between selectors. But you have also fallen for a common gotcha on this challenge. You are to select links which are tagged <a> not <li>. <li> is for list items.

multidrew97
multidrew97
4,823 Points

Thank you KRIS NIKOLAISEN, you were right with the <a> tag. I thought I needed to select the list item that had the link within it. I assume the way that I was doing it was that I was selecting the text of the list item and not the link itself. That was pretty misleading, probably on purpose to help me think about the application of the selectors

Daniel Turato
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Turato
Java Web Development Techdegree Graduate 30,124 Points
Daniel Turato
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Turato
Java Web Development Techdegree Graduate 30,124 Points

To select children of elements you do this :

let children = parent.children

with parent being the parentNode of the children elements. This returns a list in which you can loop over. Hope this helps