DOM Tips & Tricks. An Entry Level Guide for Developers

In this blog, I will cover the most frequently used DOM manipulation tasks that every developer should know. From selecting elements and modifying content to handling events and dynamically updating styles, these essential techniques will help you build more interactive and responsive web applications.

Let’s dive in and explore the power of JavaScript DOM manipulation with practical examples!

Basic Operations:

1. Toggling Elements

Changing text and styles dynamically (e.g., Light Bulb Toggle).
Switching between dark mode and light mode.

Demo Project - https://dom-challenges-q7mnulz9i-ram-bhardwajs-projects.vercel.app/challenge-1/index.html

Tips:

Check the Status → Perform Operation → Change the Status

toggleBtn.addEventListener('click', ()=>{
    if( currStatus == 'Turn On'){            // Check the current status 
        bulb.classList.remove('off')         // Operation
        toggleBtn.innerText = "Turn Off"     // Operation
        body.classList.add('dark-mode')      // Operation  
        statusSign.innerText = 'Status On'   // Change the Status 
    }else{
        bulb.classList.add('off')
        toggleBtn.innerText = "Turn On"
        body.classList.remove('dark-mode')
        statusSign.innerText = 'Status Off'
    }
})

2. Handling User Input

Capturing user input from text fields.
Displaying input dynamically (e.g., Real-time Form Input Display).
Showing placeholder text when input is empty.

Demo Project - https://dom-challenges-q7mnulz9i-ram-bhardwajs-projects.vercel.app/challenge-3/index.html

Tips

Instead of ‘change’ event use ‘input’ event which changes the connected state is real time.

nameInput.addEventListener('input', ()=>{
    nameDisplay.textContent = nameInput.value 
})

3. Adding new items dynamically

Creating an element from JS based on user actions
Deleting items from a list based on user actions
Updating UI when items are added or removed

Demo Link - https://dom-challenges-q7mnulz9i-ram-bhardwajs-projects.vercel.app/challenge-4/index.html

Tips:

ADDING ELEMENT: CreateElement → Add CSS class
DELETING ELEMENT: referenceItem.remove()
EDITING ELEMENT: Add eventListener to the item like dblclick → store the current test in an element → create a new input → add the new empty input to the current element → handle events such as if user clicks outside the input area or press enter

   document.querySelectorAll(".todo-item").forEach(item => {
            item.addEventListener("dblclick", function() {
                let currentText = this.innerText;
                let input = document.createElement("input");
                input.type = "text";
                input.value = currentText;

                this.innerHTML = ""; 
                this.appendChild(input);
                input.focus();

//How blur Works Here: When the user doubleclicks a task, an input field appears for editing.
//If the user clicks anywhere outside the input(i.e., the input loses focus), the blur event triggers.
// The function saveEdit() replaces the input field with the updated task text.
                input.addEventListener("blur", function() {
                    saveEdit(item, input.value);
                });

                input.addEventListener("keypress", function(event) {
                    if (event.key === "Enter") {
                        saveEdit(item, input.value);
                    }
                });
            });
        });

        function saveEdit(item, newText) {
            item.innerHTML = newText || "Untitled Task";
        }

4. Tracking and Updating State

Displaying statistics (e.g., Total tasks, Completed tasks).
Showing a message when no items are present.
Updating counters dynamically.

        deleteTask.addEventListener('click', () => {
            total--;
            .
            .    
            .
            //------------------------------------------------------- 
            if(total == 0) {
                taskList.appendChild(emptyTask);
            }
        }

Medium Level Operations

Working with Images and Media

Displaying images dynamically (e.g., Image Carousel).
Navigating through images using buttons.
Creating an automatic slideshow with a timer.
Using indicators to switch between images.

Demo Project https://dom-challenges-q7mnulz9i-ram-bhardwajs-projects.vercel.app/challenge-5/index.html