JS DOM Get Set Attributes

Welcome to another tutorial, here you will learn how to get, set, and remove attributes from HTML elements in JavaScript.
 

Working with Attributes

Attributes are special words used inside the start tag of an HTML element to control the tag's behavior and/or provide additional information about the tag.

The changing, adding, or removing HTML element's attributes is done in several ways in JavaScript.

The different sections in this tutorial will teach you about these methods in detail.
 

Getting Element's Attribute Value

The getAttribute() method is used to get the current value of an attribute on the element.

To get the current value of an attribute on an element you will use the getAtrribute() method.

However, if the specified attribute does not exist on the element, it will return null. This is an example:

<a href="https://www.google.com/" target="_blank" id="myLink">Google</a>

<script>
    // Selecting the element by ID attribute
    var link = document.getElementById("myLink");
    
    // Getting the attributes values
    var href = link.getAttribute("href");
    alert(href); // Outputs: https://www.google.com/
    
    var target = link.getAttribute("target");
    alert(target); // Outputs: _blank
</script>

Try with example

JavaScript makes it possible to select several different elements on a page. Please refer to the JavaScript DOM selector tutorial to learn more.

Setting Attributes on Elements

To set an attribute on a specified element you will use the setAttribute() method. But, if the attribute already exists on the element, then the value will be updated; else, a different or new attribute is added with the specified name and value. The example below is a JavaScript code that will add a class and a disabled attribute to the <button> element."");

<button type="button" id="myBtn">Click Me</button>

<script>
    // Selecting the element
    var btn = document.getElementById("myBtn");
	
    // Setting new attributes
    btn.setAttribute("class", "click-btn");
    btn.setAttribute("disabled", "");
</script>

Try with example

Interestingly, the setAttribute() method can be used to update or change the value of an existing attribute on an HTML element. 

The example illustrates the JavaScript code that will update the value of the existing ‘href’ attribute of an anchor (<a>) element.

<a href="#" id="myLink">Our Blog</a>

<script>
    // Selecting the element
    var link = document.getElementById("myLink");
	
    // Changing the href attribute value
    link.setAttribute("href", "https://readytocode.net/");
</script>

Try with example

Removing Attributes from Elements

To remove an attribute from the specified element, the removeAttribute() method is used.

The example illustrates the JavaScript code that will remove the ‘href’ attribute from an anchor element.

<a href="https://www.google.com/" id="myLink">Google</a>

<script>
    // Selecting the element
    var link = document.getElementById("myLink");
	
    // Removing the href attribute
    link.removeAttribute("href");
</script>

Try with example