Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
If you know the tag name of the element, you can use getElementsByTagName(). This method returns an HTMLCollection of elements with the given tag name.
Further Reading and Related Videos
- document.getElementsByTagName() – MDN
- HTMLCollection – MDN
- HTMLCollection.length – MDN
- How to Loop Through an HTMLCollection
- Using a for Loop to Iterate Over an Array
Exercise
Inside the loop, the variable i holds the current index value. Log items[i] to the console to view the returned elements as the loop runs.
for (let i = 0; i < items.length; i++) {
items[i].style.color = 'orchid';
console.log(items[i]); // <li style="color: orchid;">Make coffee</li>
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Earlier, you use the getElementById
method to access one element with
0:00
the specified ID.
0:05
What if you want an element
that doesn't have an ID, or
0:07
you want to select multiple
elements on a page?
0:11
For example, you might want to select all
the items inside an unordered list so you
0:14
can turn them into to do list items that
users can click to mark a task as done.
0:19
If you know the tag name of the element,
you can use document.getElementsByTagName.
0:25
This method is similar to getElementById,
with one important distinction.
0:31
Notice the plural word, Elements,
0:35
while getElementById has
the singular form, Element.
0:38
Not only will you get an error
if you mix these up, but
0:43
also each method returns
a different data type.
0:45
Let's head over to the browser
console to see how it works.
0:49
The purpose of getElementById
is to access and
0:52
return one element in the DOM directly.
0:56
For example, you've seen how
document.getElementById('headline')
1:00
returns the one h1 element.
1:06
The getElementsByTagName method
doesn't quite work in the same way.
1:09
And you use it when you need to access and
return multiple elements in the DOM.
1:13
In the console, let's access
the li elements in the document
1:18
with document.getElementsByTagName,
passing it the string li.
1:24
Notice that instead of the element nodes,
it returns something called
1:32
an HTMLCollection, and it looks like
an array holding these six li tag names.
1:37
An HTMLCollection is an array-like
collection of elements listed in the order
1:42
they appear on the page.
1:47
Now, an important distinction to make
is that array-like collections like
1:49
this are not constructed
like regular arrays.
1:53
So they don't exactly have all of the same
properties and methods as array literals,
1:56
for example.
2:01
Collections will have their
own properties and methods,
2:01
some of which are like those of an array.
2:04
For instance, the length property returns
the number of items in an HTMLCollection.
2:07
This returns 6 because there
are 6 li elements on the page.
2:13
Since you can treat this HTML
collection just like an array,
2:18
you can access elements directly
using its index and bracket notation.
2:22
For example, access the first li element
the same way we would get an element
2:27
from an array, using 0 because 0
is the first element of an array.
2:32
And this returns the first li element
containing the text "Make coffee".
2:36
Let's try selecting other elements,
like buttons.
2:43
I'll select the button tags with
document.getElementsByTagName,
2:46
passing it the string 'button'.
2:53
And this returns an HTMLCollection
holding three button elements.
2:58
And I can see that the button
with the ID btn-main is first in
3:03
the collection at the 0 index.
3:07
Now I can, for example, do something to
this specific button with JavaScript,
3:10
like change its color
3:14
with bracket notation
specifying 0 as the index,
3:16
then .style.color = 'yellow'.
3:22
Remember, even if there's only one
element in the DOM with the tag name
3:32
you've specified, you'd still need to
access it like this by its index and
3:37
with bracket notation.
3:41
Otherwise your script will throw an error.
3:43
For example, selecting the only
h1 element on the page and
3:47
attempting to set its color
like this throws an exception
3:52
letting you know that you cannot
set a color property on something
3:57
that's undefined.
4:00
What this message is really saying is
that you can't set the style.color of
4:01
a collection, because the collection
doesn't have a style property
4:06
But specifying the index value
of the element in the returned
4:14
collection with bracket
notation works as expected.
4:18
getElementsByTagName really shines when
you have several elements to select and
4:24
manipulate all at once.
4:29
Let's go into our JavaScript file now and
4:32
use getElementsByTagName to select
all the list items in the document.
4:34
With document.getElementsByTagName(),
4:39
passing it the string 'li'.
4:45
First, I'll try changing
their background color.
4:50
So I'll call .style.backgroundColor,
4:53
And assign it the string skyblue.
5:02
I'll save my file, refresh the page,
and nothing changes.
5:06
Looking in the console,
I once again get that same error message,
5:12
Cannot set property
'backgroundColor' of undefined.
5:16
Well, we know that you can't
call style.backgroundColor, or
5:19
any of the properties and methods for HTML
elements on the HTMLCollection itself.
5:24
Because the collection doesn't
have the same properties and
5:29
methods as the individual elements.
5:32
When you have multiple elements in the
collection that you would like to modify,
5:35
you have to use a JavaScript loop
to iterate through the collection,
5:40
then access and
do something to each element one by one.
5:44
This time I'll make my code more
readable by assigning the li
5:48
collection to a variable I'll name items.
5:52
Items now hold a reference
to the HTMLCollection.
5:59
Now with JavaScript, I can iterate over
all the items inside the array-like
6:05
collection and do something to them.
6:10
There are different loops and
6:12
methods you can use to iterate over
an HTMLCollection with JavaScript.
6:13
I'll use a for loop, which you've
worked with in previous courses.
6:17
Between the parentheses,
6:22
I'll type let i = 0; i <
6:27
items.length; i++.
6:31
If you need a refresher on how for
loops work with arrays,
6:35
be sure to review the links to
related Treehouse videos posted in
6:38
the teacher's notes with this video.
6:41
I've also included information about other
ways to iterate over a HTMLCollection.
6:44
Inside the loop, the variable i
holds the current index value.
6:49
So I'll use i and
bracket notation to reference
6:55
each item in the HTMLCollection and
set its text
7:00
color to orchid with
.style.color = 'orchid'.
7:05
I'll save my file, and in the browser,
7:13
refreshing the page updates the text for
each item in the list to orchid, good.
7:17
This was only a simple example of
accessing collections of elements and
7:23
doing something with them.
7:27
And as I mentioned earlier, you'll usually
change text color like this with CSS.
7:29
And later,
you'll learn how iterating through and
7:34
accessing elements in these
array-like objects can be useful.
7:36
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up