Lesson 4 • Beginner

DOM Manipulation 🎨

Learn how to interact with and modify HTML elements using JavaScript — bring your webpages to life with dynamic content, styles, and interactivity.

What You'll Learn in This Lesson

✓What the DOM is and how it works
✓Select elements with querySelector
✓Change text content and innerHTML
✓Modify styles and CSS classes dynamically
✓Create, append, and remove elements
✓Navigate the DOM tree with parent/child relationships

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

Download Node.js to run JavaScript on your computer
Use your browser's Developer Console (Press F12) to test code snippets
Create a .html file with <script> tags and open it in your browser

🌳 What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents your HTML page as a tree of objects that JavaScript can interact with.

Think of the DOM as a live representation of your webpage that you can read and modify in real-time.

🧠 Real-World Analogy:

Imagine your HTML is like a blueprint of a house. The DOM is the actual house that's been built from that blueprint. With JavaScript, you can walk through that house, change the paint colors, move furniture around, or even add new rooms — all while people are inside!

Everything on a webpage — every paragraph, image, button, and div — is represented as an object in the DOM tree.

🎯 Why DOM Manipulation Matters

Without the DOM, web pages would be static and boring. DOM manipulation is what makes the web interactive:

✓Update content without reloading the page (like social media feeds)
✓Respond to user actions (clicks, typing, scrolling)
✓Create animations and visual effects
✓Build dynamic forms with validation
✓Show/hide elements based on conditions

🔍 Selecting Elements — Finding What You Need

Before you can manipulate an element, you need to select it. JavaScript gives you several powerful methods to find elements in the DOM.

📌 Method 1: getElementById

The most direct way to select an element — by its unique id attribute.

const header = document.getElementById('main-header');
console.log(header); // Returns the element with id="main-header"

💡 Pro Tip: IDs should be unique on a page, so this method returns one element (or null if not found).

📌 Method 2: getElementsByClassName

Select all elements with a specific class name. Returns an HTMLCollection (array-like object).

const buttons = document.getElementsByClassName('btn');
console.log(buttons[0]); // First button
console.log(buttons.length); // Number of buttons

📌 Method 3: querySelector (Modern & Recommended)

The most versatile method — uses CSS selectors to find elements. Returns the first match.

// Select by class
const container = document.querySelector('.container');

// Select by ID
const header = document.querySelector('#main-header');

// Select by tag
const firstParagraph = document.querySelector('p');

// Advanced: select nested elements
const submitBtn = document.querySelector('form .submit-btn');

📌 Method 4: querySelectorAll

Like querySelector, but returns all matching elements as a NodeList.

const allButtons = document.querySelectorAll('.btn');

// Loop through all buttons
allButtons.forEach(button => {
  console.log(button.textContent);
});

✅ Best Practice:

Use querySelector and querySelectorAll for modern projects. They're more flexible and work just like CSS selectors you already know!

✏️ Changing Content — textContent vs innerHTML

Once you've selected an element, you can change what's inside it.

🔤 Using textContent (Safer)

Changes the plain text inside an element. HTML tags are treated as text, not rendered.

const heading = document.querySelector('h1');
heading.textContent = "Welcome to my website!";

// HTML tags are escaped (safe from XSS attacks)
heading.textContent = "<script>alert('hack')</script>"; 
// Displays as text, doesn't run code ✅

🏗️ Using innerHTML (More Powerful)

Changes the HTML content inside an element. Tags are parsed and rendered.

const container = document.querySelector('.container');
container.innerHTML = "<h2>New Title</h2><p>Some text</p>";

// Can add multiple elements at once
container.innerHTML = `
  <div class="card">
    <h3>Card Title</h3>
    <p>Card content</p>
  </div>
`;

⚠️ Security Warning:

Be careful with innerHTML when inserting user-provided content! It can expose your site to XSS (Cross-Site Scripting) attacks. Use textContent for user input, or sanitize the HTML first.

📝 Example: Updating a Counter

const counter = document.querySelector('#counter');
let count = 0;

setInterval(() => {
  count++;
  counter.textContent = `Count: ${count}`;
}, 1000); // Updates every second

🎨 Changing Styles — Making Things Beautiful

You can modify CSS styles directly using JavaScript's style property.

🖌️ Basic Styling

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

// Change individual properties
box.style.color = "blue";
box.style.backgroundColor = "#f0f0f0";
box.style.fontSize = "20px";
box.style.padding = "15px";
box.style.borderRadius = "8px";

💡 Notice: CSS properties with hyphens (like background-color) become camelCase in JavaScript (backgroundColor).

🎭 Multiple Styles at Once

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

// Using cssText (overwrites existing styles)
element.style.cssText = `
  color: white;
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
`;

🔄 Example: Theme Switcher

const body = document.body;
const themeBtn = document.querySelector('#theme-toggle');

themeBtn.addEventListener('click', () => {
  if (body.style.backgroundColor === 'white' || !body.style.backgroundColor) {
    // Dark mode
    body.style.backgroundColor = '#1a1a1a';
    body.style.color = '#ffffff';
  } else {
    // Light mode
    body.style.backgroundColor = 'white';
    body.style.color = '#000000';
  }
});

