Baseline Widely available
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.
A NamedNodeMap
object.
// Get the first <p> element in the document
const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;
Enumerating elements 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.
<p id="paragraph" class="green" contenteditable>Sample Paragraph</p>
<input type="button" value="Show paragraph attribute name and value" />
<pre id="result"></pre>
const paragraph = document.getElementById("paragraph");
const result = document.getElementById("result");
const btn = document.querySelector("input[type='button']");
btn.addEventListener("click", () => {
// First, let's verify that the paragraph has some attributes
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";
}
});
Specifications Browser compatibility See also
NamedNodeMap
, the interface of the returned objectRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4