JavaScript Element getAttribute() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word GETATTRIBUTE

Definition

The Element.getAttribute() method returns the string value of a named attribute on the element (MDN). If that attribute is missing, it returns null.

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

Syntax

Call el.getAttribute. Start with this line.

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

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

Library declarations
JavaScript
el.getAttribute(attrName)

Parameters

ParameterDescription
attrNameRequired. Attribute name string (HTML → lowercase)

Return Value

Return ValueDescription
*String value, or null

JavaScript Examples

Example 1 — Read an Attribute

Read the id attribute as a string.

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

out.textContent = el.getAttribute("id");
Try It Yourself

How It Works

  1. Select the element. You need a real Element node.
  2. Pass the name. "id" matches the HTML attribute.
  3. Get a string. Present attributes return their value.
  4. Show it. Assign to textContent for safe display.

Example 2 — Missing → null

When the attribute is not on the element, the return value is null.

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

const lang = el.getAttribute("lang");
out.textContent = lang === null ? "null" : lang;
Try It Yourself

How It Works

  1. Ask for a missing name. This div has no lang.
  2. Receive null. That is the specified missing result (MDN).
  3. Compare with === null. Do not treat it like "".
  4. Optional: use hasAttribute() first.

Example 3 — data-* Attribute

Custom data attributes work the same way with getAttribute.

JavaScript
const el = document.getElementById("card");
const out = document.getElementById("out");

out.textContent = el.getAttribute("data-role");
Try It Yourself

How It Works

  1. Use the full name. Include the data- prefix.
  2. Read the string. Same API as id or class.
  3. Alternative: el.dataset.role for data-role.
  4. Prefer getAttribute when the name is dynamic or not only data-*.
Compatibility

Browser Support

Element.getAttribute() is Baseline Widely available on MDN (across browsers since July 2015). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline Widely available

Element.getAttribute()

Read HTML attribute values as strings (or null). Core DOM — available everywhere modern.

2015+ Widely available
Google Chrome All modern
Supported
Mozilla Firefox All modern
Supported
Apple Safari All modern
Supported
Microsoft Edge All modern
Supported
Opera All modern
Supported
Internet Explorer Supported
Supported
getAttribute() Baseline

Bottom line: Safe for all modern browsers and IE. Always null-check missing attributes.

Frequently Asked Questions

It returns the value of a named HTML attribute on the element as a string (MDN). If the attribute does not exist, it returns null.
No. MDN marks Element.getAttribute() as Baseline Widely available (across browsers since July 2015). It is not Deprecated, Experimental, or Non-standard.
null. Always check for null before using the value, or use hasAttribute() first.
IDL properties like id reflect specific attributes and may have different types or defaults. getAttribute() always returns a string or null for any attribute name you pass.
You can use getAttribute("data-id") or the dataset API (el.dataset.id). dataset is often cleaner for data-* names; getAttribute works for any attribute.
For CSP security, nonce values are hidden from getAttribute on script elements (MDN). Use the nonce property instead: script.nonce.

Next: getAttributeNames()

List every attribute name currently on an element.

getAttributeNames() →

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.

AWS Certified Developer – Associate (Credly)

24 people found this page helpful

JavaScript Element getAnimations() Method JavaScript Element getAttributeNames() Method