How to Get All the Attributes of a DOM Element with JavaScript?

To get all the attributes of a DOM element, you can use the attributes property of the Element interface.

The Element.attributes property returns a map of type NamedNodeMap which contains all the attributes of the element. Each item in the map is an attribute object representing an attribute of the element.

You can then run a for or while loop on the returned map object and use attr.name, attr.value to access the name and value of each attribute node.

For example, let’s say we have a div element in our HTML document with three attributes id, class and data-attr:

<div id="myDiv" class="myClass" data-attr="myData">
    Hello, World!
</div>

To get all the attributes of the div along with their values, first, use the attributes property to get the map object and then run a for/while loop over it to access each item:

// Get the reference to the element
const elem = document.getElementById("myDiv");

// Get the attributes object
const attributes = elem.attributes;

// Loop through the attributes and log their names and values
for (let i = 0; i < attributes.length; i++) {
    
    // Access current item's attribute name and value
    let attrName = attributes[i].name;
    let attrVal = attributes[i].value;
    
    // Print the attribute name and value
    console.log(attrName + ' : ' + attrVal);
    
}

Output:

id : myDiv
class : myClass
data-attr : myData

Method 2: Get All the Attributes using the getAttributeNames() Method

You can also use the getAttributeNames() method along with the getAttribute() method to get all the attributes of an element with their values.

The getAttributeNames() method returns an array containing all the attributes’ names of the given element.

For example, if we call the getAttributeNames() method on the div element that we took in the last example, it will give you an array of attribute names:

elem.getAttributeNames();
// 👉 Output: ['id', 'class', 'data-attr']

On the other hand, the getAttribute() method takes an attribute name as a parameter and returns its value.

for example, if you pass the attribute ‘id’ as a parameter to the getAttribute() method, you will get its value:

elem.getAttribute('id');
// 👉 Output: "myDiv"

That means you can use the getAttributeNames() method to get all the attribute names of the element and then use the getAttribute() method to get their values.

So, let’s take the same div again:

<div id="myDiv" class="myClass" data-attr="myData">
    Hello, World!
</div>

Add the JavaScript:

// Get the reference to the element
const elem = document.getElementById("myDiv");

// Get the attribute names array
const attributes = elem.getAttributeNames();

// Loop through the attributes names array
for (let i = 0; i < attributes.length; i++) {
    
    let attrName = attributes[i];  // Attr Name
    let attrVal = elem.getAttribute(attributes[i]);  // Value
    
    // Print the attribute name and value
    console.log(attrName + ' : ' + attrVal);
    
}

Output:

id : myDiv
class : myClass
data-attr : myData

Conclusion

In this article, we discussed how we can get all the attributes of an element along with their values.

In summary, to get all the attributes of an element in JavaScript, you can use the Element.attributes property.

The attributes property returns a map containing the information of each attribute along with its value.

You can also use the getAttributeNames() method along with the getAttribute() method to get the attribute names and their values respectively.

Thanks for reading.