Get all Attributes of a DOM Element using JavaScript

# Get all Attributes of a DOM Element in JavaScript

To get all of the attributes of a DOM element:

Use the getAttributeNames() method to get an array of the element's attribute names.
Use the reduce() method to iterate over the array.
On each iteration, add a new key-value pair containing the name and value of the attribute.

Here is the DOM element we will get the attributes of.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <!-- 👇️ -->
    <div id="blue" data-id="example" class="box">Box 1</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const element = document.getElementById('blue');

// ✅ Get object of all {name: value}
const attrs = element.getAttributeNames().reduce((acc, name) => {
  return {...acc, [name]: element.getAttribute(name)};
}, {});

// 👇️ {id: 'blue', 'data-id': 'example', class: 'box'}
console.log(attrs);

console.log(attrs['id']); // 👉️ blue
console.log(attrs['data-id']); // 👉️ example

get all attributes of dom element

The code for this article is available on GitHub

We used the Element.getAttributeNames() method to get an array of the element's attribute names.

index.js

Copied!
const element = document.getElementById('blue');

// 👇️ ['id', 'data-id', 'class']
console.log(element.getAttributeNames());

The next step is to use the Array.reduce method to iterate over the array of attribute names.

We passed an empty object as the initial value for the accumulator variable.

The value we return from the callback function gets passed as the accumulator on the next iteration.

We assign the attribute name as a key on the object and use the name to get the corresponding attribute value via the Element.getAttribute() method.

index.js

Copied!
const element = document.getElementById('blue');

// ✅ Get object of all {name: value}
const attrs = element.getAttributeNames().reduce((acc, name) => {
  return {...acc, [name]: element.getAttribute(name)};
}, {});

// 👇️ {id: 'blue', 'data-id': 'example', class: 'box'}
console.log(attrs);

After the last iteration, the object will contain a mapping of all the element's attribute names to the element's attribute values.

# Get all Attributes of a DOM Element as an Array

If you need to get an array of a DOM element's attribute values, you have to:

Use the getAttributeNames() method to get an array of the element's attribute names.
Use the map() method to iterate over the array.
Get each attribute value using the getAttribute method.

index.js

Copied!
const element = document.getElementById('blue');

// ✅ Get array of all attribute values
const attrValues = element
  .getAttributeNames()
  .map(name => element.getAttribute(name));

console.log(attrValues); // 👉️ ['blue', 'example', 'box']

get all attributes of dom element as array

The code for this article is available on GitHub

It would have been more intuitive and direct if a getAttributeValues method existed, but this approach gets the job done.

The function we passed to the Array.map() method gets called for each element in the array of attribute names.

On each iteration, we use the getAttribute method to get the value of the attribute and return the result.

If you need to get an array containing the names of the element's attributes, use the getAttributeNames() method.

index.js

Copied!
const element = document.getElementById('blue');

const attrNames = element.getAttributeNames();
console.log(attrNames); // 👉️ ['id', 'data-id', 'class']

I've also written an article on how to get elements by data attribute.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Get all Attributes of a DOM Element using JavaScript

# Get all Attributes of a DOM Element in JavaScript

# Get all Attributes of a DOM Element as an Array

# Additional Resources

Borislav Hadzhiev