HTML DOM Attribute Object

Attr object

The Attr object represents attributes in the Element object.

HTML attributes always belong to HTML elements.

In most DOM methods, you may retrieve attributes directly in the form of a string (for exampleElement .getAttribute(), but some functions (such as Element.getAttributeNode()) or iterate over the methods of the given Attr type.

NamedNodeMap object

The NamedNodeMap object represents an unordered collection of Attr objects.

Nodes in the NamedNodeMap can be accessed by name or index number.

Attribute and method

Example

This example displays all attribute names of the IMG element:

var attrList = document.querySelector("img").attributes;
var text = "";
　　　
for (let x = 0; x < attrList.length;++) {
　　　　text　+= attrList[x].name　+　"<br>";
}

This example displays all attribute values of the IMG element:

var attrList = document.querySelector("img").attributes;
var text = "";
　　　
for (let x = 0; x < attrList.length;++) {
　　　　text　+= attrList[x].value　+　"<br>";
}

This example changes the value of the src attribute of the IMG element:

var image = document.querySelector("img");
image.getAttributeNode("src").value = "heart.jpg";