Javascript Reference - HTML DOM attributes Property
The attributes property returns a collection of the
specified node's attributes, as a NamedNodeMap.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
attributes |
Yes | Yes | Yes | Yes | Yes |
Syntax
node.attributes
Return Value
A NamedNodeMap type object representing a collection of attributes.
Example
The following code shows how to get how many attributes a <button> element have.
<!DOCTYPE html>
<html>
<body>
<button id="myBtn" onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--from ww w . j a v a2 s .c o m-->
var x = document.getElementById("myBtn").attributes.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code shows how to get the name of a <button> element's second (index 1) attribute.
<!DOCTYPE html>
<html>
<body>
<button id="myBtn" onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--from w ww . j av a 2 s .c o m-->
var x = document.getElementById("myBtn").attributes[1].name;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 3
The following code shows how to get the count of attributes an <img> element have
<!DOCTYPE html>
<html>
<body>
<!-- w w w . j a v a 2 s . c om-->
<img id="myImg" alt="Flower" src="http://java2s.com/style/demo/border.png" width="150" height="113">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myImg").attributes.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 4
The following code shows how to loop through all attributes of an <img> element and output each attribute's name and value.
<!DOCTYPE html>
<html>
<body>
<img id="myImg" alt="Flower" src="http://java2s.com/style/demo/border.png" width="150" height="113">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!-- w w w .j a v a 2s . c o m-->
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>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 5
You can obtain a collection containing all of the attributes.
attributes property returns an array
of Attr objects.
The properties of the Attr object are
described in the following table.
| Properties | Description | Returns |
|---|---|---|
| name | Returns the name of the attribute | string |
| value | Gets or sets the value of the attribute | string |
<!DOCTYPE HTML>
<html>
<body>
<p id="textblock"
class="Survey numbers"
data-Survey="apple"
data-sentiment="like">
This is a test.<!--from w w w.j ava2 s . c o m-->
</p>
<script>
var elem = document.getElementById("textblock");
var attrs = elem.attributes;
for (var i = 0; i < attrs.length; i++) {
document.writeln("Name: " +
attrs[i].name +
" Value: " +
attrs[i].value);
}
attrs["data-Survey"].value = "banana";
document.writeln("Value of data-Survey attr: " +
attrs["data-Survey"].value);
</script>
</body>
</html>