Module 1 – Introduction to the DOM

1. What is the DOM?

DOM stands for Document Object Model.
It’s a tree-like structure created by the browser when it loads an HTML page.
Every HTML tag becomes a node in the DOM tree:
- Element nodes (e.g., <p>, <h1>, <div> )
- Attribute nodes (e.g., id, class, src)
- Text nodes (the actual text content inside elements)

📌 Think of DOM as a live copy of your HTML that JavaScript can read and change at any time.

2. How the DOM Works

You write HTML → Browser reads it.
Browser builds the DOM tree in memory.
JavaScript can:
- Read (get content, styles, attributes)
- Write (change content, styles, attributes)
- Create (add new elements)
- Delete (remove elements)

3. The `document` Object

The document object represents the entire web page.
It is your entry point to the DOM.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <h1 id="heading">Hello DOM!</h1>

  <script>
    console.log(document.title); 
    console.log(document.body);  
  </script>
</body>
</html>

4. Inspecting the DOM

Teaching Demo:

Open any webpage.
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:
1. Print its text in the console.
2. 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).

htmlCopyEdit<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).

htmlCopyEdit<p class="text">Para 1</p>
<p class="text">Para 2</p>
<script>
  let items = document.getElementsByClassName("text");
  console.log(items[0].innerText);
</script>

c) `getElementsByTagName()`

Finds elements by tag name (p, div, img, etc.).

javascriptCopyEditlet allParas = document.getElementsByTagName("p");
console.log(allParas.length);

d) `querySelector()`

Finds the first element matching a CSS selector.

javascriptCopyEditlet firstPara = document.querySelector(".text");

e) `querySelectorAll()`

Finds all elements matching a CSS selector.
Returns a NodeList (can use forEach()).

javascriptCopyEditlet allItems = document.querySelectorAll(".text");
allItems.forEach(item => console.log(item.innerText));

3. Quick Comparison Table

Method	Returns	Multiple?	Selector Type
`getElementById()`	Element	No	ID only
`getElementsByClassName()`	HTMLCollection	Yes	Class only
`getElementsByTagName()`	HTMLCollection	Yes	Tag only
`querySelector()`	Element	No	CSS selector
`querySelectorAll()`	NodeList	Yes	CSS selector

4. Practice Tasks

✅ Beginner Level

Select an element by ID and log its text.
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).

&lt;p id="myPara">Hello&lt;/p>
&lt;script>
  document.getElementById("myPara").innerText = "Hello from JavaScript!";
&lt;/script>

b) `.textContent`

Shows all text inside the element (even hidden).

document.getElementById("myPara").textContent = "Updated text";

3. Changing HTML Content

Use .innerHTML to replace the inside HTML.

document.getElementById("myPara").innerHTML = "&lt;b>Bold text&lt;/b>";

⚠ Note: Be careful with user input (XSS risk).

4. Changing Attributes

We can use:

.setAttribute(name, value) → sets an attribute
.getAttribute(name) → gets an attribute value

&lt;img id="myImg" src="old.jpg" width="200">
&lt;script>
  document.getElementById("myImg").setAttribute("src", "new.jpg");
&lt;/script>

5. Changing Input Values

For form fields:

document.getElementById("username").value = "John";

6. Quick Comparison Table

Method	Changes What?	Reads Hidden Text?
`.innerText`	Text only	No
`.textContent`	Text only	Yes
`.innerHTML`	HTML structure	N/A
`.setAttribute()`	Attributes	N/A
`.value`	Input value	N/A

7. Practice Tasks

✅ Beginner

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:
1. Change text to “Updated!”
2. 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:
1. Directly change CSS properties via .style
2. 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).

Example:

&lt;div id="box" style="width:100px; height:100px; background:gray;">&lt;/div>
&lt;script>
  document.getElementById("box").style.backgroundColor = "red";
  document.getElementById("box").style.borderRadius = "10px";
&lt;/script>

3. Method 2 – Using `.classList`

Allows adding/removing multiple styles at once.
Works with pre-defined CSS classes.

Example:

&lt;style>
  .highlight { background-color: yellow; }
  .big { font-size: 24px; }
&lt;/style>

&lt;p id="text">Hello&lt;/p>
&lt;script>
  let p = document.getElementById("text");
  p.classList.add("highlight");
  p.classList.add("big");
&lt;/script>

Common .classList methods:

.add("className")
.remove("className")
.toggle("className") → Adds if missing, removes if present
.contains("className") → Returns true/false

4. Method 3 – Changing Multiple Styles at Once

We can set multiple styles by:

Object.assign(element.style, {
  backgroundColor: "blue",
  color: "white",
  padding: "10px"
});

5. Practice Tasks

✅ Beginner

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:

&lt;input type="text" id="username" placeholder="Enter your name">
&lt;script>
  let nameField = document.getElementById("username");
  console.log(nameField.value); // Empty at first
&lt;/script>

3. Responding to Input Events

a) Live Input (Typing)

&lt;input type="text" id="name" placeholder="Type something">
&lt;p id="output">&lt;/p>

&lt;script>
document.getElementById("name").addEventListener("input", function(){
  document.getElementById("output").innerText = "You typed: " + this.value;
});
&lt;/script>

b) Form Submission

By default, a form reloads the page.
Use event.preventDefault() to stop this.

