Get all Attributes of a DOM Element using JavaScript

avatar

Borislav Hadzhiev

Sun Dec 26 20212 min read

Get all Attributes of a DOM Element in JavaScript #

To get all of the attributes of a DOM element:

  1. Use the getAttributeNames() method to get an array of the element's attribute names.
  2. Use the reduce() method to iterate over the array.
  3. 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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ๐Ÿ‘‡๏ธ --> <div id="blue" data-id="example" class="box">Box 1</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
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); // โœ… Get array of all attribute names const attrNames = element.getAttributeNames(); console.log(attrNames); // ๐Ÿ‘‰๏ธ ['id', 'data-id', 'class'] // โœ… Get array of all attribute values const attrValues = element .getAttributeNames() .map(name => element.getAttribute(name)); console.log(attrValues); // ๐Ÿ‘‰๏ธ ['blue', 'example', 'box']

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

index.js
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.

On each iteration, whatever we return from the callback function we passed to the reduce method becomes the accumulator for 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.

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

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

  1. Use the getAttributeNames() method to get an array of the element's attribute names.
  2. Use the map() method to iterate over the array and get each attribute value using the getAttribute method.
index.js
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']

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 of the current iteration and return the result.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee