Set, get, remove data attributes in JavaScript?

If you are working with DOM (Document Object Model). There are many operations to retrieve the data from the attributes of an element. There are three common operations that we often perform while working with DOM i.e. how to change (set, get, and remove) the data attributes of an element.

In this tutorials, you'll learn how to set the data attributes of an element i.e. setting new title, link, image source of an element. You'll also learn how to get the values of data attributes of an element i.e. getting the value of 'src', 'href' attributes of an element. Now, what If you want to remove the attributes of an element. You can also remove the attributes of an element. In short, you can dynamically change the data attributes of an element with JS.

First of all, we need to select an element based upon its id, class or tag name. Then, we will apply the methods to get our tasks done. We can select an element with the following methods.

 document.getElementsByClassName('clasName')[0]
 document.getElementsByTagName('img')[0]
 document.getElementById('idName')[0]

Set data attributes (setAttribute())

We can dynamically set the data attributes of an element as a result of some event i.e. onclick, onload, onunload, oninput. For example, if we want to change the value of 'src' attribute of an <img> tag as a result of click.

We'll use setAttribute("attributeName", "attributeValue") method to set the attribute.

<img src="oldmage.png" class="imageCont"/>

<script>
document.getElementsByClassName('imageCont')[0].onclick = function ()
{
	document.getElementsByClassName('imageCont')[0].setAttribute("src", "newImage.png");
}
</script>

In this case, we are setting the 'src' attribute of an element to 'newImage.png'. You may also set the other data attributes of an element.

Get data attributes (getAttribute)

We can dynamically get the attributes of an element as a result of some event i.e. onclick, onload, onunload, oninput. For example, if we want to get the value of 'src' attribute of an <img> tag as a result of click.

We'll use getAttribute("attributeName") method to get the value of an attribute.

<img src="oldmage.png" class="imageCont"/>

<script>
document.getElementsByClassName('imageCont')[0].onclick = function ()
{
	document.getElementsByClassName('imageCont')[0].getAttribute("src");
}
</script>

In this case, we are getting the value of 'src' data attribute of the <img> tag.

Remove data attributes (removeAttribute)

We can remove the attributes of an element as a result of some event i.e. onclick, onload, onunload, oninput. For example, if we want to remove the class from an element.

We'll use removeAttribute("attributeName") method to remove the class from an attribute.

<div> class="imageCont">This div has 'imageCont' class what we want to remove as a result of click.</div>

<script>
document.getElementsByClassName('imageCont')[0].onclick = function ()
{
	document.getElementsByClassName('imageCont')[0].removeAttribute("class");
}
</script>

In this case, we are removing the class from an element as a result of click event.

Summary

Now, you can play with the data attributes of an element. You can set the values of attributes of an element. You can change or remove the attributes an element. setAttribute("attributeName", "attributeValue"), getAttribute("attributeName"), removeAttribute("attributeName") are the three methods to retrieve the data attributes.