JS and DOM - Stuck on selecting certain HTML elements, but not others.

Hey Jesse,

No problem.

There are several ways to select specific items in the list.

Of course, one way is always to add a class to the elements you want - but in many cases you aren't able to do that, for example when a list is hundreds or thousands of items long, or if it's dynamically generated for the page.

So it's a good idea to know how to do it from JavaScript.

In fact, there are two possible solutions...

document.querySelectorAll(); returns a collection of elements (in an array), so you can select specific items in the way you described in your message. So for example:

let myNav = document.querySelectorAll('nav a');
let firstNav = myNav[0];

firstNav will return the first item in the array (the first link).

Alternatively, you can use a CSS selector. You can put any standard CSS selector into your querySelector / querySelectorAll (brackets)!

Did you checkout the lesson that talks about using nth-child()?

For example:

let secondNav = document.querySelector('nav li:nth-child(2) a')

secondNav will return the second link on the list (note I'm using querySelector, rather than querySelectorAll, which returns a single node rather than a node list).

Using nth-child and nth-of-type can be a bit difficult to get your head around though. If you're interested in them, other than the lesson in this course that covers them very briefly, I'd suggest reading up here: nth-child at w3schools and here - nth-of-type at w3schools. Lastly, these nth-child recipes can be really useful too!

If you only select using 'nav' you don't actually return a list. You need to get deeper.

Try something like

let navigationElement = document.querySelector('nav');
let list = navigationElement.querySelectorAll('li');

By the way you can always use

console.log(thing_you_want_to_examine);

to help you.

When you say "no dice" - what exactly is happening? What were you trying to select, the <nav> or ultimately to do something with the list items (as per Scott's answer)?

If you do console.log(navigationLinks); is it returning anything at all?

Any errors in your JS Console?

This is one hell of a jump from the amount of instruction we have been given in this nav selection to the answer we are expected to come up with. I along with everyone else short of Tim Berners-Lee of course had the same issue. Thanks for the question. I would thank the instructor for the answer but he is part of the group that created this poorly designed situation. Miochael T. Slattery

Hey Jesse,

That's right.

Do you remember from the lessons the difference between querySelector() and querySelectorAll()?

• querySelectorAll() will return a list of elements - good for selecting multiple elements.
• querySelector() will return just a single element - the first of whatever you're searching for - good for selecting a unique element.

Let's review the question:

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

So it's asking for more than 1 item - so let's go for querySelectorAll() instead.

Furthermore, you're passing in just 'nav' - which will select only the <nav> element. But it's asking for all the links (<a> tags) contained within the <nav>.

So do you remember how to select a descendant of an element?

Within querySelectorAll() you can simply list them one after the other to indicate that the later is contained within the former - 'nav a' in this case will give us the links inside the nav.

So, in short, this is what you're looking for:

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

Does that make more sense now?

Good luck with the rest of the lesson :-) Rich

document.querySelectorAll('gallery a'); ...Why does the code choose 2 links, not 3 ?

The question is clearly beyond the scope of the instruction given. ( I am thinking of a number between 1 & 100....can you guess it?