JavaScript Element hasAttribute() Method

What You’ll Learn

Element.hasAttribute() is an instance method that returns true or false depending on whether an attribute exists on the element. Learn MDN’s basic check pattern, data-* guards, boolean attributes, comparison with getAttribute(), and five try-it labs aligned with MDN.

Introduction

Before reading an attribute value with getAttribute(), you often want to know whether the attribute is there at all. hasAttribute(name) answers that with a simple boolean — no null checks required.

MDN: the method returns whether the specified element has the specified attribute, regardless of what value it holds. An empty attribute still counts as present.

This page is part of JavaScript Element. Pair hasAttribute() with getAttribute() and getAttributeNS() in your DOM toolkit.

Understanding the hasAttribute() Method

Calling el.hasAttribute(name) checks the element’s attribute list for a matching name and returns true or false.

• It is an instance method on Element.
• name — a string with the attribute name to look for (MDN).
• Returns true when the attribute exists on the element.
• Returns false when the attribute is not present.
• Does not return the attribute value — use getAttribute() for that.
• Works for any attribute name, including data-* and boolean attributes.
• Case-sensitive in XML documents; HTML attribute names are typically lower-case.

📝 Syntax

General form of Element.hasAttribute (MDN):

hasAttribute(name)

Parameters

name — a string representing the name of the attribute (MDN).

Return value

A boolean: true if the attribute exists, false otherwise (MDN).

Common patterns

// MDN example
const foo = document.getElementById("foo");
if (foo.hasAttribute("bar")) {
  // do something
}

// Guard before reading
if (link.hasAttribute("href")) {
  console.log(link.getAttribute("href"));
}

// Boolean attribute
const isDisabled = button.hasAttribute("disabled");

Examples Gallery

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

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

if (foo.hasAttribute("bar")) {
  console.log("bar attribute is present");
} else {
  console.log("bar attribute is missing");
}

bar attribute is present

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

if (card.hasAttribute("data-role")) {
  console.log(card.getAttribute("data-role"));
} else {
  console.log("no role set");
}

admin

const submit = document.getElementById("submit");
const reset = document.getElementById("reset");

console.log(submit.hasAttribute("disabled")); // true
console.log(reset.hasAttribute("disabled"));  // false

true
false

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

const byHas = link.hasAttribute("href");
const byGet = link.getAttribute("href") !== null;

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

true
true
true

const list = document.getElementById("tasks");
const items = list.querySelectorAll("li");
let doneCount = 0;

for (const item of items) {
  if (item.hasAttribute("data-done")) {
    doneCount++;
  }
}

console.log(doneCount);

2

🚀 Common Use Cases

• Guarding before getAttribute() on optional attributes.
• Checking boolean attributes like disabled, hidden, or checked.
• Validating data-* hooks before running component logic.
• Feature-detecting custom attributes on third-party markup.
• Filtering DOM nodes in scripts and tests.
• Readable conditionals instead of getAttribute(x) !== null.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Returns true when the attribute exists, even if the value is an empty string.
• Returns false when the attribute is not on the element.
• Checks existence only — use getAttribute() to read the value.
• Attribute names are case-sensitive in XML; use lower-case in HTML documents.
• Related: getAttribute(), getAttributeNS(), getAttributeNames(), JavaScript hub.

💡 Best Practices