✅ Best Practice:

For complex styling, it's better to add/remove CSS classes rather than inline styles. This keeps your styling logic in CSS where it belongs!

🏷️ Working with Classes — The Professional Way

The classList API is the modern, clean way to manage CSS classes on elements.

➕ Adding Classes

const button = document.querySelector('.btn');

// Add a single class
button.classList.add('active');

// Add multiple classes
button.classList.add('primary', 'large', 'animated');

➖ Removing Classes

// Remove a single class
button.classList.remove('active');

// Remove multiple classes
button.classList.remove('large', 'animated');

🔄 Toggling Classes

The most useful method — adds the class if it's not there, removes it if it is.

const menu = document.querySelector('.menu');
const toggleBtn = document.querySelector('#menu-toggle');

toggleBtn.addEventListener('click', () => {
  menu.classList.toggle('open'); // Switches between open/closed
});

✅ Checking if a Class Exists

if (element.classList.contains('active')) {
  console.log('Element is active!');
}

📝 Real-World Example: Tabs

const tabs = document.querySelectorAll('.tab');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // Remove 'active' from all tabs
    tabs.forEach(t => t.classList.remove('active'));
    
    // Add 'active' to clicked tab
    tab.classList.add('active');
  });
});

💡 Why classList is better than className:

• No need to manually parse/split strings
• Prevents accidentally removing other classes
• More readable and maintainable code

🏗️ Creating & Adding Elements — Build on the Fly

JavaScript lets you create brand new HTML elements and insert them into your page dynamically.

🆕 Creating Elements

// Step 1: Create the element
const newDiv = document.createElement('div');

// Step 2: Add content
newDiv.textContent = "I'm a new div!";

// Step 3: Add styling/classes
newDiv.classList.add('card');
newDiv.style.padding = '20px';

// Step 4: Add to the page
document.body.appendChild(newDiv);

📦 Inserting Elements — Different Ways

const container = document.querySelector('.container');
const newElement = document.createElement('p');
newElement.textContent = "New paragraph";

// Method 1: Add as last child
container.appendChild(newElement);

// Method 2: Add as first child
container.insertBefore(newElement, container.firstChild);

// Method 3: Modern - insertAdjacentElement
container.insertAdjacentElement('afterbegin', newElement); // Start
container.insertAdjacentElement('beforeend', newElement);  // End
container.insertAdjacentElement('beforebegin', newElement); // Before container
container.insertAdjacentElement('afterend', newElement);    // After container

🗑️ Removing Elements

const element = document.querySelector('.remove-me');

// Modern way
element.remove();

// Old way (still works)
element.parentNode.removeChild(element);

📋 Example: To-Do List

const todoList = document.querySelector('#todo-list');
const addButton = document.querySelector('#add-todo');
const input = document.querySelector('#todo-input');

addButton.addEventListener('click', () => {
  // Create new list item
  const li = document.createElement('li');
  li.textContent = input.value;
  li.classList.add('todo-item');
  
  // Add delete button
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '×';
  deleteBtn.addEventListener('click', () => li.remove());
  
  li.appendChild(deleteBtn);
  todoList.appendChild(li);
  
  // Clear input
  input.value = '';
});

🔧 Working with Attributes — The Details

Attributes are the properties you set in HTML tags, like id, src, href, data-*, etc.

🎯 Getting Attributes

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

// Get attribute values
console.log(link.getAttribute('href'));
console.log(img.getAttribute('src'));
console.log(img.getAttribute('alt'));

✏️ Setting Attributes

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

// Set attributes
button.setAttribute('disabled', 'true');
button.setAttribute('aria-label', 'Submit form');
button.setAttribute('data-action', 'submit');

🗑️ Removing Attributes

button.removeAttribute('disabled');

📊 Data Attributes (data-*)

Custom attributes that start with data- are perfect for storing extra information.

// HTML: <div id="user" data-id="123" data-role="admin"></div>

const user = document.querySelector('#user');

// Access via dataset
console.log(user.dataset.id);    // "123"
console.log(user.dataset.role);  // "admin"

// Set new data attribute
user.dataset.status = "active";
// Creates: data-status="active"

🚫 Common Mistakes to Avoid

❌ Mistake 1: Selecting Before DOM is Ready

// ❌ BAD - Script runs before HTML loads
const button = document.querySelector('.btn'); // null!
button.addEventListener('click', ...); // Error!

// ✅ GOOD - Wait for DOM to load
document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('.btn');
  button.addEventListener('click', ...);
});

❌ Mistake 2: Not Checking if Element Exists

// ❌ BAD - Assumes element exists
const header = document.querySelector('.header');
header.textContent = "New title"; // Error if null!

// ✅ GOOD - Check first
const header = document.querySelector('.header');
if (header) {
  header.textContent = "New title";
}

❌ Mistake 3: Using innerHTML with User Input

