JavaScript Element getAttribute() Method

What You’ll Learn

Element.getAttribute() is an instance method that reads an HTML attribute value from an element. Learn when it returns null, how data-* attributes work, decoded entity values, the CSP nonce security note, and five try-it labs aligned with MDN.

Introduction

HTML attributes carry metadata: id, class, href, data-action, and more. In JavaScript you can read many reflected properties directly (el.id), but getAttribute(name) works for any attribute name as a string.

If the attribute is not present, you get null—not an empty string. That distinction matters when you branch on whether an attribute exists.

This page is part of JavaScript Element. Related DOM topics include closest() and slot.

Understanding the getAttribute() Method

Calling el.getAttribute(attributeName) looks up the attribute on el and returns its value as a string, or null if absent.

• It is an instance method on Element.
• In HTML documents, the attribute name argument is lower-cased before lookup (MDN).
• Character references in markup (e.g. <) are decoded in the return value.
• For the full Attr node, use getAttributeNode() instead.
• CSP nonce on scripts is hidden—use el.nonce (MDN).
• Pairs with setAttribute(), hasAttribute(), and removeAttribute().

📝 Syntax

General form of Element.getAttribute (MDN):

getAttribute(attributeName)

Parameters

• attributeName — the name of the attribute whose value you want (e.g. "id", "data-id").

Return value

A string with the attribute value if it exists; otherwise null.

Common patterns

const el = document.getElementById("div1");

el.getAttribute("id");           // "div1"
el.getAttribute("lang");         // null (not set)

// data-* attributes
el.getAttribute("data-action");  // string or null
el.dataset.action;               // alternative for data-*

// Safe null check
const role = el.getAttribute("role");
if (role !== null) {
  console.log(role);
}

Examples Gallery

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

const div1 = document.getElementById("div1");
// <div id="div1">Hi Champ!</div>

console.log(div1.getAttribute("id"));
// "div1"

div1

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

console.log(div1.getAttribute("lang"));
// null

null

const btn = document.querySelector("[data-action]");

console.log(btn.getAttribute("data-action"));
// "save"

console.log(btn.dataset.action);
// "save" (dataset alternative)

save
save

// <div data-payload="&lt;b&gt;hi&lt;/b&gt;"></div>
const el = document.getElementById("example");

console.log(el.getAttribute("data-payload"));
// "<b>hi</b>"  (decoded — do NOT use with innerHTML)

<b>hi</b>

const link = document.querySelector("a.card");

console.log(link.getAttribute("class"));  // "card primary"
console.log(link.getAttribute("href"));  // "https://example.com"

const missing = link.getAttribute("download");
console.log(missing === null);           // true

card primary
https://example.com
true

🚀 Common Use Cases

• Reading data-* hooks for event delegation (data-action).
• Inspecting aria-* attributes for accessibility tooling.
• Feature detection via custom data-feature flags in HTML.
• Reading role, tabindex, or other attributes without IDL shortcuts.
• Serializing element state when attributes mirror configuration.
• Teaching the difference between attribute values and reflected properties.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Missing attributes return null, not "".
• Returned values are decoded—XSS risk if inserted as HTML (MDN).
• getAttribute("nonce") on scripts returns ""—use script.nonce.
• For the Attr node itself, use getAttributeNode().
• Related: closest(), getAnimations(), slot, JavaScript hub.

💡 Best Practices