JavaScript DOM Manipulation - Complete Guide

The DOM (Document Object Model) is how JavaScript interacts with HTML. Learning DOM manipulation is essential for making websites interactive. Let's master it together!

What is the DOM?

The DOM is a representation of your HTML page that JavaScript can understand and modify. Think of it as a tree structure where each HTML element is a node.

HTML Structure:
┌─────────────────────────────┐
│ <html>                      │
│   <body>                    │
│     <h1>Title</h1>          │
│     <p>Content</p>          │
│   </body>                   │
│ </html>                     │
└─────────────────────────────┘
         │
         ▼
DOM Tree:
┌──────────────┐
│   html       │
│     │        │
│   body       │
│     │        │
│   ├─h1       │
│   └─p        │
└──────────────┘

Selecting Elements

getElementById

Select element by ID:

let element = document.getElementById('myId');

getElementsByClassName

Select elements by class:

let elements = document.getElementsByClassName('myClass');
// Returns HTMLCollection (array-like)

getElementsByTagName

Select elements by tag name:

let paragraphs = document.getElementsByTagName('p');

querySelector (Modern - Recommended)

Select first matching element:

let element = document.querySelector('#myId');
let element2 = document.querySelector('.myClass');
let element3 = document.querySelector('p');

querySelectorAll

Select all matching elements:

let elements = document.querySelectorAll('.myClass');
// Returns NodeList (array-like)

Modifying Content

textContent

Change text content:

let heading = document.querySelector('h1');
heading.textContent = "New Title";

innerHTML

Change HTML content:

let div = document.querySelector('#myDiv');
div.innerHTML = "<p>New content</p>";

Warning: Be careful with innerHTML - it can be a security risk with user input!

innerText

Change visible text:

let p = document.querySelector('p');
p.innerText = "New text";

Modifying Attributes

getAttribute / setAttribute

let link = document.querySelector('a');
 
// Get attribute
let href = link.getAttribute('href');
 
// Set attribute
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');

Direct Property Access

let img = document.querySelector('img');
img.src = 'new-image.jpg';
img.alt = 'New image';
img.className = 'new-class';

Modifying Styles

style Property

let element = document.querySelector('#myElement');
 
element.style.color = 'red';
element.style.backgroundColor = 'blue';
element.style.fontSize = '20px';
element.style.display = 'none';

classList

Add/remove CSS classes:

let element = document.querySelector('#myElement');
 
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('highlight');
element.classList.contains('active');  // true/false

Creating Elements

createElement

Create new elements:

// Create element
let newDiv = document.createElement('div');
newDiv.textContent = "New div";
newDiv.className = "my-class";
 
// Add to page
document.body.appendChild(newDiv);

createTextNode

Create text nodes:

let text = document.createTextNode("Hello, World!");
let p = document.createElement('p');
p.appendChild(text);
document.body.appendChild(p);

Adding Elements

appendChild

Add element as last child:

let newP = document.createElement('p');
newP.textContent = "New paragraph";
document.body.appendChild(newP);

insertBefore

Insert element before another:

let newP = document.createElement('p');
let existingP = document.querySelector('p');
document.body.insertBefore(newP, existingP);

insertAdjacentHTML

Insert HTML at specific position:

let div = document.querySelector('#myDiv');
div.insertAdjacentHTML('beforeend', '<p>New content</p>');
// Positions: beforebegin, afterbegin, beforeend, afterend

Removing Elements

removeChild

let element = document.querySelector('#myElement');
element.parentNode.removeChild(element);

remove (Modern)

let element = document.querySelector('#myElement');
element.remove();

Event Listeners

addEventListener

Listen for events:

let button = document.querySelector('#myButton');
 
button.addEventListener('click', function() {
    console.log('Button clicked!');
});
 
// Arrow function
button.addEventListener('click', () => {
    console.log('Button clicked!');
});

Common Events

// Click
element.addEventListener('click', handler);
 
// Input change
input.addEventListener('change', handler);
 
// Form submit
form.addEventListener('submit', handler);
 
// Key press
document.addEventListener('keydown', handler);
 
// Mouse events
element.addEventListener('mouseenter', handler);
element.addEventListener('mouseleave', handler);

removeEventListener

Remove event listener:

function handleClick() {
    console.log('Clicked');
}
 
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

Visual Explanation: DOM Manipulation Flow

Here's how DOM manipulation works:

User Action
       │
       ▼
┌──────────────┐
│ Event        │
│ Triggered    │
└──────┬───────┘
       │
       ▼
┌──────────────┐
│ JavaScript   │
│ Handler      │
│ Executes     │
└──────┬───────┘
       │
       ▼
┌──────────────┐
│ DOM          │
│ Modified     │
└──────┬───────┘
       │
       ▼
┌──────────────┐
│ Page         │
│ Updates      │
└──────────────┘

Complete Example

// Select element
let button = document.querySelector('#myButton');
let output = document.querySelector('#output');
 
// Add event listener
button.addEventListener('click', function() {
    // Create new element
    let p = document.createElement('p');
    p.textContent = 'Button was clicked!';
    p.className = 'message';
    
    // Add to page
    output.appendChild(p);
    
    // Change button style
    button.style.backgroundColor = 'green';
    button.textContent = 'Clicked!';
});

Frequently Asked Questions (FAQ)

Q1: What's the difference between getElementById and querySelector?

getElementById - Only for IDs, faster
querySelector - More flexible, can use any CSS selector

Use querySelector for flexibility, getElementById for performance with IDs.

Q2: What's the difference between textContent and innerHTML?

textContent - Plain text only, safer
innerHTML - Can include HTML tags, security risk with user input

Use textContent for plain text, innerHTML only when you need HTML.

Q3: Can I select multiple elements?

A: Yes! Use querySelectorAll:

let elements = document.querySelectorAll('.myClass');
elements.forEach(el => {
    // Do something with each element
});

Q4: What happens if element doesn't exist?

A: querySelector returns null. Always check:

let element = document.querySelector('#myId');
if (element) {
    element.textContent = "Hello";
}

Q5: How do I wait for DOM to load?

A: Use DOMContentLoaded:

document.addEventListener('DOMContentLoaded', function() {
    // DOM is ready
});

Q6: What's the difference between appendChild and insertBefore?

appendChild - Adds as last child
insertBefore - Adds before specific element

Q7: Can I clone elements?

A: Yes! Use cloneNode:

let original = document.querySelector('#original');
let clone = original.cloneNode(true);  // true = deep clone

Q8: How do I get parent element?

A: Use parentNode or parentElement:

let child = document.querySelector('.child');
let parent = child.parentNode;

Q9: What's the difference between NodeList and HTMLCollection?

NodeList - From querySelectorAll, has forEach
HTMLCollection - From getElementsByClassName, live collection

Q10: Can I modify multiple elements at once?

A: Yes! Loop through them:

let elements = document.querySelectorAll('.myClass');
elements.forEach(el => {
    el.style.color = 'red';
});

Next Steps

Now that you understand DOM manipulation, here's what to learn next:

Next: Learn about JavaScript Events - Handle user interactions in detail
Explore JavaScript Forms - Work with form data
Understand JavaScript Async - Handle asynchronous operations
Master JavaScript Best Practices - Write better code

DOM manipulation is essential for interactive websites. Practice selecting and modifying elements to get comfortable!