Select all links in nav and assign to navigationLinks trouble

I don't know why this question was given after this series of videos, since it's never explained how to access a tag within a tag in a single line of code until later on.

The furthest the video explains is:

var navigationLinks = document.getElementsByTagName('nav')[index]

and doesn't even mention you can access a parent/child node the way Josh explained, with a simple space between the two.

Thanks for the examples, josh/loannis. Both seem to work.

Hi Chase,

I tried to use an index and for loop like Loannis mentioned and couldn't get it to work. I ended up just selecting nav and then the links:

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

I'm not sure if this is the best/correct way to do it though. I would appreciate any other solutions!

Hello Chase,

methods like

parentNode.getElementsByTagName(tagname: string)
parentNode.getElemetsByClassName(className: string)

return a NodeList object which can be thought of as an array of elements, inside the parentNode, with the specified tagname or className and so on. Also note that the nodes of a NodeList object can be accessed by an [index], just like any elements of an array.

So, this code

var navigationLinks = document.getElementsByTagName('nav');

actually stores in navigationLinks all nav tags of the parentNode, in this case the document, as an array.

If you want all the anchors inside a specific nav tag you could use something like

var navigationLinks = document.getElementsByTagName('nav')[index].getElementsByTagName('a');

where you select a nav tag using [index] and then retrieve all of it's anchor children as an array.

Tip: Try using the console to get familiar with traversing the Document Object Model.

Hope that helped!

Where does the 'a' in ('nav a') come from? Why wouldn't it be 'li' to represent the child element?

Hi all, pretty confused myself on this one. Tried many things.

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

i thought was the correct answer, but would not work at all. However, remove the semi-colon at the end -

const navigationLinks = document.querySelectorAll('nav a')

and the code editor challenge is happy with this.

Why "const navigationLinks" does not work but "let navigationLinks" does?

The solution to this part of the problem is not explained anywhere in the material and requires research to get it done, which basically means coming to this thread.

Why does

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

work? It's nice to have the answer, but would be even nicer to know the why so we can learn from this rather than just use our research skills.

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