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) Making Changes to the DOM Getting and Setting Text with textContent and innerHTML

Posted by Tim Morgan
Tim Morgan
9,392 Points

getElementsByTagName vs querySelectorAll (final challenge from Getting a Handle on the DOM)

Just a recap, I couldn't seem to use the getElementsByTagName('tagName') query, I mean, it should still return a Nodelist. Am I wrong to think this is possible? Any examples?

Ashley Carpenter
Ashley Carpenter
13,393 Points
Ashley Carpenter
Ashley Carpenter
13,393 Points

Did you try:

document.getElementsByTagName("tagName");

getElement... is a method of the document object so you need to specify. If you did this, please can you post some example code as it will make it easier to identify why it's not working for you :)

Umesh Ravji
Umesh Ravji
42,386 Points
Umesh Ravji
Umesh Ravji
42,386 Points

If it's the first part you are having problems with, you may want to look here: https://teamtreehouse.com/community/seems-simple-but-i-cant-get-it

Ashley Carpenter
Ashley Carpenter
13,393 Points
Ashley Carpenter
Ashley Carpenter
13,393 Points

I see what you mean.

If you want to return all the elements in the nav using getElementsByTagName, try this:

var navElements = document.getElementsByTagName("nav");

As your nav is the only nav on the page, by using document.getElementsByTagName("nav") you will return the nav.

2 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

It takes more than just one tag name to resolve the challenge.

If I understand correctly which challenge you are working on (not the video linked above), it asks you to "select all links in the nav element". The links are the intended targets here, not the nav itself.

To do that using querySelectorAll, the argument will need to be a descendant selector, naming both the nav element and the link (a) tags, something like this:

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

You can also get the same answer using getElementsByTagName, but you have to call it twice and index it once:

var navElements = document.getElementsByTagName("nav")[0].getElementsByTagName("a");
Lee Zamastil
Lee Zamastil
21,628 Points

Indeed. I solved the challenge but it occurred to me that if I hadn't remembered my CSS then I wouldn't have found the solution. This is a reminder that all these languages can (and sometimes must) work together.

Tim Morgan
Tim Morgan
9,392 Points
Tim Morgan
Tim Morgan
9,392 Points

I was just working on that very concept (proper tag name usage and targeting). Reasons aside (I wanted to try various methods to get the same results), it was baffling me why I couldn't target the link tags properly. I didn't think about chaining (or calling twice) the getElementsByTagName! Thank you so much. It was undermining my understanding, but that was a very creative way to get the result AND I now see why querySelectorAll is the preferred method. Thanks for all the help