JavaScript Element hasAttributes() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method

Definition

In JavaScript, the hasAttributes() method returns a boolean — true if the element has any attributes, false if it has none (MDN).

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.hasAttributes. Start with this line.

JavaScript
el.hasAttributes()
CallWhat it does
el.hasAttributes()Primary signature.
el.hasAttributes(...)Call with the arguments your case needs.

Built into the browser. Call hasAttributes(...) on an Element — no import required.

Library declarations
JavaScript
el.hasAttributes()

Parameters

ParameterDescription
ParametersRequired. None (MDN)

Return Value

Return ValueDescription
*true if any attributes exist

JavaScript Examples

Example 1 — Basic Check

MDN-style: ask whether the element has any attributes.

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

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

How It Works

  1. Find the element. getElementById("foo").
  2. Call with no args. hasAttributes() (MDN).
  3. Get a boolean. Any attribute → true.
  4. Branch in an if. Only then inspect attributes.

Example 2 — List Names When True

Guard with hasAttributes(), then list names.

JavaScript
const el = document.getElementById("card"); // id + class + data-id

if (el.hasAttributes()) {
  console.log(el.getAttributeNames());
} else {
  console.log([]);
}
Try It Yourself

How It Works

  1. Check first. Avoid assuming attributes exist.
  2. List names. getAttributeNames() returns a string array.
  3. Or use attributes. MDN points at el.attributes (NamedNodeMap).
  4. Empty case. Bare elements → false / skip listing.

Example 3 — vs hasAttribute / length

Any-attributes vs one name vs counting with attributes.length.

JavaScript
const el = document.getElementById("card"); // class="box" (no data-role)

console.log(el.hasAttributes());           // true if any attrs
console.log(el.attributes.length > 0);     // same idea
console.log(el.hasAttribute("data-role")); // one specific name
Try It Yourself

How It Works

  1. hasAttributes. Any attribute present → true.
  2. attributes.length. Same boolean idea via count.
  3. hasAttribute(name). Answers a different question — one name.
  4. Pick the readable API. Prefer hasAttributes() for the “any?” check.

Browser Support

Element.hasAttributes() is Baseline Widely available (MDN: across browsers since July 2015). Safe for modern teaching and production code.

✓ Baseline · Widely available

hasAttributes()

Return true or false depending on whether the element has any attributes.

Wide Baseline
Google Chrome Full support
Supported
Mozilla Firefox Full support
Supported
Apple Safari Full support
Supported
Microsoft Edge Full support
Supported
Opera Full support
Supported
Internet Explorer 8+
Supported
hasAttributes() Widely available

Bottom line: Use hasAttributes as a clear guard before iterating attributes or listing names.

Frequently Asked Questions

It returns a boolean indicating whether the current element has any attributes at all (MDN). It does not check a specific attribute name.
No. MDN marks Element.hasAttributes() as Baseline Widely available (across browsers since July 2015). It is not Deprecated, Experimental, or Non-standard.
No. MDN lists no parameters. Call it as element.hasAttributes().
hasAttributes() checks if the element has any attributes. hasAttribute(name) checks one specific attribute by name.
hasAttributes() is true when attributes.length > 0. The method reads more clearly; length is equivalent for a quick count check.
MDN example: use element.attributes or getAttributeNames() to inspect individual attribute names and values.

Next: hasPointerCapture()

Learn how to check whether an element has captured a given pointer.

hasPointerCapture tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

11 people found this page helpful