Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,362 Points
Umesh Ravji
Umesh Ravji
42,362 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
220,513 Points
Steven Parker
Steven Parker
220,513 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