HTML DOM attributes Property
Element ObjectExample
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 |
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 »
