JavaScript DOM

Attributes & Classes

Master element properties and CSS classes - control every detail of your elements!

Find videos you like?

Save to resource drawer for future reference!

Attributes vs Classes - What's the Difference?

Two powerful ways to control your elements

1

Attributes

Built-in properties of HTML elements

href - Where a link goes

src - Image/video source

id - Unique identifier

disabled - Disable buttons

element.setAttribute('href', 'url')

2

Classes

CSS styling groups you can toggle

Add - Apply new styles

Remove - Take off styles

Toggle - Switch on/off

Check - See if has class

element.classList.add('active')

3 Common Attribute Operations

Click each card to see practical examples

Link Attributes

href, target

Use when: Changing where links go or how they open

// Change URL

link.href = 'https://example.com';

// Open in new tab

link.target = '_blank';

Image Attributes

src, alt

Use when: Changing images or alt text

// Change image

img.src = 'photo.jpg';

// Add description

img.alt = 'Beautiful sunset';

Form Attributes

disabled, value

Use when: Enabling/disabling inputs, getting values

// Disable button

btn.disabled = true;

// Get input value

const text = input.value;

classList - The 4 Essential Methods

Everything you need to work with CSS classes

add()

Add a class to element

element.classList.add('active')

Example: Highlight selected item

remove()

Remove a class from element

element.classList.remove('active')

Example: Remove highlight

toggle()

Switch class on/off

element.classList.toggle('hidden')

Example: Show/hide content

contains()

Check if has class

element.classList.contains('active')

Example: Test if selected

Interactive Playground

Try attributes and classes yourself - see instant results!

Try Everything!

Click the buttons to toggle classes, change link destinations, and enable/disable inputs. Watch how attributes and classes work together!

Quick Reference Cheat Sheet

Working with Attributes

element.setAttribute('href', 'url')

Set attribute value

element.getAttribute('href')

Get attribute value

element.removeAttribute('disabled')

Remove attribute

element.hasAttribute('hidden')

Check if has attribute

Working with Classes

element.classList.add('active')

Add one or more classes

element.classList.remove('hidden')

Remove classes

element.classList.toggle('open')

Toggle class on/off

element.classList.contains('active')

Check if has class

⚠️ Common Mistakes

❌ Using className instead of classList

❌ Wrong:

element.className = 'new-class';
// Removes ALL existing classes!

✅ Correct:

element.classList.add('new-class');
// Keeps existing classes

Tip: Always use classList for safer class manipulation!

❌ Forgetting quotes in setAttribute

❌ Wrong:

element.setAttribute(href, 'url');
// Error: href is not defined

✅ Correct:

element.setAttribute('href', 'url');
// ✅ Attribute name in quotes

Tip: Attribute names must be strings!

🎯 Practice Challenge

Question 1: Add class "active" to an element

Show Answer

element.classList.add("active");

Question 2: Change a link to open in new tab

Show Answer

link.target = "_blank"; // or link.setAttribute("target", "_blank");

Question 3: Toggle class "hidden" on an element

Show Answer

element.classList.toggle("hidden");

Question 4: Disable a button

Show Answer

button.disabled = true; // or button.setAttribute("disabled", "");

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice