Access and change attributes

- [Instructor] The attributes property is read-only, just like classList, and attributes have the additional complication of often appearing in attribute value pairs. As an example, the href attribute in links always has a URL value. While we can access the attributes of an element using the attributes property, we need methods to actually work with them, so we can assign attribute names and attribute values separately. Here we have four methods to choose from. Past attribute checks to see if the specified attribute is present, and returns a Boolean for true or false.

Get attribute returns the value of the specified attribute. Set attribute has two arguments, the attribute name and its value, and either changes the value of the specified attribute if it exists or adds a new attribute if none is present. And finally, remove attribute removes the specified attribute. These methods work for all attributes on any element. In the exercise files for this movie, 05_05, you'll find the same site we've been working with so far in this chapter.

If you scroll down a bit, you'll find this CTA section that has a link. I want to use JavaScript to ensure this link opens in a new tab, and that's done using the target attribute and an underscore blank value. To target the element in JavaScript, I first need to look at the DOM tree. Here you see it's a link inside a div, with a class CTA, and right now, this link does not have a target attribute. In my code, I have a js folder and a script.js file underneath it, that's currently empty.

Here I'll start off by setting up a new constant that points at the element we'll be working with. I'll set that to document.querySelector, and here we're targeting .cta a. I'm setting this up as a constant, because we're never going to change what element we'll be working with here, so the value inside these contents should never change. You'll see me do this later on too, when I'm referring to elements within a page.

Now we can use the attributes property to quickly take a look at what attributes are currently applied to this element. Here I'll just refer to my new constant, and then ask for the attributes property. Save that, go back to the browser and the console, and here, we get a NamedNodeMap with an array of all the attributes applied to the current selected element. In this case, the only attribute that's currently applied is the href attribute.

Now we can set up a conditional statement to test whether we have the target attribute, and if not, we'll apply it to the element. So if CTAELEMENT.hasAttribute, this is the method, I'm looking for the target attribute, that's the case, then we'll simply console.log out CTAELEMENT.getAttribute target, and this will give us the value of the target attribute.

If not, so else, we grab CTAELEMENT, again, and setAttribute. Here we provide both the attribute name, target, and attribute value, underscore, blank. Save that, go back to the browser. Now you'll see, the node map has two elements, href and target, and if we go to elements, here, we have a, with href, and target equals underscore blank.

We can also test to make sure our conditional statement works if the target attribute already exists, by going into index.html, scrolling down to the CTA section, which is here, and applying the attribute. And now if I go to console, I also get this console log of the value of that attribute, in this case, underscore blank. Now this example of a target attribute on a link element may seem a little too simplistic, but the reality is, this method for finding attributes on an element and changing them in some way is identical, regardless of what attribute you're working with.

I often use these attribute methods to add or change standard attributes like links and custom data attributes, and you can use them to address any attribute on any element in your entire document. We'll use these methods again to work with attributes later, so you'll get plenty of practice.