Table of Contents

JavaScript hasAttribute() method checks whether an HTML element currently has a specified attribute. It returns a boolean: true when the attribute is present and false when it is absent. Use it when your code needs to test attribute presence without reading the attribute’s value.

Syntax and Return Value

element.hasAttribute(name);

Pass the attribute name as a string. In an HTML document, attribute names are case-insensitive. The method returns a JavaScript boolean and does not change the element.

Basic Example

<button id="send" disabled>Send</button>

<script>
const button = document.querySelector("#send");

console.log(button.hasAttribute("disabled")); // true
console.log(button.hasAttribute("title")); // false
</script>

The disabled attribute is present on the button, so the first check returns true. There is no title attribute, so the second check returns false.

Check an Attribute Before Reading It

getAttribute() returns the attribute value as a string or null when it is missing. hasAttribute() answers only whether it exists. Use both when your logic needs to distinguish a missing attribute from an attribute whose value is empty:

<div id="notice" data-message=""></div>

<script>
const notice = document.querySelector("#notice");

if (notice.hasAttribute("data-message")) {
  console.log(notice.getAttribute("data-message")); // ""
} else {
  console.log("No data-message attribute");
}
</script>

This distinction is useful when an empty value is meaningful or when a default should only be used if the attribute is missing.

Check Boolean Attributes

HTML boolean attributes are true based on presence. Their written text is not parsed as a JavaScript boolean. For example, an element with disabled="false" still has the disabled attribute:

<input id="email" disabled="false">

<script>
const email = document.querySelector("#email");

console.log(email.hasAttribute("disabled")); // true
console.log(email.disabled); // true

email.removeAttribute("disabled");
console.log(email.hasAttribute("disabled")); // false
console.log(email.disabled); // false
</script>

Use the boolean property, such as email.disabled, when you need the current on/off state. Use hasAttribute() when you need to know whether the markup attribute exists.

Check for Custom data-* Attributes

hasAttribute() works with custom data attributes as well as standard HTML attributes:

<article id="story" data-category="javascript">DOM tutorial</article>

<script>
const story = document.querySelector("#story");

if (story.hasAttribute("data-category")) {
  console.log(story.getAttribute("data-category")); // "javascript"
}
</script>

You can test the same value with story.dataset.category !== undefined. Both approaches can tell you whether a data value exists, while hasAttribute() works directly with the full attribute name.

Apply a Check to Several Elements

Use querySelectorAll() to find elements, then check each one independently. This example adds a label only to buttons that do not already have one:

<button class="action" aria-label="Save">Save</button>
<button class="action">Continue</button>

<script>
document.querySelectorAll(".action").forEach((button) => {
  if (!button.hasAttribute("aria-label")) {
    button.setAttribute("aria-label", button.textContent.trim());
  }
});
</script>

Checking first lets the script preserve labels already supplied in the markup. In real interfaces, make sure each control’s accessible name accurately describes its action.

Use hasAttribute() in a Toggle Example

This complete snippet toggles a details paragraph and keeps the button’s expanded state synchronized:

<button id="detailsToggle" aria-expanded="false">Show details</button>
<p id="details" hidden>More information about the topic.</p>

<script>
const toggle = document.querySelector("#detailsToggle");
const details = document.querySelector("#details");

toggle.addEventListener("click", () => {
  const isHidden = details.hasAttribute("hidden");

  if (isHidden) {
    details.removeAttribute("hidden");
    toggle.setAttribute("aria-expanded", "true");
    toggle.textContent = "Hide details";
  } else {
    details.setAttribute("hidden", "");
    toggle.setAttribute("aria-expanded", "false");
    toggle.textContent = "Show details";
  }
});
</script>

The test checks for the presence of hidden before changing the interface. The value of a boolean attribute is not needed for this check.

Related Attribute Methods

Check Optional Attributes in a Form

A form may contain optional controls that are enabled only when a related attribute is present. Check each element’s markup before running code that depends on it:

<input id="email" type="email" required>
<input id="website" type="url">

<script>
const email = document.querySelector("#email");
const website = document.querySelector("#website");

console.log(email.hasAttribute("required")); // true
console.log(website.hasAttribute("required")); // false

if (email.hasAttribute("required")) {
  console.log("An email address is required.");
}
</script>

This check asks whether the required attribute exists in the markup. If you need the current constraint state of a control, its required property is also available as a boolean. The attribute and property agree for this reflected HTML attribute, while other properties can represent separate live state.

Attribute methods cover common tasks for DOM elements:

  • hasAttribute(name) returns true or false based on presence.
  • getAttribute(name) returns the string value or null if missing.
  • setAttribute(name, value) adds an attribute or updates its value.
  • removeAttribute(name) removes the attribute.

These methods operate on markup attributes. Some DOM properties reflect those attributes, while others represent live state. Choose the interface that answers the question your code is asking.

Categorized in:

Javascript, Js DOM,

Tagged in:

, , , ,