setAttribute() / getAttribute() / removeAttribute()
Reads and updates element attributes like id, aria-*, and data-*.
el.setAttribute(name, value);
el.getAttribute(name);
el.removeAttribute(name);This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
Reads and updates element attributes like id, aria-*, and data-*.
These methods provide a direct interface to the HTML attributes of a DOM element, serving as the primary way to interact with non-standard or custom data attributes. Unlike IDL properties (e.g., el.className or el.id), setAttribute() always serializes the input value into a string. This is a critical distinction: setting a value to null or undefined will result in the literal strings 'null' or 'undefined'. Furthermore, while many attributes sync directly with DOM properties, some do not; for instance, getAttribute('value') retrieves the initial default value from the HTML markup, whereas the .value property retrieves the current user-entered value. From a performance perspective, frequent DOM manipulation via these methods is slower than accessing object properties and can trigger MutationObserver callbacks or style recalculations if the attribute affects CSS selectors. For data- attributes, using the el.dataset API is generally more performant and syntactically cleaner in modern JavaScript environments.
Quick reference
Syntax
el.setAttribute(name, value);
el.getAttribute(name);
el.removeAttribute(name);Inputs
Parameters
See it in practice
Examples
Basic Attribute Manipulation
var link = document.createElement('a');
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');
console.log(link.getAttribute('href'));
link.removeAttribute('target');
console.log(link.getAttribute('target'));"https://example.com" null
Creates an anchor tag, sets the href and target, then retrieves and removes the target attribute.
Managing Data Attributes
var btn = document.createElement('button');
btn.setAttribute('data-user-id', '12345');
btn.setAttribute('data-active', 'true');
if (btn.getAttribute('data-active') === 'true') {
console.log('User ID: ' + btn.getAttribute('data-user-id'));
}"User ID: 12345"
Demonstrates how to store and retrieve custom metadata using data- attributes and string comparisons.
Toggling Accessibility States
var nav = document.createElement('nav');
nav.setAttribute('aria-expanded', 'false');
function toggleNav(isOpen) {
nav.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
}
toggleNav(true);
console.log(nav.getAttribute('aria-expanded'));"true"
Updates ARIA attributes to ensure screen readers receive the correct state of UI components.
Debug faster
Common Errors
LogicError
Cause: Passing a boolean false to setAttribute for boolean attributes (like disabled, checked, or readonly). In HTML, the presence of the attribute itself signifies true, regardless of the value string.
Fix: Use removeAttribute() to turn off a boolean attribute instead of setting it to 'false'.
element.setAttribute('disabled', false); // Element remains DISABLED because 'false' is a string.TypeError
Cause: Attempting to use setAttribute on a collection of elements (like a NodeList) instead of an individual element.
Fix: Iterate through the collection using a loop or forEach before calling the method.
document.querySelectorAll('div').setAttribute('role', 'presentation'); // Fails: querySelectorAll returns a list.Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
Reads and updates element attributes like id, aria-*, and data-*.
name: Attribute name, e.g. 'aria-label' or 'data-id'. value: Attribute value (always stored as a string).
LogicError: Use removeAttribute() to turn off a boolean attribute instead of setting it to 'false'. TypeError: Iterate through the collection using a loop or forEach before calling the method.