Complete Web Designing Course for Beginners

Lesson 6.8 – DOM Manipulation

🚀 Controlling HTML Elements Using JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand DOM

✅ Access HTML Elements

✅ Change Text Content

✅ Change Styles Dynamically

✅ Change Images

✅ Handle User Interaction

✅ Build Interactive Web Applications

📖 Introduction

In the previous lesson, we learned:

✅ Events

Example:

alert("Button Clicked");

But modern websites do much more.

Examples:

YouTube

Changes video information automatically.

Facebook

Updates likes and comments instantly.

Amazon

Updates shopping cart dynamically.

How does JavaScript change webpage content?

Using:

🌐 DOM Manipulation

🤔 What is DOM?

DOM stands for:

Document Object Model

Simple Definition:

DOM is a representation of all HTML
elements that JavaScript can access
and modify.

Visual Representation

HTML:

<h1>Welcome</h1>

DOM:

Document

  |

  h1

  |

Welcome

JavaScript can access:

<h1>

and modify it.

🌟 Why DOM is Important?

DOM allows JavaScript to:

✅ Change Text

✅ Change Colors

✅ Change Images

✅ Add Elements

✅ Remove Elements

✅ Update Forms

✅ Build Dynamic Websites

🎯 Accessing HTML Elements

JavaScript uses:

document

to access webpage content.

Example:

document.getElementById()

This is one of the most important DOM methods.

🌟 HTML Element with ID

<h1 id="title">

Welcome Student

</h1>

ID:

title

helps JavaScript find the element.

🎯 getElementById()

Syntax:

document.getElementById("id");

Example:

document.getElementById("title");

JavaScript finds:

<h1 id="title">

🌟 Changing Text Content

HTML

JavaScript

document.getElementById("title").innerHTML =
"Welcome Student";

Output Before:

Welcome

Output After:

Welcome Student

🎯 Complete Example

HTML

<h1 id="title">

Welcome

</h1>

<button onclick="changeText()">

Click Me

</button>

JavaScript

function changeText()
{

document.getElementById("title").innerHTML =
"Learning DOM Manipulation";

}

Output

Click Button →

Learning DOM Manipulation

🌟 What is innerHTML?

Used to read or change HTML content.

Example

document.getElementById("title").innerHTML =
"Hello";

Changes element content.

🎯 Changing Paragraph Content

HTML

<p id="message">

Original Text

</p>

JavaScript

document.getElementById("message").innerHTML =
"Updated Text";

Output

Updated Text

🌟 Changing CSS Using JavaScript

JavaScript can change styles dynamically.

HTML

<h1 id="title">

Welcome

</h1>

JavaScript

document.getElementById("title").style.color =
"red";

Output:

Heading becomes red.

🎯 Changing Font Size

document.getElementById("title").style.fontSize =
"40px";

Output:

Large heading.

🌟 Changing Background Color

HTML

<button onclick="changeColor()">

Change Color

</button>

JavaScript

function changeColor()
{

document.body.style.backgroundColor =
"lightblue";

}

Output:

Background becomes light blue.

🎯 Changing Multiple Styles

document.getElementById("title").style.color =
"white";

document.getElementById("title").style.backgroundColor =
"blue";

document.getElementById("title").style.padding =
"20px";

Output:

Styled heading.

🌟 Changing Image Using DOM

HTML

<img id="bulb"

src="bulb_off.png"

width="200">

JavaScript

function bulbOn()
{

document.getElementById("bulb").src =
"bulb_on.png";

}

Output:

Image changes.

🎯 Light ON/OFF Example

HTML

<img id="bulb"

src="bulb_off.png"

width="200">

<br><br>

<button onclick="bulbOn()">

ON

</button>

<button onclick="bulbOff()">

OFF

</button>

JavaScript

function bulbOn()
{

document.getElementById("bulb").src =
"bulb_on.png";

}

function bulbOff()
{

document.getElementById("bulb").src =
"bulb_off.png";

}

Output

ON Button →

Bulb ON

OFF Button →

Bulb OFF

🌟 Showing Hidden Content

HTML

