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

multidrew97
multidrew97
3,754 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

multidrew97
multidrew97
3,754 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
PRO
KRIS NIKOLAISEN
Pro Student 49,890 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
3,754 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
PRO
Daniel Turato
Java Web Development Techdegree Graduate 30,101 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