7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 12Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Working With Attributes

Attributes contain information that complements the elements they're attached to. In this lesson, you'll learn how to get and set attribute values.

2.3 Working With Attributes

Now that you know how to reference an element object, either by selecting an existing element in the document or by creating a new element, we can now talk about working with attributes. Because really, attributes are one of the primary ways that we manipulate an element, especially when it comes to working with the element's style. So let's start by creating a copy of the creating file from the previous lesson, and let's rename that copy to attributes. And then let's change the title, this is 2.3. And this is going to be just, attributes. All right, so there are essentially two types of attributes. There are attributes that have a JavaScript property that maps directly to that attribute, and then there are attributes that don't. [LAUGH] That's kind of simple, but let's look at this. Let's set a id for our ul element. And we can do that with a property called id. This maps directly to the id attribute. And in our hardcoded HTML version, we didn't have an id, so we're going to set a new one here, and this is a string value. Whatever we set as the id is going to be the id for that element. So I'm going to give this an id of first-list. And if we look at this in the browser, then we will, of course, see first, list as an id for our ul element, right there. And it's just that simple. Now, there are many other properties that map to HTML attributes. Like for example, there's a name property, but that's really only useful for form control, so we won't worry about that here. But let's talk about the class attribute, because in our original version we had a class of list applied to this element. So you might think that we have this class property. And unfortunately, it's not that simple. Because the word class is actually a special keyword in JavaScript. Now, JavaScript is kind of weird in that you can use keywords as property names. However, whenever the powers that be were designing all of this, they chose not to use class. And instead, they used a term called className. And this class name property maps directly to the HTML class attribute. So once again, whatever we set as the className property is going to be set as the class attribute. It's not additive, it's not subtractive. It's a straight-up assignment. So we have just set the list class as the class for this ul element. And if we look in the browser, we can see that that is indeed the case. Now, there's more ways that we can manipulate the style, and we will talk about that here in a moment. But let's first of all talk about setting and getting attribute values, because the vast majority of attributes don't have a JavaScript property that maps directly to that attribute, especially a custom data attribute. For example, let's go for the li1 element, and let's say that we want to give it a attribute called data-record-id. Something that we would assume that this is coming from a database. So we wanna keep track of the record id in the database. And we want to store that in the HTML in case if we need to retrieve that at a later time. Well, to set that attribute value, we have a method called setAttribute. And for the vast majority of attributes, this is how we have to set an attribute value. So we call setAttribute, we pass in the name of the attribute that we want to set. So this is data-record-id. And then the second argument is the value for that attribute, so 1 in this case. And so if the first li element has an id of 1, the second one is gonna have an id of 2. So if we look at this in the browser, we can see that our li elements now have these data-record-id attributes, and they are set to 1 and 2. And if we can set an attribute, it kinda goes without saying that we can get the attribute as well. So let's get the li1 record id. And we will do so using the aptly named get attribute. We pass in the name of the attribute that we want to retrieve, and that's going to get the value of that attribute. And let's go ahead and write this to the console so that we can see what is going to be returned here. So if we look at the console, we see the value of 1. That's what we would expect to see. But let's look at this. Let's look at the type of this. If we say type of and then our variable, we're going to see that this is a string. Now this is very important, because whenever we set the attribute value, we used a numeric value. But whenever we retrieved that back, it's a string. And that makes sense because attributes in HTML are string. In fact, everything in HTML's a string. So whenever you set an attribute value, it is going to be serialized. It's going to be converted into a string. So that means if we needed to work with this value as a numeric value, we would have to parse it as an integer so that then we could work with it as an integer value. And of course, the parseInt function would give us that capability, and we would be good to go there. But for the sake of clarity, let's get rid of that, just so that as far as the code download is concerned, we have just getAttribute here. And so that is the basics for working with elements in the DOM. In the next lesson, we're going to focus on style. We're going to manipulate the style using the style attribute, or the style property that maps to the style attribute. You'll also learn how to manipulate the classes that are applied to an element.

Back to the top