Transcript

          
        
          So in addition to changing the inner text and the inner HTML of an element, we can also get and update

          attributes of HTML elements.
          
          So if we take a look in the index.html, we can already see I've created this HTML code.
          
          We have an a tag right here with an href attribute going to Google.com and this is the text.
          
          Then we have a P tag with a class of error and this text.
          
          So if we take a look at this in the browser, it just looks something like this.
          
          So this is an HTML attribute href and this is an HTML attribute.
          
          There's loads of different types of HTML attributes that we can either get in JavaScript or set in JavaScript.
          
          So let's have a look at how we can do that with these elements.
          
          First of all, we need to get a reference to the element that we want to change.
          
          So I'm going to say const link is equal to documents, dot query selector and we want the anchor tag.
          
          So that is going to go and grab the first anchor tag we come to, which is this and store it in this
          
          reference right here.
          
          So now we can use that.
          
          And what I'm going to do first of all is use get attribute to get the href attribute right here.
          
          So whatever the value is here and I'm going to log this to the console, so we'll say console dot log,
          
          then we want the link and then we want to use a method called get attribute.
          
          And this gets us an attribute.
          
          Now we need to pass in as an argument what attribute we want to get as a string, and we want the href
          
          attribute.
          
          That's what this thing is called.
          
          So if we save this now and preview, we should see this over here.
          
          So that is the value of the href attribute and that's how we get an attribute.
          
          Okay, then so what if we want to change the attribute or set an attribute?
          
          Well, I can take the link then.
          
          I can use a method called set attribute instead of get attribute.
          
          And this time it takes two arguments.
          
          First of all, what attribute do I want to change?
          
          Well, I want to change the href attribute.
          
          Secondly, what do I want to change it to?
          
          What is the value of this attribute?
          
          Well, it's going to be https double forward slash then w w w dot the net ninja.co.uk.
          
          So if I save this now and preview, if I inspect this element, then we're going to see the net ninja.co.uk
          
          as the value of this attribute.
          
          Now I'm also going to change the inner text so we'll say link dot inner text and set that equal to the
          
          net ninja website.
          
          Okay.
          
          So now we can see the net ninja website and this is where it goes.
          
          So that's an example of how we can change an attribute to something else and then that's going to automatically
          
          update in the browser.
          
          Okay.
          
          So let's do another example.
          
          What I'm going to do is come down here and say const message is equal to documents dot query selector
          
          again, and this time we're going to grab a different element.
          
          I can't type at the minute selector, and the element we're going to grab is going to be the p tag down
          
          here.
          
          So let me pass in P right there.
          
          And what I'm going to do, first of all, is log out the value of the class attribute, because this
          
          is still an HTML attribute.
          
          We're just going to grab that value and log it to the console.
          
          So console dot log and we want the message and we're going to use the method get attribute to get an
          
          attribute.
          
          And the attribute we want to get is the class attribute.
          
          So let's see what happens over here.
          
          We can see error, which is the class of that tag.
          
          So we can also change this.
          
          I'm going to say message dot, set, attribute, oops, set attributes.
          
          And we're going to set the class attribute and we're going to set it to a value of success.
          
          So instead of error now, it should be success.
          
          If we go to elements, we can see now it has a class of success.
          
          Awesome.
          
          So this would be useful in a case where, for example, a user fills out some kind of form.
          
          If there's an error, we can change the class of the form to error, to maybe make it red or something
          
          like that.
          
          And if it's successful, we can change the class of the form to success to make it green around the
          
          border or something like that.
          
          Okay, so if we want to set an attribute to an HTML element that doesn't already exist, we can do that
          
          as well.
          
          So far when we've been setting attributes here, we've been setting attributes using attributes which
          
          already exist in the HTML.
          
          Now, for example, I could add on a style attribute from JavaScript to this P tag, and I can do that
          
          using exactly the same method.
          
          It's just set attribute and I'm going to set the style attribute.
          
          And inside here we'll just say the color is green.
          
          Okay?
          
          So it doesn't matter that this attribute doesn't yet exist on this tag.
          
          If it doesn't exist, JavaScript is just going to create it.
          
          So if we save it now and preview, we can see the text is now green because we now have this style attribute
          
          right here applied to it.
          
          So any HTML attribute you have in your tags, you can either get or set this way and that is going to
          
          be very helpful in a lot of cases.