&lt;form id="myForm">
  &lt;input type="text" id="user" placeholder="Your name">
  &lt;button type="submit">Submit&lt;/button>
&lt;/form>

&lt;script>
document.getElementById("myForm").addEventListener("submit", function(e){
  e.preventDefault(); // stop reload
  let name = document.getElementById("user").value;
  alert("Hello, " + name);
});
&lt;/script>

4. Reading Other Form Inputs

&lt;input type="checkbox" id="subscribe"> Subscribe  
&lt;input type="radio" name="gender" value="male"> Male  
&lt;input type="radio" name="gender" value="female"> Female

// 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

Example:

&lt;div id="container">
  &lt;p>First&lt;/p>
  &lt;p>Second&lt;/p>
  &lt;p>Third&lt;/p>
&lt;/div>

&lt;script>
let box = document.getElementById("container");
box.firstElementChild.style.color = "red"; // Colors "First"
&lt;/script>

3. Moving Up the DOM Tree (Parents)

let child = document.querySelector("#container p");
console.log(child.parentElement); // The &lt;div> with id="container"

4. Moving Sideways in the DOM (Siblings)

let first = document.querySelector("#container p");
console.log(first.nextElementSibling);     // "Second" paragraph
console.log(first.nextElementSibling.textContent);

console.log(first.previousElementSibling); // null (no previous sibling)

5. Traversing Any Node (Not Just Elements)

.childNodes includes text nodes (like spaces, line breaks).
.children only includes element nodes.

6. Example – Navigating Around

&lt;ul id="list">
  &lt;li>Apple&lt;/li>
  &lt;li>Banana&lt;/li>
  &lt;li>Cherry&lt;/li>
&lt;/ul>

&lt;script>
let list = document.getElementById("list");
let banana = list.children[1];
banana.style.color = "blue"; // Colors "Banana"

banana.previousElementSibling.style.color = "red";   // "Apple"
banana.nextElementSibling.style.color = "green";     // "Cherry"
&lt;/script>

7. Practice Tasks

✅ Beginner

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.

2. Creating Elements

Step 1 – Create an Element

let newDiv = document.createElement("div");

Step 2 – Add Content

newDiv.textContent = "Hello, I’m new here!";

or:

newDiv.innerHTML = "&lt;strong>Hello&lt;/strong> World!";

Step 3 – Add to the Page

document.body.appendChild(newDiv);

Full Example:

&lt;div id="container">&lt;/div>
&lt;script>
let newP = document.createElement("p");
newP.textContent = "This is a new paragraph.";
document.getElementById("container").appendChild(newP);
&lt;/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

&lt;div id="box">&lt;/div>
&lt;button id="add">Add Paragraph&lt;/button>
&lt;button id="remove">Remove Last Paragraph&lt;/button>

&lt;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);
  }
});
&lt;/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?

HTML DOM: From Beginner to Advanced

1. What is the DOM?

2. How the DOM Works

3. The document Object

4. Inspecting the DOM

5. Practice Tasks

Module 2 – Selecting Elements

1. Why We Need to Select Elements

2. Main Selection Methods

a) getElementById()

b) getElementsByClassName()

c) getElementsByTagName()

d) querySelector()

e) querySelectorAll()

3. Quick Comparison Table

4. Practice Tasks

Module 3 – Changing Content

1. Why Change Content?

2. Changing Text Content

a) .innerText

b) .textContent

3. Changing HTML Content

4. Changing Attributes

5. Changing Input Values

6. Quick Comparison Table

7. Practice Tasks

8. Teaching Script

Module 4 – Styling Elements

1. Why Style Elements with JavaScript?

2. Method 1 – Using .style.property

3. Method 2 – Using .classList

4. Method 3 – Changing Multiple Styles at Once

5. Practice Tasks

6. Teaching Script

Module 6 – Forms and Input

1. Why Work with Forms in JavaScript?

2. Accessing Input Values

3. Responding to Input Events

a) Live Input (Typing)

b) Form Submission

4. Reading Other Form Inputs

5. Practice Tasks

6. Teaching Script

Module 7 – DOM Traversal

1. What is DOM Traversal?

2. Moving Down the DOM Tree (Children)

3. Moving Up the DOM Tree (Parents)

4. Moving Sideways in the DOM (Siblings)

5. Traversing Any Node (Not Just Elements)

6. Example – Navigating Around

7. Practice Tasks

8. Teaching Script

Module 8 – Creating & Removing Elements

1. Why Create or Remove Elements?

2. Creating Elements

Step 1 – Create an Element

Step 2 – Add Content

Step 3 – Add to the Page

3. Removing Elements

a) Remove a Specific Element

b) Remove a Child from a Parent

4. Inserting in Specific Positions

5. Example – Adding and Removing with a Button

6. Practice Tasks

7. Teaching Script

Comments

Leave a Reply Cancel reply

More posts

HTML DOM: From Beginner to Advanced

Top 10 Most Useful Math Functions in Excel

TRIM FUNCTION IN EXCEL

Matplotlib, Data Cleaning with Pandas, and Excel Integration using Pandas with examples and outputs.

3. The `document` Object

a) `getElementById()`

b) `getElementsByClassName()`

c) `getElementsByTagName()`

d) `querySelector()`

e) `querySelectorAll()`

a) `.innerText`

b) `.textContent`

2. Method 1 – Using `.style.property`

3. Method 2 – Using `.classList`