JS DOM Change Element Attributes

HTML DOM allows JavaScript to get and change the attributes of HTML elements.

Get the attribute value of the element

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

the following example retrieves the anchor element'shrefandtitleThe value of the attribute:

var link = document.getElementById("demo");
var href = link.getAttribute("href");
var title = link.getAttribute("title");

Set attribute on the element

setAttribute()method is used to set the value of the attribute on the specified element.

If the attribute already exists, the value is updated; otherwise, a new attribute with the specified name and value is added.

This example setshrefThe value of the attribute is set for the anchor element:

var x = document.getElementsByTagName("a")[0];
x.setAttribute("href", "https://www.oldtoolbag.com/css3/);

Similarly, you can usesetAttribute()method to update or change the value of the existing attribute on the HTML element.

document.getElementsByTagName("input")[0].setAttribute("type", "text");

Remove attributes from the element

removeAttribute()method is used to remove attributes from the specified element.

This example removes thehrefProperty:

document.getElementsByTagName("a")[0].removeAttribute("href");