DOM Manipulation in JavaScript

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. JavaScript is the primary language used to manipulate the DOM, allowing you to create dynamic and interactive web pages.

Understanding the DOM

The DOM represents an HTML document as a tree of nodes. Each node represents a part of the document, such as an element, attribute, or text. Understanding this tree structure is essential for effective DOM manipulation.

/*
DOM Tree Structure Example:

document
└── html
    ├── head
    │   ├── title
    │   │   └── "My Web Page"
    │   └── meta
    └── body
        ├── h1
        │   └── "Hello World"
        ├── p
        │   └── "This is a paragraph"
        └── div
            ├── span
            │   └── "Inside a span"
            └── button
                └── "Click Me"
*/
                

Accessing DOM Elements

JavaScript provides several methods to access elements in the DOM. These methods are available on the document object.

getElementById

The getElementById() method returns the element with the specified ID.

// HTML: <div id="myDiv">Hello</div>

// Get element by ID

const divElement = document.getElementById('myDiv');

console.log(divElement.textContent); // "Hello"

getElementsByClassName

The getElementsByClassName() method returns a live HTMLCollection of elements with the specified class name.

// HTML: 

// <p class="highlight">First paragraph</p>

// <p class="highlight">Second paragraph</p>

// Get elements by class name

const highlightedElements = document.getElementsByClassName('highlight');

console.log(highlightedElements.length); // 2

console.log(highlightedElements[0].textContent); // "First paragraph"

// HTMLCollection is live - it updates automatically when elements change

// To convert to a static array:

const elementsArray = Array.from(highlightedElements);

getElementsByTagName

The getElementsByTagName() method returns a live HTMLCollection of elements with the specified tag name.

// Get all paragraph elements

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

console.log(paragraphs.length); // Number of paragraphs in the document

// Get elements within a specific context

const div = document.getElementById('container');

const paragraphsInDiv = div.getElementsByTagName('p'); // Only paragraphs inside #container

querySelector

The querySelector() method returns the first element that matches a specified CSS selector.

// Get the first paragraph element

const firstParagraph = document.querySelector('p');

// Get the first element with class 'highlight'

const highlighted = document.querySelector('.highlight');

// Get the element with ID 'header'

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

// More complex selectors

const nestedElement = document.querySelector('div.container > ul li:first-child');

querySelectorAll

The querySelectorAll() method returns a static NodeList of all elements that match a specified CSS selector.

// Get all paragraph elements

const allParagraphs = document.querySelectorAll('p');

// Get all elements with class 'highlight'

const allHighlighted = document.querySelectorAll('.highlight');

// Get all links inside the navigation

const navLinks = document.querySelectorAll('nav a');

// Iterate through the NodeList

allParagraphs.forEach(paragraph => {

    console.log(paragraph.textContent);

});

Creating and Modifying Elements

JavaScript allows you to create new elements, modify existing ones, and insert them into the DOM.

Creating Elements

The createElement() method creates a new element with the specified tag name.

// Create a new paragraph element

const newParagraph = document.createElement('p');

// Create a new button element

const newButton = document.createElement('button');

// Create a text node

const textNode = document.createTextNode('This is a new text node');

Setting Content and Attributes

After creating an element, you can set its content and attributes.

// Set text content

newParagraph.textContent = 'This is a new paragraph.';

// Alternative: Set HTML content (be careful with this for security reasons)

newParagraph.innerHTML = 'This is a <strong>new</strong> paragraph.';

// Set attributes

newButton.setAttribute('id', 'submitBtn');

newButton.setAttribute('class', 'btn primary');

newButton.setAttribute('type', 'submit');

// Alternative ways to set attributes

newButton.id = 'submitBtn';

newButton.className = 'btn primary';

newButton.type = 'submit';

// Add data attributes

newButton.dataset.action = 'submit';

newButton.dataset.targetForm = 'contactForm';

Inserting Elements into the DOM

Once you've created and configured an element, you can insert it into the DOM.

// Get the parent element where we want to insert our new element

const container = document.getElementById('container');

// Append as the last child

container.appendChild(newParagraph);

// Insert before a specific child

const referenceElement = document.getElementById('existingElement');

container.insertBefore(newButton, referenceElement);

// Modern insertion methods

// Append multiple nodes at once (at the end)

container.append(newParagraph, textNode, 'Plain text too');

// Prepend (at the beginning)

container.prepend(newButton);

// Insert adjacent to an element

referenceElement.before(newParagraph); // Before the reference element

referenceElement.after(newButton);     // After the reference element

Removing Elements

You can remove elements from the DOM using several methods.

// Remove an element (older method)

const elementToRemove = document.getElementById('oldElement');

elementToRemove.parentNode.removeChild(elementToRemove);

