The Document Object Model (DOM) is a programming interface for web documents.
It represents the HTML page as a structured tree of objects.
Each element, attribute, and piece of text in your HTML is a node in this tree.
JavaScript can read, modify, add, or delete these nodes to change the page dynamically.
In short: The DOM is not the HTML itselfβitβs the in-memory representation of the page that JavaScript interacts with.
π How browsers convert HTML into a DOM tree
When you open a web page:
Browser downloads HTML from the server.
The HTML parser reads the code from top to bottom.
Each tag becomes a node in a tree structure.
The browser stores this tree in memory β thatβs the DOM.
CSS and JavaScript then work with this DOM to style and update it.
Example:
<html>
<body>
<h1>Hello</h1>
</body>
</html>
Becomes:
Document
βββ html
βββ body
βββ h1
βββ "Hello"
π³ DOM Nodes
Node Type
Example
Description
Document Node
document
The root of the DOM tree.
Element Node
<h1>, <p>
HTML tags.
Text Node
"Hello World"
The actual text inside elements.
Attribute Node
class="title"
The attributes of HTML elements.
π Real-life Analogy
Think of:
HTML as the blueprint of a building.
DOM as the actual building in front of you.
JavaScript as the construction crew that can paint walls, move furniture, or add new rooms without rebuilding the whole structure.
π Visual DOM Tree Diagram
document
βββ html
βββ head
β βββ meta
β βββ title ("My Page")
βββ body
βββ h1 ("Welcome")
βββ p ("This is my page.")
Graphical version: Imagine boxes connected with lines:
Each box is a node (element, text, etc.).
Lines show the parent-child relationships.
Examples :
<!DOCTYPE html>
<html>
<body>
<h1> Hello Students </h1>
<h1> Hello Friends </h1>
<p class="t1"> Welcome </p>
<p class="t1"> PSR Eng </p>
<p class="t1"> Sivakasi </p>
<p id="mytitle"> MyCourse</p>
<script type="text/javascript">
let m=document.getElementsByClassName("t1");
console.log(m[0].innerText)
console.log(m[1].innerText)
console.log(m[2].innerText)
let m3=document.getElementById("mytitle");
console.log(m3.innerText);
let myh=document.getElementsByTagName("h1");
console.log(myh[0].innerText);
console.log(myh[1].innerText);
</script>
</body>
</html>
Press F12 β Go to Elements tab β See the DOM tree.
Go to Console and try:
document.title
document.body.style.backgroundColor = "lightblue"
5. Practice Tasks
β Beginner Level
Change the background color of the page using document.body.style.
Print the text of the <h1> element in the console.
<html>
<head>
<title> Welcome To Ramakayal Computer Education</title>
<style>
#p1
{
color:blue;
}
#p2
{
color:red;
}
.myarea1
{
background-color:yellow
}
</style>
</head>
<body>
<h1 style='color:red'> My Festivals </h1>
<p id='p1'> There are two prevailing definitions of the lunar month: amΔnta, where the month ends with the new moon, and pΕ«rαΉimΔnta, where it ends with the full moon.[3] Consequently, the same day may be associated with different but adjoining months. When a festival takes place during Εukla paksha (the waxing phase of the moon), both traditions attribute it to the same month. However, if the festival occurs during kαΉiαΉ£hαΉa paksha (the waning phase of the moon), the two traditions assign it to different, but adjacent months. </p>
<h1> Welcome </h1>
</div>
<script>
document.body.style.backgroundColor="green"
</script>
</body>
</html>
β Challenge Level
Create an HTML file with a <p> tag.
Use JavaScript to:
Print its text in the console.
Change it to βHello from JavaScript!β.
Module 2 β Selecting Elements
1. Why We Need to Select Elements
Before changing an element, JavaScript needs to find it in the DOM.
We can select elements in different ways depending on:
ID
Class
Tag name
CSS selector patterns
2. Main Selection Methods
a) getElementById()
Finds an element by its id (must be unique in a page).
<p id="myPara">Hello World</p> <script> let para = document.getElementById("myPara"); console.log(para.innerText); </script>
b) getElementsByClassName()
Finds elements by class name.
Returns an HTMLCollection (like an array, but not exactly).
Select all <li> elements and log how many there are.
β Challenge Level
Create a list of items with the same class.
Use querySelectorAll() to select them and change their color to red.
Got it β letβs build Module 3: Changing Content in the DOM so itβs easy to teach and practice. Iβll give lesson notes, code examples, a comparison table, practice exercises, and a ready-to-use teaching script.
Module 3 β Changing Content
1. Why Change Content?
Web pages can be dynamic β content can change without reloading.
JavaScript lets you:
Change text
Change HTML structure
Change attributes (like src, href, alt, etc.)
2. Changing Text Content
We can change only the text (without HTML tags) using:
a) .innerText
Shows text as displayed (ignores hidden elements, respects CSS).
<p id="myPara">Hello</p>
<script>
document.getElementById("myPara").innerText = "Hello from JavaScript!";
</script>
Change the text of an <h1> from βWelcomeβ to βHello Worldβ.
Change the src of an image.
β Challenge
Create a <p> with βClick the button to update meβ.
On button click:
Change text to βUpdated!β
Make it bold using .innerHTML.
8. Teaching Script
“In the last module, we learned how to find elements in the DOM. Now weβll change them. This is how websites update without a refresh β like showing a live score or updating a news headline. We can change only the text, or even replace the whole HTML inside an element. For example, .innerText changes only the visible text, while .innerHTML lets you insert HTML tags too. And if we want to change things like an imageβs source or a linkβs address, we use .setAttribute(). Letβs try replacing an image by changing its src⦔
If you want, I can prepare Modules 1β3 as a single interactive HTML page where each module has:
Code sample
βRunβ button
Output area
That would make your teaching hands-on and fun.
Do you want me to prepare that combined demo?
Alright β letβs make Module 4: Styling Elements clear, visual, and ready for teaching. Iβll include lesson notes, examples, practice tasks, and a short teaching script so your students can both see and try the changes.
Module 4 β Styling Elements
1. Why Style Elements with JavaScript?
Sometimes we want dynamic styles that change based on:
User actions (hover, click)
Data changes
Time or random effects
Two main ways to style:
Directly change CSS properties via .style
Add/Remove CSS classes via .classList
2. Method 1 β Using .style.property
Changes inline CSS styles directly.
Syntax:
element.style.propertyName = "value";
β Property names use camelCase in JavaScript (e.g., backgroundColor not background-color).
Change a <div> background color to green using .style.
Increase an <h1> font size using .style.fontSize.
β Challenge
Create a button that toggles a βdark-modeβ class on the <body> (changes background and text color).
6. Teaching Script
“In Module 3, we changed content. Now, letβs change how it looks. JavaScript can style elements in two ways β directly, using .style.property, or by adding/removing CSS classes with .classList. Changing styles directly is quick, but adding classes is cleaner because you keep design in CSS and just tell JavaScript when to apply it. Letβs try both methods β first, letβs make a box turn red, then letβs toggle a dark mode for the whole page.”
If you want, I can make Modules 1β4 in one HTML page with buttons so you can demonstrate each step interactively. It will be perfect for teaching because your students can click and instantly see the effect.
Do you want me to prepare that interactive combined HTML file next?
Alright β hereβs Module 6: Forms and Input explained step-by-step, with teaching notes, examples, practice exercises, and a ready-to-use teaching script.
Module 6 β Forms and Input
1. Why Work with Forms in JavaScript?
Forms allow users to enter data (name, email, password, etc.).
JavaScript can:
Read input values.
Validate data before submission.
Show error or success messages.
Prevent page reload on submit.
π Think of forms as the βconversationβ between your website and the user.
2. Accessing Input Values
We can use .value to get or set input field values.
Example:
<input type="text" id="username" placeholder="Enter your name">
<script>
let nameField = document.getElementById("username");
console.log(nameField.value); // Empty at first
</script>
// Checkbox
document.getElementById("subscribe").checked; // true/false
// Radio buttons
let gender = document.querySelector('input[name="gender"]:checked').value;
5. Practice Tasks
β Beginner
Create a form with a text box and a submit button.
When submitted, show the typed text in an alert.
β Challenge
Create a form with:
Name (text)
Email (text)
Subscribe (checkbox)
When submitted:
If email is empty β Show an error message in red.
Else β Show βForm submitted successfully!β in green.
6. Teaching Script
“Weβve learned how to react to clicks and keypresses, but forms are where users actually give us data. JavaScript can read these values, check them, and even stop the form from sending until the data is correct. The key here is .value for text inputs and .checked for checkboxes. Also, remember to use preventDefault() if you want to stop the form from reloading. Letβs try making a form that says hello to the user after they submit their name.”
If you want, I can make Modules 1β6 in one HTML teaching file where each module has:
The lesson text
Example code
A “Run Demo” section
That way, you can just open it in the browser and teach straight from there without switching files.
Do you want me to prepare that full Modules 1β6 combined HTML demo?
Alright β hereβs Module 7: DOM Traversal in a way thatβs beginner-friendly but still thorough enough for advanced understanding. Iβll include lesson notes, code examples, practice tasks, and a teaching script so itβs ready to teach.
Module 7 β DOM Traversal
1. What is DOM Traversal?
DOM traversal means moving through the DOM tree to find related elements:
From parent to child
From child to parent
Between siblings
π This is useful when you know the position of an element relative to another, but not its exact ID/class.
2. Moving Down the DOM Tree (Children)
let parent = document.getElementById("container");
console.log(parent.children); // HTMLCollection of child elements
console.log(parent.firstElementChild); // First child element
console.log(parent.lastElementChild); // Last child element
Select the first child of a <div> and change its text.
Select the last child of a <ul> and change its background.
β Challenge
Given a <ul>, find the second item using .firstElementChild.nextElementSibling and make it bold.
8. Teaching Script
“Up to now, weβve been grabbing elements directly with getElementById or querySelector. But sometimes we donβt know the exact selector β instead, we know where an element is relative to another one. DOM traversal lets us move up, down, or sideways in the DOM tree. We can grab parents, children, and siblings easily. This is especially useful when handling events β for example, when you click a button inside a card, you can find the cardβs title by moving up to its parent, then down to the right child.”
If you want, I can make Modules 1β7 into a single interactive HTML demo where each module has a βRun Exampleβ button and live results β so your students can try every traversal method right there in the browser.
Do you want me to prepare that combined teaching file?
Got it β hereβs Module 8: Creating & Removing Elements in a clear, step-by-step teaching format with examples, practice, and a ready-to-use teaching script.
Module 8 β Creating & Removing Elements
1. Why Create or Remove Elements?
To add new content dynamically (e.g., chat messages, notifications, list items).
To remove outdated or unnecessary content (e.g., dismissing popups).
This makes your page interactive without reloading.
<div id="container"></div>
<script>
let newP = document.createElement("p");
newP.textContent = "This is a new paragraph.";
document.getElementById("container").appendChild(newP);
</script>
3. Removing Elements
Two main ways:
a) Remove a Specific Element
let element = document.getElementById("removeMe");
element.remove();
b) Remove a Child from a Parent
let parent = document.getElementById("container");
let child = document.getElementById("item1");
parent.removeChild(child);
4. Inserting in Specific Positions
let newItem = document.createElement("li");
newItem.textContent = "Mango";
let list = document.getElementById("fruits");
list.insertBefore(newItem, list.children[1]); // before Banana
5. Example β Adding and Removing with a Button
<div id="box"></div>
<button id="add">Add Paragraph</button>
<button id="remove">Remove Last Paragraph</button>
<script>
let box = document.getElementById("box");
document.getElementById("add").addEventListener("click", function(){
let p = document.createElement("p");
p.textContent = "New paragraph";
box.appendChild(p);
});
document.getElementById("remove").addEventListener("click", function(){
if (box.lastElementChild) {
box.removeChild(box.lastElementChild);
}
});
</script>
6. Practice Tasks
β Beginner
Create a <ul> and add a new <li> with text “New Item”.
Remove the first item from a <ul>.
β Challenge
Make a button that adds a numbered <li> each time itβs clicked.
Make another button that removes all <li> items.
7. Teaching Script
“So far, weβve worked with elements that already exist. But what if you want new content β say, a new chat message or a notification? We can create elements with document.createElement(), set their content with .textContent or .innerHTML, and then place them into the DOM using .appendChild() or .insertBefore(). Removing is just as simple β use .remove() for a single element or .removeChild() if youβre working from the parent. Letβs make a button that adds new paragraphs and another that deletes them.”
If you want, I can now prepare Modules 1β8 in one interactive HTML teaching file, with a tab or section for each module and live editable examples so students can try code instantly in the browser. That would make your course fully hands-on from start to finish.
Do you want me to make that combined interactive file?
