X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML DOM attributes Property

Element Object Reference 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 Reference Element Object


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook