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
Learn to select an element that doesn't have an ID, or select multiple elements on a page, using getElementsByTagName.
Code snippet
<p>Things that are purple:</p>
<ul>
<li>grapes</li>
<li>amethyst</li>
<li>lavender</li>
<li>plums</li>
</ul>
MDN page for getElementsByTagName
An HTML collection is similar to an array. Read up on HTML collections here.
In the last video you learned how
to select an element by its ID.
0:00
This method selects a single
element- the HTML tag with the ID.
0:05
But if you want an element
that doesn't have an ID or
0:09
you want to select multiple
elements on a page.
0:12
For example, you might want to select all
the items inside an unordered list, so you
0:15
can turn them into to do list items that
users can click to mark a task is done.
0:18
Well, if you know the tag
name of the element.
0:23
You can use document.get
elements by tag name.
0:25
This method is very similar to
the previous one we've learned but
0:29
I'd like to point out
a crucial difference.
0:32
This method contains the word elements
0:34
while the last one has
the singular form element.
0:37
Not only will you get an error
if you mix these up but
0:40
also each method returns
a different data type.
0:42
While a get element by ID returns a single
element that can be accessed directly
0:46
get elements by tag name returns
a collection of elements.
0:51
A collection is like in array you can
access an element directly using its
0:56
index or loop over the whole
collection to access all of them.
1:00
So let's hop over to the chrome developer
tools in our browser to see how it works.
1:06
We will refresh the page to reset it and
1:10
in the console we will declare a constant,
my paragraph.
1:13
Assigning it an HTML collection
of all the paragraph elements.
1:16
So I'll type const my paragraph
1:20
equals .getElementsByTagName.
1:25
And I want to get all the p tags.
1:31
So now, if you type myParagraph.length,
1:36
You see that we get one because there is
only one paragraph element on the page.
1:44
And then we can access that element
the same way we would get an element from
1:49
an array using 0.
1:54
Since 0 is the first
element of an array and
1:56
as you can see this returns
the paragraph element.
1:59
So now let's change the paragraph
to blue using the trick we've used
2:03
for the heading.
2:06
So we'll type myParagraph
0 .style.color = blue.
2:08
And the paragraph turns blue.
2:17
So now let's go over to app.js and
2:20
use getElementsBy TagName to
select the heading element.
2:23
Instead of getElementByID.
2:27
Remember, we're getting a collection back,
but there's only one heading on the page.
2:39
So we know that element will
be first in the collection, so
2:44
I'll define an index of 0.
2:47
Let's go ahead and save our file, and
now if we switch back to the browser and
2:49
refresh we'll know our changes
worked if our app still functions.
2:55
So I'll just type coral in the text
field and click the button and cool.
3:00
It changes color.
3:05
Now getElementsBy TagName really shines
if you have several elements to select.
3:06
So for example,
let's jump over to the HTML file and
3:13
I'll go ahead and delete the input and
button elements for now.
3:17
And let's put a paragraph and list here
instead, a list of things that are purple.
3:22
Now you can copy this exact snippet
from the teachers notes of this video.
3:27
So now with JavaScript, we're going to
turn the text in the list to purple.
3:31
I'll give index.html a save,
3:35
and over an app.js I'm going to select and
remove all the JavaScript we've bring so
3:40
far, but
don't worry you can still view and
3:46
reference all the code written in this
course by downloading the project files.
3:48
Writing each piece of code separately
will make everything in these lessons
3:51
easier to explain.
3:55
So now, save your file then go over to the
browser and refresh to see the new list.
3:56
Now let's get into the console and
4:02
create a new variable of myList and
assign the list items to it.
4:04
So I'll type const myList =
4:09
document.getElementsBy TagName and
4:14
I'm going to get the LI elements.
4:19
So first,
let's change the word lavender to purple.
4:27
Now, lavender is the third item in
the list, meaning that in the collection,
4:31
its index is 2.
4:36
So over in the console,
4:38
I'll type myList 2.style.color = purple.
4:41
Great, it changes to purple.
4:52
So now let's change
the whole list to purple.
4:54
Back in app.js,
I'll select the list items here again,
4:56
with const myList = document.getElementsBy
5:03
TagName ( ' l i ' )and we can then
5:09
iterate over all of them with a for loop.
5:13
So now, inside the loop we can set
5:36
each list item to purple
by typing myList[i]
5:41
.style.color = "purple".
5:48
All right, so let's save our file and
have a look in the browser.
5:54
I'll refresh the page and
we see that the list is now purple.
5:58
So great work.
6:03
Up next I'll show you a way to select
elements based on their class.
6:04
You need to sign up for Treehouse in order to download course files.
Sign up