We have spent several videos looking at how you can select HTML elements, and also how to traverse those elements in the DOM. As a part of those exercises, we've also changed some of the HTML attributes. Well, in this video, we want to summarize what we have done in changing those HTML attributes. And then add a little bit more information. So first, let's summarize. dot notation is the easiest way to read the value of an HTML attribute or write to an HTML attribute.

And so that is the technique that we've used so far. Because it is so simple to do, you grab the node, and then you simply put a dot and then the name of the HTML attribute. For example, we've done that Some like this with images, we've accessed the src attribute, which is the source. And we've changed the image using that attribute. For a tags when after we've selected the a node, and placed it in a variable, then we use dot notation to access the href attribute, which is the link when that is clicked on, that's the page it goes to. We've also access the class attribute by selecting the node and using dot notation to get to the class and, and the style attribute.

Now with this style, it in and of itself consists of multiple attributes that we can change. Therefore, we grab the node dot style, then dot the CSS attribute that we want to change. So those are some examples that we've already done. Now, some HTML attributes are reserved JavaScript keywords. For example, the class attribute, if you remember, we had to enter class name. So in the example in the previous line, no class would not work, we'd have to enter no class name to make that change, because class is a JavaScript reserved word.

Now, in forms, another example would be in forms, the individual elements of a form can have a four attribute. Now for is obviously a reserved JavaScript word because we use it in the for loop. Therefore, we wouldn't be able to access that either. We could do it with the dot notation using node dot html for and that would work. Another way to access these HTML attributes that are also reserved JavaScript. Words is with some functions that have been provided.

So let's take a look at those. Now just be aware as we take a look at these functions, you don't have to only use these with reserved words. You could use them for any HTML attribute. If you prefer to use these methods that have been provided, then go ahead and do so. Let's take a look at what they are there for total. The first one is get attribute so once we select the node, we can use get attribute and then inside of parentheses, we put the HTML attribute as a string.

That will resolve and return the value of that attribute. Set attribute allows us to change that attribute. Inside of parentheses we put the attribute name as a string value and we put the value it should be set to as a string We can also check to see if that attribute even exists on the node. Say we select a node and we're not sure if that attribute is a part of it or not. Well, we can use has attribute to select that. And that can be valuable for all types of attributes, not just the reserved keyword attributes.

And finally, if we want to, we can remove the attribute, that's a great way to simply take the attribute away from the node that we are working with. All right, let's look at some examples. So we'll go to our same selecting exercise HTML page. And then I will open up the console. And let's take a look at some of these. First, let me dock the console on the bottom because we will be changing some things so it'll be nice to be able to see that change happen.

So first, let's use or Let's set a variable node equal to query selector I'm going to use query selector because I just want to select the first element that matches this criteria. And I'm going to select an element that has the class bullet blue, therefore I use the.as specifies class. And all three of those span tags, if you may remember the ID, the tag and the CSS class. The reason there are different colors because they are enclosed within a span tag, and then we have a class associated with it. So we'll grab the first one here. And now if I display node, I can see that I've got the first one.

All right. Now let's just check to see if that node has the attribute class. And it returns a true so this is going to return a true or false so you could use this as part of an IF conditional if you needed to check to see If the attribute exists, could simply use has attribute for that. Now let's get the attribute value. Let's return that to a variable. So I'm going to set node class equal to node dot get attribute.

And then inside of quotes, I'll put class as the attribute I want to retrieve. And then if I display the variable, I can see that it retrieved the value of the class attribute, which happens to be bullet blue. Now let's change that. lets you set attributes. That's really going to change this class and we're going to change it to bullet red. Now this class is already defined, and it should cause the ID to be red as opposed to blue.

Go ahead and press return. And sure enough, as you can see, Id changed to red. All right, one more. We're going To look at, and that is the Remove attribute. Now what do you expect should happen? When we remove the attribute and attribute, we want to remove his class, we have to specify which attribute we want to remove.

Well, the color should be completely removed, right? Because if we remove that attribute if we remove class from that span tag, there's no longer anything to define it. Therefore, it should be the same as the rest of the text. So we press return. Sure enough that removed it. So we've looked at has attribute get attribute set attribute and remove attribute.

Those can be used with any HTML attribute as you're trying to change a node. But they weren't especially great with HTML attributes that are also JavaScript reserved words. All right, let's move on to the next topic.