❮ Previous Next ❯

Advanced DOM Concepts

  • This lesson covers advanced strategies for working with the DOM efficiently.

  • Introduction to Advanced DOM Concepts

    In earlier lessons, we learned how to:

    • Select DOM elements

    • Change content and styles

    • Handle basic events

    In real-world web applications, pages are dynamic:

    • Elements are added or removed at runtime

    • Lists grow based on user actions

    • Events need to be handled efficiently

    To handle such scenarios, JavaScript provides:

    1. Event Delegation

    2. Dynamic Element Creation

    These concepts are essential for writing optimized and scalable DOM code.

    Event Delegation

    What is Event Delegation ?

    Event delegation is a technique where:

    • An event listener is attached to a parent element

    • The event is handled for child elements using event bubbling

    Instead of adding event listeners to multiple child elements, we add one listener to their common parent.

    Why Event Delegation is Needed

    Without event delegation:

    • Multiple event listeners are added

    • Performance decreases

    • Dynamic elements do not get events automatically

    With event delegation:

    • Less memory usage

    • Better performance

    • Works for dynamically added elements

    • Cleaner code

    How Event Delegation Works

    Event delegation works because of event bubbling.

    Event bubbling means:

    • Event starts from the target element

    • Moves upward to parent elements

    JavaScript allows us to capture the event at the parent level and identify which child triggered it.

Event Delegation for Efficient Event Handling

Uses a single parent listener to handle events for multiple child elements 

<!-- HTML -->
<div id="parent">
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
  <button class="btn">Button 3</button>
</div>

<script>
// With Event Delegation (recommended)
let parent = document.getElementById("parent");

parent.addEventListener("click", function (event) {
  if (event.target.classList.contains("btn")) {
    console.log("Button clicked");
  }
});

// Without Event Delegation
let buttons = document.querySelectorAll(".btn");

buttons.forEach(function(btn) {
  btn.addEventListener("click", function() {
    console.log("Button clicked");
  });
});
</script>

  • Problems:

    • Multiple event listeners

    • New buttons will not work automatically

Handling Multiple Buttons Using Event Delegation

Uses a parent element to manage click events for all child buttons 

<!-- HTML -->
<div id="container">
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
  <button class="btn">Button 3</button>
</div>

<script>
// JavaScript
let container = document.getElementById("container");

container.addEventListener("click", function(event) {
  if (event.target.classList.contains("btn")) {
    console.log(event.target.textContent + " clicked");
  }
});
</script>

  • Only one event listener handles all buttons.

    Key Properties Used in Event Delegation

    event.target

    • Refers to the element that triggered the event

      event.currentTarget

      • Refers to the element where the listener is attached

    Understanding event.target and event.currentTarget

    Identifies the clicked element and the element handling the event 

    <!-- HTML -->
<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

<script>
// JavaScript
document.getElementById("menu").addEventListener("click", function(event) {
  console.log("Target:", event.target); // actual clicked element
  console.log("CurrentTarget:", event.currentTarget); // element with listener

  if (event.target.tagName === "LI") {
    console.log("Clicked:", event.target.textContent);
  }
});
</script>

    • When to Use Event Delegation

      • Handling large lists

      • Handling dynamically added elements

      • Improving performance

      • Cleaner event management

      Dynamic Element Creation

      What is Dynamic Element Creation ?

      Dynamic element creation means:

      • Creating HTML elements using JavaScript

      • Adding them to the DOM at runtime

      • Not writing them directly in HTML

      This is commonly used in:

      • Todo lists

      • Shopping cartsComments section

      • Dynamic forms

      Creating Elements Using createElement()

      Syntax

      document.createElement("tagName");

    Creating and Styling Elements Dynamically

    Uses createElement() to build and style elements 

    // Create paragraph
let para = document.createElement("p");
para.textContent = "This paragraph is created dynamically";
document.body.appendChild(para);

// Create div with styles
let div = document.createElement("div");
div.id = "box";
div.style.color = "white";
div.style.backgroundColor = "blue";
div.textContent = "Dynamic Div";

document.body.appendChild(div);

    • appendChild() Method

      What it Does

      Adds a node as the last child of a parent element.

      Syntax

      parent.appendChild(child);

    Adding Elements Using appendChild()

    Appends a new element as the last child of a parent element 

    <!-- HTML -->
<ul id="list"></ul>

<script>
// JavaScript
let list = document.getElementById("list");

let li = document.createElement("li");
li.textContent = "Item 1";

list.appendChild(li);
</script>
    • Adding Multiple Elements Using Loop

    Add Multiple List Items Using Loop

    Uses a loop to dynamically create and append multiple elements 

    let ul = document.getElementById("list");

for (let i = 1; i <= 5; i++) {
  let li = document.createElement("li");
  li.textContent = "Item " + i;
  ul.appendChild(li);
}
    • Combining Dynamic Elements with Event Delegation

    Dynamic List with Event Delegation

    Creates list items dynamically and handles clicks using a single parent listener 

    <!-- HTML -->
<ul id="taskList"></ul>

<script>
// JavaScript
let taskList = document.getElementById("taskList");

// Create items dynamically
for (let i = 1; i <= 3; i++) {
  let li = document.createElement("li");
  li.textContent = "Task " + i;
  taskList.appendChild(li);
}

// Event delegation
taskList.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    event.target.style.textDecoration = "line-through";
  }
});
</script>

    • Dynamic elements automatically get event handling.

      Common Mistakes

      • Adding event listeners to each child unnecessarily

      • Forgetting to append created elements

      • Using innerHTML instead of safe DOM methods

      • Not checking event.target

      Best Practices

      • Use event delegation for repeated elements

      • Prefer createElement() over innerHTML

      • Keep DOM manipulation minimal

      • Use clear conditions in event delegation

      • Avoid excessive event listeners

      Analogy

      • Event Delegation: One security guard watching all entrances

      • Dynamic Creation: Adding chairs when more guests arrive

    ❮ Previous Next ❯