Table of Contents

JavaScript getAttribute() method reads the value of an HTML attribute from an element. It returns the attribute value as a string, or null when that attribute is not present. This makes getAttribute() useful when you need to inspect the markup-level value of an element, including custom data-* attributes and values that may differ from the element’s current DOM property.

Syntax and Return Value

element.getAttribute(name);

The name argument is the attribute’s name. For HTML elements in an HTML document, attribute names are case-insensitive. The return value is a string or null if the attribute is missing.

<img id="logo" src="logo.png" alt="Site logo">

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

console.log(image.getAttribute("alt")); // "Site logo"
console.log(image.getAttribute("title")); // null
</script>

An empty attribute and a missing attribute are different: an empty attribute returns an empty string, while a missing attribute returns null.

Read Common HTML Attributes

Use getAttribute() to inspect values such as href, src, class, and title:

<a id="docs" href="/guides/dom" class="nav-link">DOM guide</a>

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

console.log(link.getAttribute("href"));  // "/guides/dom"
console.log(link.getAttribute("class")); // "nav-link"
console.log(link.getAttribute("title")); // null
</script>

For URL attributes, getAttribute("href") returns the literal attribute string. The link.href property usually returns the resolved absolute URL. This distinction matters when you need the original relative path rather than the browser-resolved address.

Check Whether an Attribute Exists

Use hasAttribute() when you only need to know whether an attribute exists. Use getAttribute() when you need its value:

<button id="submit" disabled>Submit</button>

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

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

Boolean HTML attributes are based on presence. A present disabled attribute disables the button, even if its text value is empty. The disabled property is a boolean; getAttribute("disabled") returns a string or null.

Read data-* Attributes

Custom data-* attributes are available through both getAttribute() and the element’s dataset property:

<article id="story" data-author="Mina" data-reading-time="6">
  DOM fundamentals
</article>

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

console.log(story.getAttribute("data-author")); // "Mina"
console.log(story.getAttribute("data-reading-time")); // "6"
console.log(story.dataset.author); // "Mina"
console.log(story.dataset.readingTime); // "6"
</script>

Both interfaces return strings. Convert the value when your code needs a number or another type:

const readingTime = Number(story.getAttribute("data-reading-time"));

Compare an Attribute with a DOM Property

HTML attributes describe markup, while DOM properties are values exposed by JavaScript objects. Some properties reflect attributes; others describe live state. An input’s value attribute sets its default, but the value property can change as a person types.

<input id="nickname" value="Alex">

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

console.log(nickname.getAttribute("value")); // "Alex"
console.log(nickname.value); // "Alex"

nickname.value = "Taylor"; // changes the current value
console.log(nickname.getAttribute("value")); // "Alex"
console.log(nickname.value); // "Taylor"
</script>

Use getAttribute("value") to read the markup attribute. Use nickname.value to read the current value shown in the input. Check the specific element property because reflection behavior differs by attribute and element type.

Read an Attribute Before Updating the Page

This runnable example reads a link’s data-message value and places it into a status element when the link is clicked:

<a id="helpLink" href="/help" data-message="Opening the help guide">Help</a>
<p id="status" aria-live="polite"></p>

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

helpLink.addEventListener("click", () => {
  const message = helpLink.getAttribute("data-message");

  if (message !== null) {
    status.textContent = message;
  }
});
</script>

The null check distinguishes a missing data-message attribute from an empty string. Using textContent displays the value as text instead of interpreting it as HTML.

Use getAttribute() with Related Methods

Read Attributes from Multiple Elements

A page may contain a collection of elements whose attributes hold small pieces of configuration. Select the elements, then call getAttribute() on each one. Since attributes return strings, convert numeric values before calculating with them.

<li class="product" data-name="Notebook" data-price="4.50"></li>
<li class="product" data-name="Pen" data-price="1.25"></li>

<script>
document.querySelectorAll(".product").forEach((item) => {
  const name = item.getAttribute("data-name");
  const priceText = item.getAttribute("data-price");
  const price = Number(priceText);

  if (name !== null && Number.isFinite(price)) {
    console.log(name, price);
  }
});
</script>

The null check verifies that the name attribute exists, while Number.isFinite() confirms the converted price is a usable number. This pattern works for labels, IDs, and other element-specific values. Keep important page content in semantic HTML; data attributes are best for supplemental values that scripts need to read.

Attribute handling often combines reading, checking, setting, and removing values:

const panel = document.querySelector("#panel");

const mode = panel.getAttribute("data-mode");
const hasMode = panel.hasAttribute("data-mode");

panel.setAttribute("data-mode", "compact");
panel.removeAttribute("data-mode");
  • getAttribute(name) returns the string value or null.
  • hasAttribute(name) returns whether the attribute is present.
  • setAttribute(name, value) adds an attribute or changes its value.
  • removeAttribute(name) removes the attribute.

These methods work on DOM elements and provide direct access to their attribute data.

Categorized in:

Javascript, Js DOM,

Tagged in:

, , , ,