In the last video you learned how to select an element by its ID.

This method selects a single element- the HTML tag with the ID.

But if you want an element that doesn't have an ID or

you want to select multiple elements on a page.

For example, you might want to select all the items inside an unordered list, so you

can turn them into to do list items that users can click to mark a task is done.

Well, if you know the tag name of the element.

You can use document.get elements by tag name.

This method is very similar to the previous one we've learned but

I'd like to point out a crucial difference.

This method contains the word elements

while the last one has the singular form element.

Not only will you get an error if you mix these up but

also each method returns a different data type.

While a get element by ID returns a single element that can be accessed directly

get elements by tag name returns a collection of elements.

A collection is like in array you can access an element directly using its

index or loop over the whole collection to access all of them.

So let's hop over to the chrome developer tools in our browser to see how it works.

We will refresh the page to reset it and

in the console we will declare a constant, my paragraph.

Assigning it an HTML collection of all the paragraph elements.

So I'll type const my paragraph

equals .getElementsByTagName.

And I want to get all the p tags.

So now, if you type myParagraph.length,

You see that we get one because there is only one paragraph element on the page.

And then we can access that element the same way we would get an element from

an array using 0.

Since 0 is the first element of an array and

as you can see this returns the paragraph element.

So now let's change the paragraph to blue using the trick we've used

for the heading.

So we'll type myParagraph 0 .style.color = blue.

And the paragraph turns blue.

So now let's go over to app.js and

use getElementsBy TagName to select the heading element.

Instead of getElementByID.

Remember, we're getting a collection back, but there's only one heading on the page.

So we know that element will be first in the collection, so

I'll define an index of 0.

Let's go ahead and save our file, and now if we switch back to the browser and

refresh we'll know our changes worked if our app still functions.

So I'll just type coral in the text field and click the button and cool.

It changes color.

Now getElementsBy TagName really shines if you have several elements to select.

So for example, let's jump over to the HTML file and

I'll go ahead and delete the input and button elements for now.

And let's put a paragraph and list here instead, a list of things that are purple.

Now you can copy this exact snippet from the teachers notes of this video.

So now with JavaScript, we're going to turn the text in the list to purple.

I'll give index.html a save,

and over an app.js I'm going to select and remove all the JavaScript we've bring so

far, but don't worry you can still view and

reference all the code written in this course by downloading the project files.

Writing each piece of code separately will make everything in these lessons

easier to explain.

So now, save your file then go over to the browser and refresh to see the new list.

Now let's get into the console and

create a new variable of myList and assign the list items to it.

So I'll type const myList =

document.getElementsBy TagName and

I'm going to get the LI elements.

So first, let's change the word lavender to purple.

Now, lavender is the third item in the list, meaning that in the collection,

its index is 2.

So over in the console,

I'll type myList 2.style.color = purple.

Great, it changes to purple.

So now let's change the whole list to purple.

Back in app.js, I'll select the list items here again,

with const myList = document.getElementsBy

TagName ( ' l i ' )and we can then

iterate over all of them with a for loop.

So now, inside the loop we can set

each list item to purple by typing myList[i]

.style.color = "purple".

All right, so let's save our file and have a look in the browser.

I'll refresh the page and we see that the list is now purple.

So great work.

Up next I'll show you a way to select elements based on their class.