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
When working with HTML, you'll use classes to give elements a particular style with CSS. In this video, you'll learn to select elements with the same class, using document.getElementsByClassName.
MDN page for getElementsByClassName
Unlike getElementById which returns a single element, getElementsByClassName returns an html collection of elements.
Often when working with HTML,
0:00
you'll use classes to give the elements
a particular look and feel with CSS.
0:02
For example,
remember earlier when we typed an invalid
0:06
email on the Treehouse home page and
it turned red?
0:09
Well errors like these are displayed to
the user by placing a class like error or
0:12
warning on the element in question.
0:16
To select elements with the same class we
can use document.getelementsbyclassname.
0:18
So over an index.html, let's add a few
things that aren't purple to the list and
0:24
give them a class of error not purple,
then we'll see how to select them.
0:28
So first right below grapes,
0:33
I'll add a list item of
oranges with the class,
0:36
error-not-purple.
0:42
I'll go ahead and copy this list item and
0:45
paste two more let's
say right above plums.
0:49
And I'll make the top one fire trucks and
the bottom one snow.
0:54
Let's give index.html a save and
over in app.js we can just
1:01
copy the JavaScript block we
wrote in the previous video.
1:06
And paste a new one right below it and
here we're gonna replace a few things.
1:11
So let's start by changing
the myList constant here.
1:15
To errorNotPurple to reflect
what we'll store here.
1:20
And then will change
the word Tag to Class.
1:26
Now the Class we want is error-not-purple.
1:32
So we'll pass that into this method.
1:35
And in our for loop we'll want
to make sure we're comparing
1:42
errorNotPurple's length in the condition.
1:46
So I'll replace all instances
of my list with errorNotPurple.
1:49
So now, what do we want to do
with these non-purple items?
1:56
Well normally we might want
to hide them or remove them,
1:59
perhaps change them to fit our criteria,
but for now let's just turn them red.
2:02
So normally our CSS might
change the look for us but
2:08
changing them to red with JavaScript
will show that our selection is working.
2:12
So to review what's going on here, first
the entire list will be turned purple.
2:16
Then, just the list items with the
errorNotPurple class will be turned red.
2:21
So they will change color twice, but
2:27
it will probably happen too
quickly to be able to see it.
2:29
So go ahead and save my file and
then go back to the browser and refresh.
2:32
And you can see that
the non-purple items are now red.
2:37
So great, our selection worked.
2:41
Up next I'll show you a much more
versatile way to select elements.
2:43
See you there.
2:46
You need to sign up for Treehouse in order to download course files.
Sign up