🚀 Boost Your Career with TekStudy! | 📚 Get Courses, Notes, eBooks | Source Code & Sample Papers | 💼 Apply for Internships & Jobs | 🏆 Trusted by Learners & Companies Across India | 🔥 Start Learning Today! |

DOM Manipulation and Events in JavaScript

Khusboo Tayal

DOM Manipulation and Events in JavaScript

The Document Object Model (DOM) is the interface between JavaScript and HTML, allowing you to dynamically access and manipulate the structure, style, and content of a web page. Understanding DOM manipulation and events is crucial for building interactive web applications.

What is DOM (Document Object Model)?

The DOM is a tree-like representation of your HTML document.
Each HTML element is a node in this tree.
JavaScript can dynamically manipulate these nodes, allowing you to create, modify, or delete elements.

Basic Structure of DOM:

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <h1 id="title">Hello, World!</h1>
  <button id="changeTextBtn">Change Text</button>
</body>
</html>

The DOM allows JavaScript to directly manipulate this HTML structure.

Selecting DOM Elements

JavaScript provides multiple ways to access DOM elements.

1. Using getElementById() (Fastest)

const title = document.getElementById("title");
console.log(title.textContent); // Output: Hello, World!

2. Using getElementsByClassName() (Returns a live HTMLCollection)

<p class="text">First Paragraph</p>
<p class="text">Second Paragraph</p>


const paragraphs = document.getElementsByClassName("text");
console.log(paragraphs[0].textContent); // Output: First Paragraph

3. Using getElementsByTagName() (Returns a live collection)

const allButtons = document.getElementsByTagName("button");
console.log(allButtons.length); // Output: 1

4. Using querySelector() (Modern and Flexible)

const title = document.querySelector("#title");
console.log(title.textContent); // Output: Hello, World!

5. Using querySelectorAll() (Returns a static NodeList)

const paragraphs = document.querySelectorAll(".text");
console.log(paragraphs.length); // Output: 2

Manipulating DOM Elements

Once an element is selected, you can manipulate its content, style, attributes, and structure.

Changing Text Content

const title = document.getElementById("title");
title.textContent = "Hello, JavaScript!";

Changing HTML Content

title.innerHTML = "<span style='color: red;'>Hello, JavaScript!</span>";

Changing Styles (Inline CSS)

title.style.color = "blue";
title.style.fontSize = "24px";

Adding or Removing CSS Classes

title.classList.add("highlight");
title.classList.remove("highlight");
title.classList.toggle("highlight");

Creating and Removing Elements

Creating Elements

const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

Removing Elements

document.body.removeChild(newParagraph); // Using parent.removeChild()

Replacing Elements

const newTitle = document.createElement("h2");
newTitle.textContent = "New Title";
document.body.replaceChild(newTitle, title);

DOM Events - Making Your Page Interactive

An event is an action or occurrence detected by JavaScript, such as a user clicking a button, typing, or scrolling.

Types of Events:

Mouse Events: click, dblclick, mouseover, mouseout
Keyboard Events: keydown, keyup, keypress
Form Events: submit, change, focus, blur
Window Events: load, resize, scroll

Adding Event Listeners (Best Practice)

const button = document.getElementById("changeTextBtn");
button.addEventListener("click", function() {
  title.textContent = "Text Changed!";
});

Removing Event Listeners

function changeText() {
  title.textContent = "Text Changed!";
}

button.addEventListener("click", changeText);

// Removing the event listener
button.removeEventListener("click", changeText);

Event Propagation (Bubbling and Capturing)

What is Event Propagation?

Event Bubbling: The event starts from the target element and bubbles up to the root (document).
Event Capturing: The event starts from the root and moves down to the target element.

Example:

<div id="parent" style="padding: 20px; background: lightgray;">
  Parent
  <button id="child">Click Me</button>
</div>


document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent Clicked");
}, true); // true means capturing

document.getElementById("child").addEventListener("click", function(event) {
  console.log("Child Clicked");
  event.stopPropagation(); // Stops propagation
});

Output:

If event.stopPropagation() is not used:
- Capturing: Parent -> Child
- Bubbling: Child -> Parent

Event Delegation (Efficient Event Handling)

Instead of attaching event listeners to each child element, you can attach it to a parent and use event delegation.

Example:

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


document.getElementById("menu").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("You clicked on: " + event.target.textContent);
  }
});

Why Use Event Delegation?

More efficient, especially with many child elements.
Automatically handles new elements added to the parent.

Common DOM Methods You Must Know

document.createElement() - Creates a new HTML element.
document.createTextNode() - Creates a text node.
appendChild() - Adds a child element to a parent.
removeChild() - Removes a child element.
replaceChild() - Replaces an existing child with a new one.
insertBefore() - Inserts a new element before another.
cloneNode() - Duplicates an element.

Best Practices with DOM Manipulation

Use querySelector() and querySelectorAll() for flexibility.
Minimize DOM manipulation (it’s performance-intensive).
Use classList for managing classes.
Always remove event listeners when they are no longer needed.
Prefer Event Delegation for handling multiple elements.

Quick Recap

The DOM is the tree-like structure of your HTML document that JavaScript can manipulate.
DOM manipulation allows you to change the structure, style, and content of a webpage dynamically.
Events allow you to make your pages interactive, with event propagation and delegation for efficient handling.

Looking for our upcoming courses?

Subscribe to our newsletter for the latest study materials, updates, and tips straight to your inbox.

Home

About Us

Company Policies

Social Profiles

Instagram