The Element.attributes
property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap
, not an Array
, so it has no Array
methods and the Attr
nodes' indexes may differ among browsers. To be more specific, attributes
is a key/value pair of strings that represents any information regarding that attribute.
const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;
You can enumerate through an element's attributes using for...of
. The following example runs through the attribute nodes for the element in the document with id "paragraph", and prints each attribute's value.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Attributes example</title>
<script>
function listAttributes() {
const paragraph = document.getElementById("paragraph");
const result = document.getElementById("result");
if (paragraph.hasAttributes()) {
let output = "Attributes of first paragraph:\n";
for (const attr of paragraph.attributes) {
output += `${attr.name} -> ${attr.value}\n`;
}
result.textContent = output;
} else {
result.textContent = "No attributes to show";
}
}
</script>
</head>
<body>
<p id="paragraph" style="color: green;">Sample Paragraph</p>
<form action="">
<p>
<input type="button" value="Show first attribute name and value"
onclick="listAttributes();">
<pre id="result"></pre>
</p>
</form>
</body>
</html>