// ❌ BAD - XSS vulnerability
const userInput = "<script>alert('hacked')</script>";
element.innerHTML = userInput; // Script runs!

// ✅ GOOD - Use textContent for user input
element.textContent = userInput; // Safe, displays as text

❌ Mistake 4: Modifying DOM in a Loop (Slow)

// ❌ BAD - Multiple reflows
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  document.body.appendChild(div); // Triggers reflow each time
}

// ✅ GOOD - Build first, append once
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment); // Single reflow

✅ Best Practices

✓
Use querySelector/querySelectorAll — Most flexible and modern approach
✓
Prefer classList over style — Keep styling in CSS, logic in JavaScript
✓
Use textContent for user input — Prevents XSS attacks
✓
Cache element selections — Store references in variables instead of querying repeatedly
✓
Use DocumentFragment for bulk operations — Better performance
✓
Always check if elements exist — Prevents null reference errors
✓
Use semantic HTML — Makes DOM manipulation easier and more accessible

🧪 Interactive Code Practice

Try out DOM manipulation in this live editor. The code demonstrates selecting, creating, and modifying elements.

DOM Manipulation Practice

Practice DOM manipulation techniques

Try it Yourself »

JavaScript

// ========================================
// DOM MANIPULATION PRACTICE
// ========================================

console.log("🌳 DOM Manipulation Demo\n");

// 1. Selecting Elements
console.log("=== Selecting Elements ===");
const body = document.body;
console.log("Body element:", body.tagName);

// 2. Creating a New Element
console.log("\n=== Creating Elements ===");
const card = document.createElement("div");
card.textContent = "Hello from JavaScript! 👋";
card.style.padding = "20px";
car
...

📚 Quick Reference Guide

🔍 Selection Methods

getElementById(id) — Get element by ID
querySelector(selector) — First match (CSS selector)
querySelectorAll(selector) — All matches
getElementsByClassName() — By class name
getElementsByTagName() — By tag name

🏗️ Creation Methods

createElement(tag) — Create new element
appendChild(element) — Add as last child
insertBefore(new, ref) — Insert before reference
removeChild(element) — Remove child element
element.remove() — Remove element itself

✏️ Content Methods

textContent — Get/set text (safe)
innerHTML — Get/set HTML (powerful)
value — Get/set form input value
innerText — Get/set visible text

🎨 Style & Class Methods

element.style.property — Set inline style
classList.add() — Add CSS class
classList.remove() — Remove CSS class
classList.toggle() — Toggle CSS class
classList.contains() — Check if class exists

🔧 Attribute Methods

getAttribute(name) — Get attribute value
setAttribute(name, val) — Set attribute
removeAttribute(name) — Remove attribute
hasAttribute(name) — Check if exists
dataset.property — Access data-* attributes

🔄 Traversal Methods

parentElement — Get parent element
children — Get child elements
firstElementChild — First child
lastElementChild — Last child
nextElementSibling — Next sibling

🎯 Practice Challenges

Test your DOM manipulation skills with these challenges:

Challenge 1: Profile Card Creator

Create a function that generates a user profile card with:

• Profile picture (use an img element)
• Name and role
• Background color based on role (admin = blue, user = green)
• Click event that logs the user's details

Challenge 2: Dynamic Form Validator

Create a form validator that:

• Selects an input field
• Adds a red border if input is empty
• Shows an error message below the field
• Removes errors when user types

Challenge 3: Color Palette Generator

Build a function that:

• Creates 5 colored div boxes
• Each box has a random background color
• Displays the hex code in the box
• Clicking a box copies the color code

Challenge 4: Table Row Striping

Write code that:

• Selects all rows in a table
• Adds "odd" or "even" class to alternating rows
• Adds hover effect using classList
• Makes clicking a row highlight it

💡 Bonus Challenge:

Build a mini shopping cart that lets users add items, increase quantity, remove items, and see the total price update in real-time — all using DOM manipulation!

💬 Recap

✓The DOM is a tree representation of your HTML that JavaScript can manipulate
✓Use querySelector/querySelectorAll for modern, flexible element selection
✓textContent is safe for user input, innerHTML is powerful but risky
✓classList is the best way to manage CSS classes dynamically
✓You can create, modify, and delete elements on the fly
✓Always check if elements exist before manipulating them
✓DOM manipulation is what makes web pages interactive and dynamic

💡 Final Thought

DOM manipulation is the bridge between your data and what users see. Master it, and you can build anything — from simple counters to complex web applications!

End of Lesson 4 — DOM Manipulation

Next up: Learn how to respond to user actions with Event Handling! 🎉

📋 Quick Reference — DOM Manipulation

Task	Code
Select element	`document.querySelector('.btn')`
Change text	`el.textContent = "Hello"`
Add class	`el.classList.add('active')`
Create element	`document.createElement('div')`
Remove element	`el.remove()`

Lesson 4 Complete — DOM Manipulation!

You can now select, modify, create, and remove HTML elements using JavaScript — making your webpages truly dynamic!

Up next: JavaScript Events — respond to clicks, keyboard presses, and more! ⚡