// Modern method - remove the element directly

elementToRemove.remove();

// Remove all children of an element

const container = document.getElementById('container');

while (container.firstChild) {

    container.removeChild(container.firstChild);

}

// Alternative way to remove all children

container.innerHTML = '';

Manipulating Element Styles

JavaScript provides several ways to manipulate the styles of DOM elements.

Inline Styles

You can directly manipulate an element's inline styles using the style property.

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

// Set individual style properties

element.style.color = 'blue';

element.style.backgroundColor = '#f0f0f0';

element.style.padding = '10px';

element.style.borderRadius = '5px';

// CSS properties with hyphens are written in camelCase in JavaScript

element.style.fontSize = '16px';          // font-size

element.style.marginBottom = '20px';      // margin-bottom

element.style.textAlign = 'center';       // text-align

// Get computed style (actual rendered style)

const computedStyle = window.getComputedStyle(element);

console.log(computedStyle.color);

console.log(computedStyle.getPropertyValue('font-size'));

CSS Classes

Manipulating CSS classes is often a better approach than setting inline styles directly.

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

// Add a class

element.classList.add('highlight');

// Add multiple classes

element.classList.add('active', 'visible');

// Remove a class

element.classList.remove('inactive');

// Toggle a class (add if not present, remove if present)

element.classList.toggle('selected');

// Check if an element has a specific class

if (element.classList.contains('highlight')) {

    console.log('Element has highlight class');

}

// Replace one class with another

element.classList.replace('old-class', 'new-class');

// Set the entire className (overwrites all existing classes)

// Generally not recommended as it removes all existing classes

element.className = 'btn primary';

Traversing the DOM

DOM traversal allows you to navigate through the DOM tree to find related elements.

Parent-Child Relationships

You can navigate up and down the DOM tree using parent-child relationships.

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

// Get the parent node

const parent = element.parentNode;

// or

const parent2 = element.parentElement; // Returns null if parent is not an element

// Get all child nodes (including text nodes, comments, etc.)

const childNodes = element.childNodes;

// Get only element children (excluding text nodes, comments, etc.)

const children = element.children;

// Get first and last child (including text nodes, comments, etc.)

const firstChild = element.firstChild;

const lastChild = element.lastChild;

// Get first and last element child

const firstElementChild = element.firstElementChild;

const lastElementChild = element.lastElementChild;

Sibling Relationships

You can navigate horizontally through the DOM tree using sibling relationships.

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

// Get next sibling (including text nodes, comments, etc.)

const nextSibling = element.nextSibling;

// Get previous sibling (including text nodes, comments, etc.)

const previousSibling = element.previousSibling;

// Get next element sibling

const nextElementSibling = element.nextElementSibling;

// Get previous element sibling

const previousElementSibling = element.previousElementSibling;

Advanced Traversal

For more complex traversal needs, you can combine methods or use specialized techniques.

// Find closest ancestor that matches a selector

const closestAncestor = element.closest('.container');

// Get all ancestors up to a specific element

function getAncestors(element, stopAt = document.body) {

    const ancestors = [];

    let current = element.parentElement;

    while (current && current !== stopAt) {

        ancestors.push(current);

        current = current.parentElement;

    }

    return ancestors;

}

// Find all siblings

function getAllSiblings(element) {

    const siblings = [];

    let sibling = element.parentNode.firstChild;

    while (sibling) {

        if (sibling.nodeType === 1 && sibling !== element) {

            siblings.push(sibling);

        }

        sibling = sibling.nextSibling;

    }

    return siblings;

}

Handling Element Attributes

DOM elements have attributes that you can read, modify, and remove.

const link = document.getElementById('myLink');

// Get attribute value

const href = link.getAttribute('href');

// Set attribute value

link.setAttribute('href', 'https://example.com');

link.setAttribute('target', '_blank');

// Check if attribute exists

const hasTitle = link.hasAttribute('title');

// Remove attribute

link.removeAttribute('data-obsolete');

// Get all attributes

const attributes = link.attributes;

for (let i = 0; i < attributes.length; i++) {

    console.log(`${attributes[i].name}: ${attributes[i].value}`);

}

// Direct property access for common attributes

console.log(link.href);       // Gets the absolute URL

link.target = '_self';        // Sets the target attribute

link.id = 'newLinkId';        // Sets the id attribute

link.className = 'external';   // Sets the class attribute

Working with Forms

JavaScript provides special features for working with form elements.

// Get a form by its ID

const form = document.getElementById('myForm');

// Alternative: access forms collection

const firstForm = document.forms[0];         // First form in the document

const namedForm = document.forms['contactForm']; // Form with name="contactForm"

// Access form elements

const nameInput = form.elements['name'];      // Input with name="name"

