Get and set element attributes with getAttribute/setAttribute. Modern elements also expose attributes as direct properties. Use dataset for custom data-* attributes.

Syntax

el.getAttribute('href');
el.setAttribute('class', 'active');
el.removeAttribute('disabled');
el.dataset.userId = '42'; // data-user-id attribute

Deep Dive Course

HTML **attributes** are the initial values defined in markup. **Properties** are the live DOM object values that may differ. Use `setAttribute`/`getAttribute` for HTML attributes. For typed properties, use direct access: `el.id`, `el.href`, `el.checked`. **dataset** provides a clean API for `data-*` attributes.

1Understanding Modifying Attributes

HTML attributes are the initial values defined in markup. Properties are the live DOM object values that may differ. Use setAttribute/getAttribute for HTML attributes. For typed properties, use direct access: el.id, el.href, el.checked. dataset provides a clean API for data-* attributes.

💡

getAttribute('class') gets the HTML attribute. el.className gets the property. They can differ — attribute is the initial value, property is the current live value.

editor.html

const img = document.querySelector('img');

// Attributes
console.log(img.getAttribute('src'));   // original src
console.log(img.getAttribute('alt'));   // alt text

img.setAttribute('src', '/new-image.jpg');
img.setAttribute('loading', 'lazy');
img.removeAttribute('title');

localhost:3000

2Practical Example

Here is a real-world application of Modifying Attributes showing how it is used in production JavaScript code.

editor.html

// dataset for data-* attributes
const btn = document.querySelector('[data-user-id="42"]');
console.log(btn.dataset.userId);  // '42' (camelCase!)

btn.dataset.role = 'admin';       // sets data-role
console.log(btn.dataset.role);    // 'admin'
delete btn.dataset.role;          // removes data-role

localhost:3000

3Best Practices

Follow these guidelines when working with Modifying Attributes:

1. Use dataset for custom data storage (data-* attributes)

2. Use direct properties (el.href, el.checked) for type-safe access

3. Use removeAttribute to fully remove an attribute

⚠️

Tip: getAttribute('class') gets the HTML attribute. el.className gets the property. They can differ — attribute is the initial value, property is the current live value.

editor.html

const img = document.querySelector('img');

// Attributes
console.log(img.getAttribute('src'));   // original src
console.log(img.getAttribute('alt'));   // alt text

img.setAttribute('src', '/new-image.jpg');
img.setAttribute('loading', 'lazy');
img.removeAttribute('title');

localhost:3000

Examples

Example 01Basic Usage

const img = document.querySelector('img');

// Attributes
console.log(img.getAttribute('src'));   // original src
console.log(img.getAttribute('alt'));   // alt text

img.setAttribute('src', '/new-image.jpg');
img.setAttribute('loading', 'lazy');
img.removeAttribute('title');

Example 02Advanced Example

// dataset for data-* attributes
const btn = document.querySelector('[data-user-id="42"]');
console.log(btn.dataset.userId);  // '42' (camelCase!)

btn.dataset.role = 'admin';       // sets data-role
console.log(btn.dataset.role);    // 'admin'
delete btn.dataset.role;          // removes data-role

Best Practices

Use dataset for custom data storage (data-* attributes)
Use direct properties (el.href, el.checked) for type-safe access
Use removeAttribute to fully remove an attribute

Interview Question

What is the difference between an attribute and a property in the DOM?▼

Hint: Initial value vs current state.

Attributes are defined in the HTML markup and accessible via getAttribute — they represent the initial value. Properties are the live JavaScript object properties on DOM nodes — they represent the current state. Example: after the user types in an input, input.value (property) reflects the typed text, but input.getAttribute('value') (attribute) still returns the original default value.

Exercises

MediumPractice using Modifying Attributes in a real scenario.

View Solution

const img = document.querySelector('img');

// Attributes
console.log(img.getAttribute('src'));   // original src
console.log(img.getAttribute('alt'));   // alt text

img.setAttribute('src', '/new-image.jpg');
img.setAttribute('loading', 'lazy');
img.removeAttribute('title');

Frequently Asked Questions

What is the difference between an attribute and a property in the DOM?▼

Related Functions

Elements-ManipulationElements-CreationElement-Selection