Selecting Elements with the Same Class Name

2:48 with Guil Hernandez and Joel Kraft

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.

Teacher's Notes
Video Transcript
Downloads

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.

JavaScript and the DOM (Retiring)

Selecting Elements with the Same Class Name