const emailInput = form.elements['email'];    // Input with name="email"

const firstElement = form.elements[0];        // First form element

// Get and set form field values

const username = nameInput.value;             // Get value

emailInput.value = 'user@example.com';       // Set value

// Working with different input types

const checkbox = form.elements['subscribe'];

console.log(checkbox.checked);               // Boolean: true if checked

checkbox.checked = true;                     // Check the checkbox

// Radio buttons

const radioButtons = form.elements['gender'];

for (const radio of radioButtons) {

    if (radio.checked) {

        console.log(`Selected gender: ${radio.value}`);

        break;

    }

}

// Select dropdown

const select = form.elements['country'];

console.log(`Selected country: ${select.value}`);

console.log(`Selected option text: ${select.options[select.selectedIndex].text}`);

// Set selected option by value

select.value = 'ca';  // Selects option with value="ca"

// Set selected option by index

select.selectedIndex = 2;  // Selects the third option

DOM Events and Event Delegation

While events are covered in detail in the next lesson, here's a brief overview of how they relate to DOM manipulation.

// Basic event handling

const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {

    console.log('Button clicked!');

});

// Event delegation - handling events for multiple elements with a single listener

const list = document.getElementById('myList');

list.addEventListener('click', function(event) {

    // Check if the clicked element is a list item

    if (event.target.tagName === 'LI') {

        console.log(`List item clicked: ${event.target.textContent}`);

    }

});

DOM Fragments

Document fragments allow you to build a DOM structure off-document and then insert it all at once, which is more efficient for multiple insertions.

// Create a document fragment

const fragment = document.createDocumentFragment();

// Build up the fragment with elements

for (let i = 0; i < 100; i++) {

    const listItem = document.createElement('li');

    listItem.textContent = `Item ${i}`;

    fragment.appendChild(listItem);

}

// Insert the entire fragment at once (only one reflow/repaint)

const list = document.getElementById('myList');

list.appendChild(fragment);

DOM Performance Optimization

DOM operations can be expensive in terms of performance. Here are some techniques to optimize DOM manipulation.

// 1. Minimize DOM access and modifications

// Bad: Repeatedly accessing the DOM in a loop

for (let i = 0; i < 1000; i++) {

    document.getElementById('result').innerHTML += `Number: ${i} `; // Causes many reflows

}

// Good: Build content off-DOM and insert once

let content = '';

for (let i = 0; i < 1000; i++) {

    content += `Number: ${i} `;

}

document.getElementById('result').innerHTML = content; // Only one reflow

// 2. Use document fragments for multiple insertions

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {

    const div = document.createElement('div');

    div.textContent = `Item ${i}`;

    fragment.appendChild(div);

}

document.getElementById('container').appendChild(fragment); // Only one reflow

// 3. Batch DOM updates using requestAnimationFrame

function updateUI() {

    // Read DOM

    const width = element.offsetWidth;

    requestAnimationFrame(() => {

        // Write DOM (in next animation frame)

        element.style.width = (width + 10) + 'px';

        element.style.height = (width + 10) + 'px';

    });

}

// 4. Use CSS classes instead of inline styles when possible

// Bad: Setting multiple inline styles

element.style.color = 'red';

element.style.backgroundColor = 'blue';

element.style.fontSize = '16px';

// Good: Toggle a class that contains all styles

element.classList.add('highlighted');

Cross-Browser Compatibility

While modern browsers have largely standardized DOM APIs, you may still encounter compatibility issues, especially with older browsers.

// Feature detection

if (document.querySelector) {

    // Browser supports querySelector

    const element = document.querySelector('.my-class');

} else {

    // Fallback for older browsers

    const elements = document.getElementsByClassName('my-class');

    const element = elements[0];

}

// Polyfill example for Element.matches()

if (!Element.prototype.matches) {

    Element.prototype.matches = 

        Element.prototype.matchesSelector || 

        Element.prototype.mozMatchesSelector ||

        Element.prototype.msMatchesSelector || 

        Element.prototype.oMatchesSelector || 

        Element.prototype.webkitMatchesSelector ||

        function(s) {

            const matches = (this.document || this.ownerDocument).querySelectorAll(s);

            let i = matches.length;

            while (--i >= 0 && matches.item(i) !== this) {}

            return i > -1;

        };

}

Practice Exercise: Dynamic Content Generator

Let's apply what we've learned by creating a dynamic content generator that manipulates the DOM.

// HTML structure:

// <div id="content-container"></div>

// <button id="add-card">Add Card</button>

// <button id="toggle-theme">Toggle Theme</button>

// <button id="clear-all">Clear All</button>

