Preview

Start a free Courses trial
to watch this video

Select All Elements of a Particular Type

6:08 with Guil Hernandez and Joel Kraft

Learn to select an element that doesn't have an ID, or select multiple elements on a page, using getElementsByTagName.

Teacher's Notes
Video Transcript
Downloads

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.

JavaScript and the DOM (Retiring)

Select All Elements of a Particular Type