DOM Manipulation with JavaScript

What is the DOM?

The Document Object Model (DOM) is a programming interface that represents HTML as a tree of objects. JavaScript can interact with this tree to modify page content and behavior.

Selecting Elements

By ID

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

By Class

const elements = document.getElementsByClassName('myClass');
// Returns HTMLCollection (live)

By Tag

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

Query Selector (Recommended)

// Single element (first match)
const element = document.querySelector('.myClass');
const element = document.querySelector('#myId');
const element = document.querySelector('div.container > p');

// Multiple elements
const elements = document.querySelectorAll('.myClass');
// Returns NodeList (static)

Modifying Content

Text Content

element.textContent = 'New text content';
const text = element.textContent;  // Get text

HTML Content

element.innerHTML = '<strong>Bold text</strong>';
// Be careful with user input - XSS risk!

Attributes

// Get attribute
const src = img.getAttribute('src');

// Set attribute
img.setAttribute('src', 'new-image.jpg');
img.src = 'new-image.jpg';  // Direct property

// Remove attribute
element.removeAttribute('disabled');

// Check attribute
element.hasAttribute('required');

Classes

element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('open');
element.classList.contains('active');  // true/false
element.classList.replace('old', 'new');

Styles

element.style.color = 'blue';
element.style.backgroundColor = '#f0f0f0';
element.style.cssText = 'color: blue; font-size: 16px;';

// Get computed style
const styles = getComputedStyle(element);
const color = styles.color;

Creating Elements

// Create element
const div = document.createElement('div');
div.className = 'card';
div.textContent = 'Hello';

// Add to DOM
parent.appendChild(div);
parent.insertBefore(div, referenceElement);
parent.prepend(div);  // Add first
parent.append(div);   // Add last

// Insert adjacent
element.insertAdjacentHTML('beforebegin', '<p>Before</p>');
element.insertAdjacentHTML('afterbegin', '<p>First child</p>');
element.insertAdjacentHTML('beforeend', '<p>Last child</p>');
element.insertAdjacentHTML('afterend', '<p>After</p>');

Removing Elements

element.remove();
parent.removeChild(child);

Traversing the DOM

// Parent
element.parentElement;
element.parentNode;

// Children
element.children;           // HTMLCollection
element.childNodes;         // Includes text nodes
element.firstElementChild;
element.lastElementChild;

// Siblings
element.nextElementSibling;
element.previousElementSibling;

// Closest ancestor matching selector
element.closest('.container');

Event Handling

// Add event listener
element.addEventListener('click', (event) => {
    console.log('Clicked!', event.target);
});

// Remove event listener
element.removeEventListener('click', handler);

// Common events
// click, dblclick, mouseenter, mouseleave
// keydown, keyup, keypress
// submit, change, input, focus, blur
// load, DOMContentLoaded, scroll, resize

Event Delegation

// Instead of adding listeners to each button...
document.querySelector('.button-container').addEventListener('click', (e) => {
    if (e.target.matches('button')) {
        console.log('Button clicked:', e.target.textContent);
    }
});

Best Practices

1. Cache DOM queries in variables
2. Use event delegation for dynamic content
3. Batch DOM updates for performance
4. Prefer textContent over innerHTML when possible
5. Use classList instead of manipulating className string

Continue with Event Handling Guide.