DOM Manipulation (Selecting, Creating, Updating Elements)
DOM stands for Document Object Model.
It is a tree-like structure created by the browser to represent your HTML page.
JavaScript uses the DOM to:
Select HTML elements
Change text, style, and attributes
Create and delete elements
Handle user interactions
Build dynamic interfaces
This chapter teaches you everything you need to begin working with the DOM.
Understanding the DOM Tree
Example HTML:
<html>
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
</html>
The DOM turns it into a tree:
html
+-- body
+-- h1
+-- p
JavaScript can access each element in this structure.
1. Selecting Elements
JavaScript provides several methods.
getElementById()
<p id="msg">Hello</p>
let message = document.getElementById("msg");
console.log(message);
getElementsByClassName()
<p class="text">Hi</p>
<p class="text">Hello</p>
let items = document.getElementsByClassName("text");
console.log(items);
querySelector()
Selects first match.
let title = document.querySelector("h1");
Or select class:
let item = document.querySelector(".text");
querySelectorAll()
Selects all matches.
let list = document.querySelectorAll("li");
2. Changing Content
textContent
<p id="info">Old Text</p>
document.getElementById("info").textContent = "New Text";innerHTML (can add HTML inside)
info.innerHTML = "<b>Bold Text</b>";
3. Changing Styles
let box = document.getElementById("box");
box.style.color = "red";
box.style.backgroundColor = "yellow";
box.style.fontSize = "20px";
4. Changing Attributes
<img id="photo" src="old.jpg">
let img = document.getElementById("photo");
img.src = "new.jpg";
img.alt = "New Image";
5. Adding and Removing Classes
box.classList.add("active");
box.classList.remove("active");
box.classList.toggle("highlight");
toggle = add if not present, remove if already present.
6. Creating New Elements
let newItem = document.createElement("li");
newItem.textContent = "New Item";
Adding It to the Page
let list = document.getElementById("myList");
list.appendChild(newItem);
Insert Before Another Element
list.insertBefore(newItem, list.firstChild);
7. Removing Elements
let item = document.getElementById("removeMe");
item.remove();
8. Replacing Elements
let oldTitle = document.getElementById("title");
let newTitle = document.createElement("h2");
newTitle.textContent = "Updated Title";
oldTitle.replaceWith(newTitle);
9. Real-Life Example: Add List Items Dynamically
HTML:
<ul id="todo"></ul>
<input id="task" placeholder="Enter task">
<button id="addBtn">Add Task</button>
JavaScript:
document.getElementById("addBtn").addEventListener("click", () => {
let taskValue = document.getElementById("task").value;
if (taskValue === "") return;
let li = document.createElement("li");
li.textContent = taskValue;
document.getElementById("todo").appendChild(li);
});
10. Real-Life Example: Show/Hide Element
let box = document.getElementById("box");
function toggleBox() {
box.style.display =
box.style.display === "none" ? "block" : "none";
}
11. Real-Life Example: Dynamic Counter
let count = 0;
let display = document.getElementById("num");
document.getElementById("inc").addEventListener("click", () => {
count++;
display.textContent = count;
});
Example Program (Complete)
let text = document.getElementById("message");
// update text
text.textContent = "Hello Students!";
// update style
text.style.color = "blue";
text.style.fontSize = "24px";
// create element
let note = document.createElement("p");
note.textContent = "This is added with JavaScript";
// append
document.body.appendChild(note);
Common Mistakes Beginners Make
Using wrong selectors
Using innerHTML when textContent is safer
Forgetting to append new elements
Trying to access elements before DOM is loaded
Not using classList for class changes
Practice Tasks (Do It Yourself)
Select a heading and change its color.
Add a new list item to a list using appendChild.
Create a button that hides a paragraph when clicked.
Create an input field and show live typed text below it.
Replace one HTML element with another using replaceWith.