Latest web development tutorials
 

HTML DOM attributes Propery

< Element Object

Example

Find out how many attributes a <button> element have:

var x = document.getElementById("myBtn").attributes.length;

The result of x could be:

2
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The attributes property returns a collection of the specified node's attributes, as a NamedNodeMap object.

The nodes can be accessed by index numbers, and the index starts at 0.

Tip: Numerical indexing is useful for going through all of an element's attributes: You can use the length property of the NamedNodeMap object to determine the number of attributes, then you can loop through all attributes nodes and extract the info you want.

Tip: HTML attributes are attribute nodes, with all the properties and methods available for the Attribute object.


Browser Support

Property
attributes Yes Yes Yes Yes Yes

Note: In Internet Explorer 8 and earlier, the attributes property will return a collection of all possible attributes for an element.


Syntax

node.attributes

Technical Details

Return Value: A NamedNodeMap object, representing a collection of node's attributes
DOM Version Core Level 1 Node Object

Examples

More Examples

Example

Get the name of a <button> element's second (index 1) attribute:

var x = document.getElementById("myBtn").attributes[1].name;

The result of x could be:

onclick
Try it Yourself »

Example

Find out how many attributes an <img> element have:

var x = document.getElementById("myImg").attributes.length;

The result of x could be:

5
Try it Yourself »

Example

Loop through all attributes of an <img> element and output each attribute's name and value:

var x = document.getElementById("myImg");
var txt = "";
var i;
for (i = 0; i < x.attributes.length; i++) {
    txt = txt + x.attributes[i].name + " = " + x.attributes[i].value + "<br>";
}
Try it Yourself »

< Element Object