<p id="secret"

style="display:none;">

Secret Message

</p>

JavaScript

function showSecret()
{

document.getElementById("secret").style.display =
"block";

}

Output:

Hidden text appears.

🎯 Hiding Content

document.getElementById("secret").style.display =
"none";

Output:

Content disappears.

🌟 Changing Button Text

HTML

<button id="btn">

Click Me

</button>

JavaScript

document.getElementById("btn").innerHTML =
"Submitted";

Output

Before:

Click Me

After:

Submitted

🎯 Input Field Example

HTML

<input type="text"

id="name">

<button onclick="showName()">

Submit

</button>

JavaScript

function showName()
{

let studentName =
document.getElementById("name").value;

alert(studentName);

}

Output

User enters:

Rahul

Popup:

Rahul

🌟 What is .value?

Used to get input field values.

Example

document.getElementById("name").value;

Returns entered text.

🎯 Complete Practical Program

index.html

<!DOCTYPE html>

<html>

<head>

<title>DOM Manipulation</title>

</head>

<body>

<h1 id="heading">

Welcome Student

</h1>

<button onclick="changeText()">

Change Text

</button>

<script>

function changeText()
{

document.getElementById("heading").innerHTML =
"Learning JavaScript DOM";

}

</script>

</body>

</html>

🎯 Expected Output

Before Click:

Welcome Student

After Click:

Learning JavaScript DOM

🌟 Student Information Project

HTML

<h2 id="student">

Student Information

</h2>

<button onclick="showInfo()">

Show Details

</button>

JavaScript

function showInfo()
{

   document.getElementById("student").innerHTML =
   "Rahul - Computer Science";

}

Output

Button click updates information.

🏫 Real World Applications

DOM Manipulation is used in:

✅ Login Systems

✅ Shopping Carts

✅ Quiz Applications

✅ Student Portals

✅ Social Media Websites

✅ Banking Applications

✅ IoT Dashboards

✅ Robotics Control Panels

⚠️ Common Beginner Mistakes

Mistake 1

Wrong ID Name

Wrong:

document.getElementById("head");

HTML:

<h1 id="heading">

IDs must match.

Mistake 2

Forgetting Quotes

Wrong:


document.getElementById(title);

Correct:

document.getElementById("title");

Mistake 3

Misspelling innerHTML

Wrong:

innerHtml

Correct:

innerHTML

🌟 Best Practices

✅ Use meaningful IDs.

✅ Keep JavaScript organized.

✅ Test every DOM action.

✅ Use functions with events.

✅ Avoid duplicate IDs.

🏆 Mini Project – Color Changer

Create:

Heading

Welcome Student

Button:

Change Color

When clicked:

Change heading color to blue.

📝 Practical Activity

Create:

Student Information Viewer

Input:

Student Name

Button:

Show Name

Display entered name using DOM Manipulation.

📋 Assignment

Assignment 6.8

What is DOM?
What does DOM stand for?
What is getElementById()?
What is innerHTML?
What is .value?
Create a text-changing program.
Create an image-changing program.
Create a background color changer using DOM.

🧠 Quiz

Q1. DOM stands for?

A. Data Object Model

B. Document Object Model

C. Dynamic Object Method

D. Document Output Method

✅ Answer: B

Q2. Which method selects an element by ID?

A. getElement()

B. getById()

C. getElementById()

D. selectId()

✅ Answer: C

Q3. Which property changes HTML content?

A. value

B. innerHTML

C. style

D. src

✅ Answer: B

Q4. Which property gets input field data?

A. text

B. innerHTML

C. value

D. content

✅ Answer: C

Q5. DOM Manipulation is used to?

A. Change Webpage Content

B. Change Styles

C. Handle User Interaction

D. All of These

✅ Answer: D

📌 Lesson Summary

✅ DOM stands for Document Object Model.

✅ JavaScript uses DOM to access and control HTML elements.

✅ getElementById() finds HTML elements.

✅ innerHTML changes webpage content.

✅ .style changes CSS properties.

✅ .value reads input field values.

✅ DOM Manipulation is the foundation of modern interactive websites.