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) Getting a Handle on the DOM Select All Elements of a Particular Type

Richard Verbraak
Richard Verbraak
7,739 Points
Posted by Richard Verbraak
Richard Verbraak
7,739 Points

Why do we have to specify which elements to manipulate with the getElementsByTagName?

I understand that you get a collection back of let's say all h1 tags on the page. But if it's only one why wouldn't getElementsByTagName("h1") work?

Why the need for specificity? Wouldn't it also be easier if you just want to manipulate ALL the h1's and leave it as is, like the example I typed above?

2 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

For consistency, the "getElementsByTagName" function always returns an element collection, even if there is only one, or even none, of that type on the page. If you know there is only one element of that type on the page, you can select it by adding an index of 0 to the function call: ("getElementsByTagName("h1")[0]").

Another option would be to use a different function that returns only a single element, for example: "querySelector("h1")". This function always returns only the first matching element (or null if none found), no matter how many are on the page.

I'm not quite sure what you meant by "manipulate ALL the h1's and leave it as is". Perhaps you could rephrase that part of the question if I haven't answered it already.

Richard Verbraak
Richard Verbraak
7,739 Points
Richard Verbraak
Richard Verbraak
7,739 Points

Thanks got it.

As for the last part, I just meant why is just using getElementsByTagName("h1") not the correct use if I had only one h1' on the page. Why would I need to specify it with [0] if it's just one.

I know I'm nickpicking about certain interactions , since it would be incorrect to use a function that returns a collection, while I just ask for only one element. I was just curious as to why the following won't work:

getElementsByTagName("h1")

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Well, as I said, the function always returns a collection for consistency. It would be difficult to use otherwise, since the program calling it may not know in advance how many elements are on the page, and therefore would not know how to properly handle the returned value.

But if you do know there's only one element, then choosing a function that returns a single element (like "querySelector", or if it has an ID "getElementById") might be the best way to keep the code simple.

Glad to help, and you can mark the question solved by choosing a "best answer".
Happy coding!

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

You need to remember that being specific is extremely important in programming. But besides that, you also need to consider what both of the methods return. getElementsByTagName() will return a collection of elements, while querySelector() will return a DOM object. The collection will require extra work and memory to simply target a single element, so you get around that by using the querySelector() version of the method.

Next you also need to consider the point of using getElementsByTagName() vs querySelector(). The whole point of using getElementsByTagName() is when you need to access multiple elements of the same tag. For example if you want to dynamically change the content of all the h3 tags on your page. However, you would be using the querySelector() only if you need to get a very specific tag on your page, a tag that generally isn't repeated. This is good for example if you want to target a semantic markup tag that you would only be realistically using once per page. For example if I wanted to change the size of the main html element.

Finally your example is flawed in the way that you are approaching problem solving. Just because it is easier doesn't mean it is the correct way to do something. You say it would be easier to just edit all the h1 tags, but what if that isn't what you are supposed to do? Or if you know only 1 h1 tag will ever be on the page, why would you use a method meant to gather multiple tag elements? These are the sort of questions you need to ask yourself when programming stuff.

Hope that helps.

Edited: Fixed references to non-existent method.

Richard Verbraak
Richard Verbraak
7,739 Points
Richard Verbraak
Richard Verbraak
7,739 Points

I was just curious why my example wouldn't work even if flawed. I was just using it to get my point, albeit confusing, across. I get what you're saying. I think I indeed forget that often times, being specific is essential, to a computer.

Thanks for the being so detailed nonetheless.

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

:warning: I don't think there is a single-element select function named "getElementByTagName". There's the one I mentioned that works with an ID (since ID's must be unique), but for tag names the only function with a similar name is the one that returns a collection. The function to get a single element using a tag name is called "querySelector".

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Oof. Thanks for noticing that Steven Parker. I haven't used vanilla javascript in years, thought that was literally a new method that was out, and hadn't looked into it. You are right though, normally I would use querySelector or querySelectorAll.

I have fixed my answer.