document.addEventListener('DOMContentLoaded', () => {

    // Get references to DOM elements

    const container = document.getElementById('content-container');

    const addCardButton = document.getElementById('add-card');

    const toggleThemeButton = document.getElementById('toggle-theme');

    const clearAllButton = document.getElementById('clear-all');

    // Initialize card counter

    let cardCount = 0;

    // Function to create a new card

    function createCard() {

        // Increment card counter

        cardCount++;

        // Create card elements

        const card = document.createElement('div');

        card.className = 'card';

        card.dataset.id = cardCount;

        const cardHeader = document.createElement('div');

        cardHeader.className = 'card-header';

        const cardTitle = document.createElement('h3');

        cardTitle.textContent = `Card ${cardCount}`;

        const deleteButton = document.createElement('button');

        deleteButton.className = 'delete-btn';

        deleteButton.textContent = '×';

        deleteButton.setAttribute('aria-label', 'Delete card');

        const cardBody = document.createElement('div');

        cardBody.className = 'card-body';

        const cardText = document.createElement('p');

        cardText.textContent = `This is card number ${cardCount}. Click to edit.`;

        // Build the card structure

        cardHeader.appendChild(cardTitle);

        cardHeader.appendChild(deleteButton);

        cardBody.appendChild(cardText);

        card.appendChild(cardHeader);

        card.appendChild(cardBody);

        // Add event listeners

        deleteButton.addEventListener('click', (e) => {

            e.stopPropagation(); // Prevent card click event

            card.classList.add('fade-out');

            // Remove after animation completes

            setTimeout(() => {

                card.remove();

                updateCardCount();

            }, 300);

        });

        cardText.addEventListener('click', () => {

            const newText = prompt('Edit card text:', cardText.textContent);

            if (newText !== null) {

                cardText.textContent = newText;

            }

        });

        // Add the card to the container with animation

        card.classList.add('fade-in');

        container.appendChild(card);

        // Update the card count display

        updateCardCount();

    }

    // Function to update card count display

    function updateCardCount() {

        const currentCount = container.querySelectorAll('.card').length;

        document.title = `Cards: ${currentCount}`;

    }

    // Add event listeners to buttons

    addCardButton.addEventListener('click', createCard);

    toggleThemeButton.addEventListener('click', () => {

        document.body.classList.toggle('dark-theme');

        // Save theme preference

        const isDarkTheme = document.body.classList.contains('dark-theme');

        localStorage.setItem('darkTheme', isDarkTheme);

        // Update button text

        toggleThemeButton.textContent = isDarkTheme ? 'Light Theme' : 'Dark Theme';

    });

    clearAllButton.addEventListener('click', () => {

        if (container.children.length === 0) return;

        if (confirm('Are you sure you want to remove all cards?')) {

            // Remove all cards with staggered animation

            const cards = Array.from(container.querySelectorAll('.card'));

            cards.forEach((card, index) => {

                setTimeout(() => {

                    card.classList.add('fade-out');

                    setTimeout(() => {

                        card.remove();

                        // Update count after last card is removed

                        if (index === cards.length - 1) {

                            updateCardCount();

                        }

                    }, 300);

                }, index * 100);

            });

        }

    });

    // Load theme preference

    if (localStorage.getItem('darkTheme') === 'true') {

        document.body.classList.add('dark-theme');

        toggleThemeButton.textContent = 'Light Theme';

    }

    // Create initial cards

    for (let i = 0; i < 3; i++) {

        createCard();

    }

});

Best Practices for DOM Manipulation

Follow these best practices to ensure your DOM manipulation code is efficient, maintainable, and performs well:

Minimize DOM access and modifications to avoid excessive reflows and repaints
Use document fragments for batch insertions
Cache DOM references when accessing elements multiple times
Prefer CSS classes over inline styles for visual changes
Use event delegation for handling events on multiple similar elements
Separate DOM manipulation logic from business logic
Use modern DOM APIs when possible, with appropriate polyfills for older browsers
Consider using requestAnimationFrame for animations and visual updates
Remove event listeners when elements are removed to prevent memory leaks
Use data attributes (dataset) to store data related to DOM elements

Common Pitfalls

Be aware of these common issues when working with the DOM:

Excessive DOM manipulation causing performance issues
Memory leaks from forgotten event listeners
Cross-browser compatibility issues with newer DOM APIs
Security vulnerabilities from improper use of innerHTML with user input
Layout thrashing from reading and writing DOM properties in rapid succession
Failing to account for asynchronous DOM updates
Not properly handling null or undefined elements when querying the DOM

Further Learning

To deepen your understanding of DOM manipulation, consider exploring:

Shadow DOM and Web Components
Virtual DOM concepts (used in libraries like React)
MutationObserver API for tracking DOM changes
IntersectionObserver API for detecting element visibility
ResizeObserver API for monitoring element size changes
Advanced DOM performance optimization techniques