Skip to main content

How to Get All Attributes of a DOM Element in JavaScript

When inspecting a DOM element in JavaScript, you sometimes need to get a list of all its HTML attributes. This can be useful for debugging, creating a clone of an element, or building dynamic tools that interact with custom attributes. Modern JavaScript provides a few straightforward methods to accomplish this.

This guide will teach you how to get all attribute names using getAttributeNames(), all attribute nodes using the .attributes property, and how to combine them to create a simple key-value object of all attributes.

The Core Task: Getting Attributes​

The goal is to programmatically read the attributes from an HTML element.

For example, given an HTML element, how can we get a list of its attributes (id, data-id, class) and their corresponding values?

<div id="blue" data-id="example" class="box">Box 1</div>

Method 1: Getting All Attribute Names​

The Element.getAttributeNames() method is the most direct way to get a simple array of all attribute names on an element.

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

const attributeNames = element.getAttributeNames();

console.log(attributeNames);

Output:

['id', 'data-id', 'class']
note

This is useful when you only need to know which attributes are present on an element.

Method 2: Getting All Attribute Nodes​

The element.attributes property provides a more detailed, "live" NamedNodeMap of all the attributes on an element. Each item in this collection is an Attr node, which has name and value properties.

const element = document.getElementById('blue');
const attributes = element.attributes;

console.log(attributes);
// Output: NamedNodeMap { 0: id, 1: data-id, 2: class, ... }

// You can iterate over it with a for...of loop
for (const attr of attributes) {
  console.log(`${attr.name}: ${attr.value}`);
}
/* Output:
   id: blue
   data-id: example
   class: box
*/

The Complete Solution: Creating an Object of All Attributes​

The most practical use case is to combine these methods to create a simple key-value object of all attributes. This is a great way to get a "snapshot" of an element's state.

The logic:

  1. Get an array of all attribute names using getAttributeNames().
  2. Use Array.prototype.reduce() to iterate over the names and build an object.
  3. For each name, use element.getAttribute(name) to get its corresponding value.

This is the recommended best solution for getting a clean object of all attributes.

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

const allAttributes = element.getAttributeNames().reduce((accumulator, name) => {
  // Add the current attribute name and value to the accumulator object
  accumulator[name] = element.getAttribute(name);
  return accumulator;
}, {}); // Start with an empty object as the initial value

console.log(allAttributes);
// Output: { id: 'blue', 'data-id': 'example', class: 'box' }
note

This gives you a simple, portable JavaScript object that you can easily inspect, modify, or serialize.

Conclusion​

JavaScript provides several powerful ways to access the attributes of a DOM element.

  • To get a simple array of attribute names, use element.getAttributeNames().
  • To get a live collection of attribute nodes (with both name and value properties), use the element.attributes property.
  • The recommended best practice for getting a clean key-value object of all attributes is to combine getAttributeNames() with reduce().

By using these methods, you can programmatically read and work with any HTML attribute on any DOM element.

Table of Contents