JavaScript Element hasAttributes() Method

What You’ll Learn

Element.hasAttributes() is an instance method that returns true or false depending on whether the element has any attributes at all. Learn the MDN guard pattern, comparison with attributes and hasAttribute(), and five try-it labs aligned with MDN.

Introduction

hasAttribute(name) checks one specific attribute. hasAttributes() answers a broader question: does this element have any attributes at all? It takes no arguments and returns a simple boolean.

MDN: the method indicates whether the current element has any attributes or not. When it returns true, you can safely iterate element.attributes or call getAttributeNames().

This page is part of JavaScript Element. See also the attributes property for the live NamedNodeMap collection.

Understanding the hasAttributes() Method

Calling el.hasAttributes() checks whether the element’s attribute list is non-empty.

• It is an instance method on Element.
• Takes no parameters (MDN).
• Returns true when the element has one or more attributes.
• Returns false when the element has no attributes.
• Does not name a specific attribute — use hasAttribute() for that.
• Equivalent to el.attributes.length > 0 in practice.
• Often used as a guard before iterating attributes (MDN).

📝 Syntax

General form of Element.hasAttributes (MDN):

hasAttributes()

Parameters

None (MDN).

Return value

A boolean: true if the element has any attributes, false otherwise (MDN).

Common patterns

// MDN example
const foo = document.getElementById("foo");
if (foo.hasAttributes()) {
  // Do something with foo.attributes
}

// Guard before getAttributeNames
if (el.hasAttributes()) {
  for (const name of el.getAttributeNames()) {
    console.log(name, el.getAttribute(name));
  }
}

// Quick empty check
const hasAny = box.hasAttributes();

Examples Gallery

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

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

if (foo.hasAttributes()) {
  console.log("foo has attributes");
} else {
  console.log("foo has no attributes");
}

foo has attributes

const wrap = document.getElementById("wrap");
const empty = wrap.children[0];
const box = wrap.children[1];

console.log(empty.hasAttributes()); // false
console.log(box.hasAttributes());   // true

false
true

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

if (card.hasAttributes()) {
  const names = card.getAttributeNames();
  console.log(names.join(", "));
} else {
  console.log("no attributes to read");
}

id, class, data-role

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

const byHas = link.hasAttributes();
const byLength = link.attributes.length > 0;

console.log(byHas);
console.log(byLength);
console.log(byHas === byLength);

true
true
true

const container = document.getElementById("list");
const items = container.querySelectorAll("*");
let withAttrs = 0;

for (const el of items) {
  if (el.hasAttributes()) {
    withAttrs++;
  }
}

console.log(withAttrs);

2

🚀 Common Use Cases

• Guarding before iterating element.attributes (MDN pattern).
• Skipping bare elements in DOM walkers and serializers.
• Quick checks in tests: “does this node have any attrs?”
• Validating user-generated markup before attribute export.
• Readable conditionals instead of attributes.length > 0.
• Pairing with getAttributeNames() after confirming attributes exist.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Takes no parameters — call element.hasAttributes() directly.
• Returns true when the element has at least one attribute of any name.
• For a single named attribute, use hasAttribute(name) instead.
• Equivalent to element.attributes.length > 0, but more readable in conditionals.
• Related: hasAttribute(), attributes, getAttributeNames(), JavaScript hub.

💡 Best Practices