JavaScript Element getAttributeNames() Method

What You’ll Learn

Element.getAttributeNames() is an instance method that returns every attribute name on an element as an array of strings. Learn how to pair it with getAttribute(), when you get an empty array, qualified namespace names, and five try-it labs aligned with MDN.

Introduction

Sometimes you need every attribute on an element—not just one. Older code often looped over element.attributes, a live NamedNodeMap of Attr nodes. That works, but MDN recommends getAttributeNames() plus getAttribute() as a lighter pattern.

The method takes no parameters and always returns an array. Zero attributes means [], not null.

This page is part of JavaScript Element. It pairs naturally with getAttribute().

Understanding the getAttributeNames() Method

Calling el.getAttributeNames() snapshots the attribute names currently on the element. Values are not included—only qualified name strings.

• It is an instance method on Element.
• Returns an array of strings (empty when no attributes).
• Prefixed namespace attributes appear as prefix:localName (e.g. xlink:href).
• Namespaced attributes without a prefix return only the local name (MDN).
• No parameters.
• Memory-efficient alternative to iterating Element.attributes (MDN).

📝 Syntax

General form of Element.getAttributeNames (MDN):

getAttributeNames()

Parameters

None.

Return value

An array of strings containing attribute names. Empty array if the element has no attributes.

Common patterns

const el = document.getElementById("card");

// List names only
const names = el.getAttributeNames();
console.log(names); // ["id", "class", "data-id", …]

// Names + values (MDN pattern)
for (const name of el.getAttributeNames()) {
  console.log(name, el.getAttribute(name));
}

// Count attributes
console.log(el.getAttributeNames().length);

Examples Gallery

Examples follow MDN Element.getAttributeNames() patterns. Use View Output or Try It Yourself for each case.

const card = document.getElementById("card");

console.log(card.getAttributeNames());
// ["id", "class", "data-id", "data-role"] (order may vary)

["id", "class", "data-id", "data-role"]

const div = document.createElement("div");

console.log(div.getAttributeNames());
// []

console.log(div.getAttributeNames().length === 0);
// true

[]
true

const element = document.createElement("a");
element.setAttribute("href", "https://example.com");
element.setAttribute("target", "_blank");

for (const name of element.getAttributeNames()) {
  console.log(name, element.getAttribute(name));
}
// href https://example.com
// target _blank

href https://example.com
target _blank

const root = document.getElementById("widget");

const dataNames = root
  .getAttributeNames()
  .filter((name) => name.startsWith("data-"));

console.log(dataNames.length);
// 2

console.log(dataNames);
// ["data-id", "data-theme"]

2
["data-id", "data-theme"]

const element = document.createElement("a");
element.setAttribute("href", "https://example.com");
element.setAttributeNS(
  "http://www.w3.org/1999/xlink",
  "xlink:href",
  "https://example.com"
);
element.setAttributeNS("http://www.w3.org/1999/xlink", "show", "new");

for (const name of element.getAttributeNames()) {
  console.log(name, element.getAttribute(name));
}
// href https://example.com
// xlink:href https://example.com
// show new

href https://example.com
xlink:href https://example.com
show new

🚀 Common Use Cases

• Serializing custom elements or widgets to JSON (names + getAttribute values).
• Debugging which attributes are present on a node in devtools scripts.
• Filtering data-* or aria-* attribute names.
• Cloning or diffing attribute sets between two elements.
• Replacing legacy for...of element.attributes loops with a lighter pattern.
• Inspecting SVG/XML qualified attribute names.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, October 2018).
• Returns names only—not values.
• Empty means [], not null.
• Prefer with getAttribute() over heavy Attr iteration (MDN).
• Namespace prefix rules differ for prefixed vs unprefixed namespaced attributes (MDN).
• Related: getAttribute(), closest(), tagName, JavaScript hub.

💡 Best Practices