To get all the attributes of a DOM element, we can use the attributes property on the element using JavaScript.
Let's say we have a h1 tag with custom attributes data-color and data-maxlength like this,
<h1 data-color="red" data-maxlength="50">Heading</h1>
Let's get all the attributes using the attributes property on the element.
// first get the reference to h1 element
const h1 = document.querySelector("h1");
// get all attributes
// using attributes property
const h1TagAttributes = h1.attributes;
console.log(h1TagAttributes);
The property returns the attributes as NamedNodeMap array-like Object.
So to make it easy let's map through each attribute using the for...of looping statement and get each attributes name and value.
// first get the reference to h1 element
const h1 = document.querySelector("h1");
// get all attributes
// using attributes property
const h1TagAttributes = h1.attributes;
// loop through each attribute
for (let attribute of h1TagAttributes) {
console.log(attribute.name); // attribute name
console.log(attribute.value); // attribute value
}
See live example in JSBin.
