Playing with HTML elements is common in the DOM, and attributes aren't behind either. Accordingly in this chapter we'll look at all the HTML attribute related stuff in the HTML DOM.
Attribute names and values
Before beginning any discussion on attributes let's first consider the HTML code below. We will base all our explanations on it.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.blue {color:blue}
.gold {color: gold}
#heading {text-transform: uppercase;letter-spacing: 1px}
</style>
</head>
<body>
<h1 class="blue" id="heading" title="A heading">A heading</h1>
</body>
</html>
So what we simply have here is a style
tag to define CSS styles for HTML elements and an h1
element with attributes class
, id
and title
. With the HTML all set up we can now move on to explore DOM attributes.
The attributes property
For a given element node, the attributes
property holds all the attributes and their related data for that specific node. For our h1 element it would look something like this.
var ele = document.getElementById("heading");
console.log(ele.attributes);
// NamedNodeMap {0: class, 1: id, 2: title, class: class, id: id, title: title, length: 3}
The property returns a NamedNodeMap
object that has both numeric and named keys to access different attributes. The length
property holds the total number of attributes the selected element has. For each attribute we have an Attr
object containing further information regarding it, like its name, its value etc. Let's demonstrate this on a bigger picture for our h1
element.
var ele = document.getElementById("heading");
// the total number of attributes
ele.attributes.length; // 3
// accessing the class attribute
ele.class.name; // "class"
ele.class.value; // "blue"
// accessing the id attribute
ele.id.name; // "id"
ele.id.value; // "heading"
The name
property gives the name of a given attribute and value
gives its value. We can even check for a given attribute by looping through all of them and matching against the one we want, and this is the place where numeric keys can help.
We have seen class
and id
attributes in action - now go on and explore the Attr
object for title
yourself in the console.
And in this way we can explore any attribute on any HTML element be it a predefined one, like class
, id
etc or even a custom one.
attribute
property. Try swaping the positions of title
and class
, and then see what you get.Checking for attributes
Checking for an attribute
To check if an element has a given attribute we can use the hasAttribute()
method on the element node. The method simply takes the name of the attribute to check for (case-insensitively) and returns true or false depending on whether it exists or not.
h1
to prevent repeating the same thing again and again. You would however definitely have to write it in your code!ele.hasAttribute("class"); // true
ele.hasAttribute("CLasS"); // true
ele.hasAttribute("CLasSs"); // false
ele.hasAttribute("id"); // true
ele.hasAttribute("random"); // false
In line 2 above we wrote CLasS
, but still the method returned true because the matching is case-insensitive.
Checking for any attributes at all
To check if an element has any attributes at all we can use the hasAttributes()
method. Since it doesn't check for any specific attribute it doesn't take any arguments.
ele.hasAttributes(); // true
document.body.hasAttributes(); // false
Adding attributes
To add attributes to a given element we can either use the setAttribute()
or setAttributeNode()
method. Both of them are available on element nodes.
setAttribute()
For setAttribute()
it takes two arguments. The first one is the name of the attribute to add, and second one is it's value. Just think of the flow in which you write an attribute in HTML name="value"
i.e from left-to-right going from name-to-value.
The method will overwrite existing attribute values if the given attribute already exists:
ele.setAttribute("contenteditable", "true") // makes the element editable
ele.setAttribute("class", "gold"); // class overwritten
setAttributeNode()
The setAttributeNode()
method sets a given attribute node on the selected element. So how to create attribute nodes?
The document.createAttribute()
method creates an Attr
attribute with the provided name whose value has to be set up explicitly using the value
property. Remember the Attr
object? We discussed it just a few moments ago. Let's see how to do the same thing as above using setAttributeNode()
:
var att = document.createAttribute("contenteditable"); // an attribute node created
att.value = "true"; // attribute value set
ele.setAttributeNode(att); // attribute added to ele
att = document.createAttribute("class");
att.value = "gold"; // attribute value set
ele.setAttributeNode(att); // attribute added to ele
Clearly, as you can see, the setAttribute()
method is shorter and simpler than setAttributeNode()
.
Removing attributes
The removal of attributes can be done simply using removeAttribute()
method. Just give it the name of the attribute to be removed and if it is exists, it will remove it completely from the provided element.
ele.removeAttribute("class");
Dealing with classes
Certain attributes in the HTML DOM are given preference over others like class
, id
, title
, contenteditable
, in that they have their specific properties directly on their element node. This mean that these attributes can be accessed without going through the attributes
object - it is much more convenient to use these direct properties than attributes
. The first in this list is the class
property and consequently we will be going over it in detail first.
className
The className
property, of a given element, holds the value for its class
attribute. If the attribute doesn't exist or is empty className
will return ""
.
// Getting class values
ele.className; // blue
document.body.className; // ""
// Setting class values
ele.className = "gold";
As you can see className
is much simpler than ele.attributes.class.value
, so why not use it instead! The value of className
can also be used to add classes to elements. Just use the +=
operator:
ele.className = " gold";
ele.className; // "blue gold"
" gold"
, so that the classes can be differentiated between. gold
would've meant class="bluegold"
and therefore the class now is a single one - bluegold
.We can also use className
to remove class name by using string replace methods but a much better approach in these cases, including adding classes, will be using the classList
object.
classList
The classList
object is the winner if you want to simply check for, add, replace, toggle, or remove classes. It is a DOMTokenList
object with several methods to do the above mentioned and many more taks. Follow along the comments in the following code snippet.
// Number of classes
ele.classList.length; // 1
// Add a class
ele.classList.add("gold");
// Remove a class
ele.classList.remove("blue");
// Replace the first class with the second one
ele.classList.replace("gold", "greyBg");
// Toggle class
// If it is set, remove it
// If it is not set, add it
ele.classList.toggle("gold");
ele.className; // "greyBg gold"
ele.classList.toggle("gold");
ele.className; // "greyBg"
You can relate to the names of the method, their purposes. These ae just some methods of classList
, the rest of them is your task to explore.
Some other attributes
Besides class
many more attributes, as we said earlier are given preference to have their direct properties and they are as follows:
ele.id; // "heading"
ele.title; // "A heading"
ele.contentEditable; // "inherit"
ele.lang; // ""
ele.src; // undefined
ele.href; // undefined
In the example above src
, href
are usually used for images, scripts, frames, anchors etc. All the properties can be used to get or set the values for respective HTML attributes.
In conclusion
And with this we conclude our attributes chapter. It was surely another long one and may have made you think that DOM is pretty tricky. Well you might be feeling this because you've not practiced enough. Go on to the console and play around with HTML attributes. Add styles for various of them and as add or remove them see the effect live on your browser.