DOM Manipulation – Complete Guide

What is DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the page as a structured tree of objects that can be manipulated with JavaScript.

Every HTML element becomes a node in this tree.
You can add, remove, or modify these elements using JavaScript.

DOM Access Methods

document.getElementById(id)
document.getElementsByClassName(class)
document.getElementsByTagName(tag)
document.querySelector(selector)
document.querySelectorAll(selector)

Node Properties

node.innerHTML: Get/set HTML content
node.textContent: Get/set text content
node.innerText: Similar to textContent but respects CSS styles
node.nodeType: Type of the node (1 = Element, 3 = Text, etc.)
node.nodeName: Name of the node (e.g., DIV, SPAN)

Traversing the DOM

parentNode, childNodes, firstChild, lastChild
children, firstElementChild, lastElementChild
nextSibling, previousSibling, nextElementSibling

Creating and Modifying Elements

document.createElement("tag")
node.appendChild(child)
node.insertBefore(newNode, referenceNode)
node.replaceChild(newNode, oldNode)
node.removeChild(child)

Attributes Manipulation

element.setAttribute("attr", "value")
element.getAttribute("attr")
element.removeAttribute("attr")
Also accessible directly like: element.id, element.href, etc.

Class Manipulation

element.classList.add("class")
element.classList.remove("class")
element.classList.toggle("class")
element.classList.contains("class")

Style Manipulation

element.style.property (e.g., element.style.color = "red")
To access computed styles: window.getComputedStyle(element)

Event Handling

element.addEventListener("event", callback)
element.removeEventListener("event", callback)
Common events: click, mouseover, keydown, submit

Event Object Properties:

event.target, event.currentTarget
event.preventDefault(), event.stopPropagation()

Event Delegation

Attaching one event listener to a parent element to handle events from children using event.target. Efficient for dynamically added elements.

Forms & Input

Access form: document.forms["formName"]
Input values: inputElement.value
Radio/Checkbox: element.checked
Submit forms: form.submit()

Advanced Techniques

MutationObserver: Watch for changes in the DOM
Shadow DOM: Encapsulation inside web components
template & slot: Declarative DOM fragments in HTML5

Performance Tips

Use documentFragment when adding multiple elements
Avoid layout thrashing (multiple reads & writes)
Debounce expensive event listeners (scroll, resize)

Best Practices

Use const / let for variables
Keep selectors scoped to minimize DOM search time
Use semantic HTML and avoid deeply nested DOMs
Clean up listeners to avoid memory leaks

Live Example


      const btn = document.querySelector("#clickMe");
      btn.addEventListener("click", () => {
        const newDiv = document.createElement("div");
        newDiv.textContent = "You clicked!";
        document.body.appendChild(newDiv);
      });

Debugging Tips

Use console.log() to inspect elements and events
Inspect elements with browser DevTools
Use breakpoints to pause code execution

📌 JavaScript Event Listeners – Complete Breakdown

Event listeners allow JavaScript to "listen" for interactions or changes in the DOM. They enable dynamic, interactive websites.

MDN Docs: addEventListener()

🧠 Syntax:


      element.addEventListener("eventType", callbackFunction, useCapture);

eventType: A string like "click", "keydown", "submit"
callbackFunction: Function to run when the event fires
useCapture (optional): Boolean for event phase (true = capture, false = bubbling)

🛠️ Commonly Used Events & Examples:

1. Click Event


      document.querySelector("#btn").addEventListener("click", function() {
        alert("Button Clicked!");
      });

2. Mouse Events

mouseover, mouseout, mousemove, mousedown, mouseup, dblclick


      element.addEventListener("mouseover", () => {
        element.style.backgroundColor = "yellow";
      });

3. Keyboard Events

keydown, keypress, keyup


      document.addEventListener("keydown", function(e) {
        console.log("Key pressed:", e.key);
      });

4. Form Events

submit, change, input, focus, blur


      document.querySelector("form").addEventListener("submit", function(e) {
        e.preventDefault(); // Prevents actual submission
        alert("Form submitted!");
      });

5. Window Events

load, resize, scroll, beforeunload


      window.addEventListener("resize", () =$gt; {
        console.log("Window resized!");
      });

6. Touch Events (Mobile)

touchstart, touchmove, touchend

7. Custom Events


      const myEvent = new Event("customEvent");
      element.addEventListener("customEvent", () =$gt; console.log("Custom event fired!"));
      element.dispatchEvent(myEvent);

📌 Event Object

The callback function receives an event object with useful properties:

event.type – Event name
event.target – The element that triggered the event
event.currentTarget – The element the listener is attached to
event.preventDefault() – Stops default action (e.g., form submit)
event.stopPropagation() – Stops event bubbling

🧭 Event Flow (Capture vs. Bubbling)

Events travel in three phases:

Capture phase – Down the DOM tree
Target phase – Event reaches target
Bubbling phase – Bubbles back up the DOM tree (default)

To handle capturing:


      element.addEventListener("click", handler, true); // capture = true

🧹 Removing Event Listeners


      function logClick() {
        console.log("Clicked");
      }
      element.addEventListener("click", logClick);
      element.removeEventListener("click", logClick);

Note: You must reference the same function to remove it!

🚀 Event Delegation

Attach a single listener to a parent and use event.target to handle child interactions.


      document.querySelector("#list").addEventListener("click", function(e) {
        if (e.target.tagName === "LI") {
          console.log("Clicked:", e.target.textContent);
        }
      });

✅ Efficient for dynamic elements!

📚 More MDN Event Reference

✅ Best Practices

Use const for named event handler functions
Always remove listeners on cleanup (especially in SPA or React)
Delegate for lists and tables with many children
Throttle or debounce heavy events (scroll, resize)