In this movie, we're going to look at how to select elements from the DOM using the ID, the tag, or the CSS class name. Now there are three different methods which we can do this with. So let's take a look at those first. First we have document get element by ID. And then inside of the parentheses, we specify the ID that has been assigned to the tag that we're trying to retrieve. Now the ID should be unique.

So there should not be more than one element in the DOM that has the same ID. The second method we'll look at is get elements by tag name. Now notice the difference in this method, instead of element singular its elements by tag name. That is because this will return an array there obviously could be more than one tag of a certain type within an HTML document. And so when it retrieves that tag from the DOM, it will retrieve all of them. So it will be in an array.

If there is only one to retrieve, they'll just be one item in that array. And the third method is get element by class name. Now, so with CSS, you're able to assign classes to tags. And those classes defined in a separate CSS document. Determine how that tag looks. Well, we can use those class names to select elements in the DOM as well.

We simply specify the class name inside of parentheses. Now notice the elements is plural as well. That means that this will return an array because there could be more than one element that has the same class and it will return all that are associated with that class. Now let's look at some actual examples of this. So here is a simple HTML page. And this is what I will be using to illustrate these three methods.

Now, before we start doing that, I'm going to jump to sublime. And we're going to take a look at the HTML that defines that particular page. So this is it here. Pretty simple. We have our head tag. With a title, we have a link to a stylesheet.

And then we also have a script tag, which which links to the JavaScript file that I use for controlling how I'm presenting information. We have a header tag right now, the image inside the header tag Been commented out. Then we have a div tag. And that div tag has an ID. So when we're talking about the idea of a tag, this is what I'm referring to, we can assign IDs to tags. Down here inside the list.

You'll also see IDs associated with each list item. Now inside this general div, there's an h1 for selecting exercises. As you can see, that's this here. then below that, there's another div, which we've assigned a class to bullets, and that determines how these bullets look. And then a ul and an Li tags inside of that to create the list. And then at the bottom, there is a footer with an image.

So that's the HTML page we will be working with. So what I'm going to do is open up the console and let's start using some of these methods. So first off, I want to select the second bullet in the list. Now I'm going to dock our console at the bottom, so we are able to see better what's going on. So I'm going to declare a variable bullets and I'm going to set it equal to document dot get element by ID, B to. Now the Id just to reference back to the HTML is right here, that's the ID we're going to grab.

So it's going to grab this entire tag that Li that second Li. So we'll press return and it places a reference to that within the bullet variable. Now we can use that variable to modify that tag. For example. We can Do a lot of different things to this style that is associated with that tag using bullet dot style dot. And then we have a lot of different style attributes we can use to modify.

And if you type that in, you can see those by scrolling through what pops up in the console, a lot of different things that we could do. I'm going to simply change the visibility books and I'm going to set the visibility to hidden. That's one of the values that can be associated with visibility in styles. Now, now the different definitions that are associated with style are the same as what you may be used to if you've done any CSS And so therefore the values are also the same as what you've done with CSS. So to manipulate using style, you need to know a little bit CSS visibility happens to be one thing we can do, and one of the values is hidden, which will hide that particular tag. So if I press return, it disappears.

I can bring it back, press the up arrow key. I'm going to change hidden to visible and there it comes back. Something else is possible to change is, instead of changing individual attributes, using style, I can change the class, the CSS class that is associated with it. And so I'm going to do that with class name. And I'm going to set class name equal to a class. I've defined it In the CSS, let me jump out to that really quick.

Here's my CSS file. Bullet blue is something I've find in here and it simply changes the color to blue is off. So jumping back, I'm going to press return. Sure enough, it makes the color blue. All right, let's look at another one of the methods. Let's select by tag name.

So I'm going to declare variable. And I'm going to get element by tag name. elements by tag name, I should say. And the tag I'm going to grab is a span tag. Let me jump out to sublime really quick, just so you can see that inside the HTML, if you'll notice, there is a span tag on these three bullet items. And they basically they define these items which are in blue, and I've associated a class with those so that they would be blue.

So I want to select those span tags. So I press return. Now let me type in spans. And as we can see, there are three items in in the console as I mouse over them, they show up up here in the HTML page. Now let's do something with that. Let's change these to red.

I have another class I've defined instead of the color blue, it's the color red. So let's use a for loop. I equals zero, i less than spans dot length, i plus plus, open curly brace. Now I'm going to do shift Left, enter, that will allow me to go to a new line without executing, now I don't have to go to a new line, I could continue to type what that for loop is on a single line, that would be fine. As long as I separate things with semicolons and whatnot, it would still work. But it makes a little bit more readable to go to a new line.

On the second line, I'm going to go do spans and this is array, remember, so I use the square brackets with an eye to cycle through each element in that array. And I'm going to set that, whoops, I got to do dot class name, I'm going to set the class name of that element equal to bullet read. That's the class other class I've defined. Now I'm going to just type a curly brace at the end there to close that for loop. press return. And sure enough, as you can see an HTML page that they turned red Alright, let's select another one.

Let's select the h1. So var h1 equals document dot get elements by tag name. And I'm going to put h1 in, in parentheses and press return. Now if I type h1, notice, there's only a single element in this array. And that's the h1, because there is only one h1 tag in this entire HTML document. So I have a single element, but I still have to specify h1, zero.

So I can do something with that because it's an array, dot and so I'm going to use style to change the color. I'm going to set the color equal to let's do pink. That will stand out and there we go. We've changed The h1 to pink. Alright, one more method we need to look at. And that's selecting by a CSS class.

Now, if you remember, well, before I do that, let me refresh this HTML page to get back the way we were. Remember, when I make those changes in the console, those changes only apply until the HTML page is refreshed. Now I've jumped out to the HTML page, and we're going to select by class name, I want to select these spans again. But this time I'm going to use a class the class that I've assigned to them is bullet blue. So let's try that and then declare my variable spans again equal to document. Dot, get element by class name, get elements by class name, and the class is bullet blue.

I'm going to press return and then Let's use let's do a for loop again. But this time let's change the color using this style. Shift Enter to go to new line and then spans Hi. And this time we're going to do dot style dot color. equals and let's set it to green and close closing curly brace. And I press return.

And sure enough those changed to green. Those are three methods for selecting elements in the DOM, the get element by ID the get elements by tag name and the get elements by class. three different ways to select. Let's move on to the next topic.