JavaScript DOM Manipulation

What's the DOM?

When you write HTML, the browser turns it into something called the DOM (Document Object Model). Think of it like this:

Your HTML File:
┌─────────────────────┐
│  <h1>Hello</h1>     │
│  <p>World</p>       │
└─────────────────────┘
         │
         │ Browser reads it
         │
┌────────▼────────────┐
│   DOM (in memory)   │
│  ┌───────────────┐  │
│  │ h1: "Hello"   │  │ ← JavaScript can change this
│  │ p: "World"    │  │ ← JavaScript can change this
│  └───────────────┘  │
└─────────────────────┘

The DOM is like a live version of your HTML that JavaScript can read and change. When JavaScript changes the DOM, the webpage updates instantly.

Finding Elements on the Page

Before you can change something, you need to find it. Like finding a book in a library - you need to know where it is.

Find by ID (most common):

const heading = document.getElementById('myHeading');

This finds the element with id="myHeading" in your HTML.

Find by class:

const boxes = document.getElementsByClassName('box');

This finds all elements with class="box".

Modern way (recommended):

const heading = document.querySelector('#myHeading');
const boxes = document.querySelectorAll('.box');

querySelector finds one element. querySelectorAll finds all matching elements.

Changing Text Content

Once you have an element, you can change what it says:

const heading = document.getElementById('title');
heading.textContent = 'New Title';

What happens:

1. Find the element with id "title"
2. Change its text to "New Title"
3. The page updates immediately

Changing HTML Content

You can also change the HTML inside an element:

const div = document.getElementById('content');
div.innerHTML = '<p>This is <strong>bold</strong> text</p>';

This replaces everything inside the element with new HTML.

Changing Styles

You can change how elements look:

const box = document.getElementById('myBox');
box.style.color = 'red';
box.style.backgroundColor = 'blue';
box.style.fontSize = '20px';

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

Adding New Elements

You can create new elements and add them to the page:

// Step 1: Create a new element
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph';

// Step 2: Find where to add it
const container = document.getElementById('container');

// Step 3: Add it to the page
container.appendChild(newParagraph);

What happens:

1. Create a new <p> element
2. Give it some text
3. Find the container where you want it
4. Add it to that container

Removing Elements

You can also remove elements:

const element = document.getElementById('toRemove');
element.remove();

This removes the element from the page completely.

Real Example: Dynamic List

Let's say you're building a to-do list where users can add items:

function addTodoItem(text) {
  // Create new list item
  const newItem = document.createElement('li');
  newItem.textContent = text;
  
  // Find the list
  const todoList = document.getElementById('todoList');
  
  // Add the new item
  todoList.appendChild(newItem);
}

// Use it
addTodoItem('Buy groceries');
addTodoItem('Walk the dog');

Each time you call this function, a new item appears on the page.

How It All Works Together

1. HTML loads
   ┌─────────────┐
   │ <h1 id="x"> │
   └─────────────┘
   
2. JavaScript finds it
   document.getElementById('x')
   
3. JavaScript changes it
   element.textContent = 'New'
   
4. Page updates
   User sees the change!

Quick Tips

1. Always find elements first - You can't change what you haven't found
2. Use querySelector for modern code - It's more flexible
3. Use textContent for plain text - Safer than innerHTML
4. Use innerHTML only when you need HTML - Be careful with user input

The DOM is how JavaScript talks to your webpage. Without it, JavaScript couldn't change anything on the page. With it, you can make websites that respond and update in real-time.