Categories:
Tweet

Accessing HTML attributes using the DOM

Among the many talents of the DOM is its ability to retrieve and modify attributes inside HTML elements. Using just a small set of methods, you can intuitively get the width of a DIV, change the src of an image, or even remove the background image of the document!

The DOM supplies the following 3 methods to tackle HTML attributes:

-getAttribute()
-setAttribute()
-removeAttribute()

These methods can be used on any element that supports attributes.

-getAttribute()

GetAttribute() retrieves the corresponding value of an attribute. If the attribute does not exist, an empty string is returned. For example:

<img id="myimage" src="test.gif">

<script type="text/javascript">
//returns "test.gif"
var getvalue=document.getElementById("myimage").getAttribute("src")
</script>

-setAttribute()

As the name implies, setAttribute() dynamically modifies the value of an element's attribute. The method takes two parameters- the name of the attribute to set, and its new value. Using the same <IMG> example above:

<script type="text/javascript">
//image src is now "another.gif"
document.getElementById("myimage").setAttribute("src","another.gif")
</script>

-removeAttribute()

A whole new concept, removeAttribute() allows you to remove entire HTML attributes from an element! This is particularly handy when an attribute contains multiple values which you wish to all erase:

<div id="adiv" style="width:200px;height:30px;background-color:yellow">Some Div</div>

<script type="text/javascript">
//adiv now contains no style at all
document.getElementById("adiv").removeAttribute("style")
</script>

You're out of style adiv!