Module 29 : Understanding the DOM in javascript.
1. What is the DOM?
✅ Definition:
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page structure as a tree of objects that can be manipulated with JavaScript.
✅ Why it matters:
Enables dynamic web content.
Allows interaction with HTML and CSS using JavaScript.
Forms the basis for frontend development.
2. DOM Tree Structure
less code
HTML
└── head
| └── title
└── body
├── h1
├── p
└── div
├── ul
│ └── li
└── a
Each element (like <body>, <h1>, etc.) is a node. There are different types:
Element Nodes (<div>, <p>)
Text Nodes ("Hello")
Attribute Nodes (class="box")
3. Accessing DOM Elements in JavaScript
✅ Methods to access elements:
Method
Description
Example
getElementById
Selects one element by its ID
document.getElementById("myId")
getElementsByClassName
Returns a collection of elements
document.getElementsByClassName("myClass")
getElementsByTagName
Selects all elements by tag
document.getElementsByTagName("div")
querySelector
Returns the first match
document.querySelector(".box")
querySelectorAll
Returns all matches
document.querySelectorAll("ul li")
HTML:
html code
<div id="info">Hello DOM</div>
JavaScript:
javascript code
const element = document.getElementById("info"); console.log(element.textContent); // Output: Hello DOM
4. Modifying DOM Elements
✅ Change content:
javascript code
element.textContent = "New Text"; element.innerHTML = "<strong>Bold Text</strong>";
✅ Change style:
javascript code
element.style.color = "blue"; element.style.fontSize = "20px";
✅ Change attributes:
javascript code
element.setAttribute("class", "highlight");
5. Creating and Appending Elements
✅ Steps:
Create the element
Add content or attributes
Append to parents
javascript code
const newPara = document.createElement("p"); newPara.textContent = "This is a new paragraph!"; document.body.appendChild(newPara);
6. Event Handling with DOM
✅ Attach Events:
javascript code
document.getElementById("btn").addEventListener("click", function() { alert("Button clicked!"); });
HTML:
html code
<button id="btn">Click Me</button>
JavaScript:
javascript code
document.getElementById("btn").addEventListener("click", function() { alert("You clicked the button!"); });
7. Traversing the DOM
✅ Parent, Child, and Siblings
javascript code
element.parentElement element.children element.firstElementChild element.nextElementSibling
Example:
javascript code
const listItem = document.querySelector("li"); console.log(listItem.parentElement); // Logs the <ul> console.log(listItem.nextElementSibling); // Next <li>
8. Exercise
🔧 Exercise 1: Modify a Web Page
HTML:
html code
<h2 id="title">Welcome</h2> <input type="text" id="inputBox" placeholder="Type something..."> <button id="updateBtn">Update Title</button>
When the button is clicked, update the heading with the text from the input box.
Solution:
javascript code
document.getElementById("updateBtn").addEventListener("click", function() { const input = document.getElementById("inputBox").value; document.getElementById("title").textContent = input; });
9. DOM Color Theme Switcher
🎯 Objective:
Build a theme switcher that changes the background color when a button is clicked.
HTML:
html code
<button id="darkMode">Dark Mode</button> <button id="lightMode">Light Mode</button>
JavaScript:
javascript code
document.getElementById("darkMode").addEventListener("click", () => { document.body.style.backgroundColor = "#333"; document.body.style.color = "#fff"; }); document.getElementById("lightMode").addEventListener("click", () => { document.body.style.backgroundColor = "#fff"; document.body.style.color = "#000"; });
10. Context : Why DOM Mastery is Crucial
📘 Industry Usage:
React/Angular/Vue use virtual DOMs, but understanding thel DOM is fundamental.
DOM knowledge is essential in:
Single Page Applications (SPAs)
DOM-based animations
Testing (using tools like Jest and Puppeteer)
Accessibility improvements
Performance optimization
📈 Research Insight:
According to Developer Network (MDN), effective DOM manipulation techniques reduce page rendering time and increase user interactivity satisfaction, especially on mobile.
“Inefficient DOM manipulation is a major bottleneck in modern web applications.” – Google Developer Docs
11. Summary
Concept
Use
DOM Structure
Understand how HTML is represented
Selecting Elements
Accessing specific nodes
Modifying Elements
Dynamically change webpage
Event Handling
Make page interactive
Creating/Deleting Elements
Build content on-the-fly
12. Questions
What is the difference between textContent and innerHTML?
How do you dynamically create a list with JavaScript?
How does querySelector differ from getElementById?
Write code to toggle a class when a button is clicked.
Write a script that changes a paragraph’s color every 2 seconds.
✅ Exercise:
Build a To-Do App using DOM manipulation
Input box to enter tasks
Add button to insert task into a list
Delete button to remove a task
No comments:
Post a Comment