JavaScript DOM (Document Object Model) – Making Webpages Dynamic

So far, we have learned:

• HTML → Structure of webpages

• CSS → Styling of webpages

• JavaScript → Programming and logic

• Variables, Functions, Arrays, and Objects

However, JavaScript becomes truly powerful when it interacts with HTML elements on a webpage.

For example:

• Change text when a button is clicked

• Change colors dynamically

• Hide or show elements

• Validate forms

• Create animations

This interaction is possible through the DOM (Document Object Model).

In this article, we will learn:

• What DOM is

• How DOM works

• DOM tree structure

• Selecting HTML elements

• Changing content

• Changing styles

• Creating elements

• Removing elements

• Real-world examples

---

What is DOM?

DOM stands for:

Document Object Model

The DOM is a programming interface that represents an HTML document as a tree of objects.

JavaScript uses the DOM to:

• Access HTML elements

• Modify content

• Modify styles

• Add or remove elements

• Respond to user actions

---

Why DOM is Needed

Without DOM:

HTML remains static.

Example:

<h1>Hello World</h1>

The text never changes.

---

With DOM:

JavaScript can change it dynamically.

Example:

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

The webpage updates instantly.

---

How DOM Works

When a webpage loads:

HTML File
      ↓
Browser
      ↓
DOM Tree Created
      ↓
JavaScript Accesses Elements

---

Example HTML

<html>

<body>

<h1>Hello</h1>

</body>

</html>

DOM Tree:

Document
   │
   └── html
         │
         └── body
                │
                └── h1
                     │
                  Hello

Each HTML element becomes an object.

---

The Document Object

The entire webpage is represented by:

document

It is the root of the DOM.

Example:

document.write(
"Hello"
);

---

Selecting HTML Elements

Before changing an element, JavaScript must find it.

Common methods:

Method	Purpose
getElementById()	Select by id
getElementsByClassName()	Select by class
getElementsByTagName()	Select by tag
querySelector()	Select first matching element
querySelectorAll()	Select all matching elements

---

getElementById()

Most commonly used method.

---

HTML

<h1 id="title">

Hello World

</h1>

---

JavaScript

document.getElementById(
"title"
);

Selects the heading.

---

Changing Content

Using:

innerHTML

---

Example

HTML:

<h1 id="title">

Hello World

</h1>

JavaScript:

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

Output:

Welcome

---

Complete Program

<!DOCTYPE html>

<html>

<body>

<h1 id="title">

Hello World

</h1>

<script>

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

</script>

</body>

</html>

---

Changing Text on Button Click

HTML:

<h1 id="demo">

Hello

</h1>

<button
onclick="changeText()">

Click Me

</button>

JavaScript:

function changeText()
{
    document.getElementById(
    "demo"
    ).innerHTML =
    "Welcome";
}

---

Output

Before Click:

Hello

After Click:

Welcome

---

Changing Styles

DOM can modify CSS.

---

Example

HTML:

<h1 id="title">

Hello

</h1>

JavaScript:

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

Output:

Heading becomes red

---

Changing Font Size

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

---

Multiple Style Changes

let heading =
document.getElementById(
"title"
);

heading.style.color =
"blue";

heading.style.backgroundColor =
"yellow";

---

Changing Images

HTML:

<img
id="image"
src="image1.jpg">

JavaScript:

document.getElementById(
"image"
).src =
"image2.jpg";

Image changes instantly.

---

Reading User Input

HTML:

<input
type="text"
id="name">

JavaScript:

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

Gets user input.

---

Example

<input
type="text"
id="name">

<button
onclick="show()">

Show

</button>

function show()
{
    let value =
    document.getElementById(
    "name"
    ).value;

    alert(value);
}

---

Creating New Elements

DOM can create elements dynamically.

---

Syntax

document.createElement(
"tag"
);

---

Example

let para =
document.createElement(
"p"
);

Creates a paragraph.

---

Adding Content

para.innerHTML =
"New Paragraph";

---

Adding Element to Page

document.body.appendChild(
para
);

---

Complete Example

let para =
document.createElement(
"p"
);

para.innerHTML =
"Hello DOM";

document.body.appendChild(
para
);

Output:

Hello DOM

appears on webpage.

---

Removing Elements

HTML:

<p id="demo">

Hello

</p>

JavaScript:

document.getElementById(
"demo"
).remove();

Paragraph disappears.

---

querySelector()

Selects first matching element.

Example:

document.querySelector(
"h1"
);

Selects first heading.

---

querySelectorAll()

Selects all matching elements.

Example:

document.querySelectorAll(
"p"
);

Selects all paragraphs.

---

Example

HTML:

<p>One</p>

<p>Two</p>

JavaScript:

let para =
document.querySelectorAll(
"p"
);

Returns both paragraphs.

---

Event Handling

Events occur when users interact with a webpage.

Examples:

• Click

• Mouse movement

• Keyboard press

• Form submission

---

Common Events

Event	Description
onclick	Mouse click
onmouseover	Mouse hover
onmouseout	Mouse leave
onkeydown	Key press
onchange	Value changed

---

Click Event Example

HTML:

<button
onclick="show()">

Click

</button>

JavaScript:

function show()
{
    alert(
    "Button Clicked"
    );
}

---

Mouse Over Example

<h1
onmouseover=
"this.style.color='red'">

Move Mouse Here

</h1>

---

Form Validation Example

<input
type="text"
id="username">

<button
onclick="validate()">

Submit

</button>

function validate()
{
    let name =
    document.getElementById(
    "username"
    ).value;

    if(name=="")
    {
        alert(
        "Enter Name"
        );
    }
}

---

Complete DOM Program

<!DOCTYPE html>

<html>

<body>

<h1 id="title">

Hello World

</h1>

<button
onclick="changeText()">

Click Me

</button>

<script>

function changeText()
{
    document.getElementById(
    "title"
    ).innerHTML =
    "Welcome to DOM";

    document.getElementById(
    "title"
    ).style.color =
    "blue";
}

</script>

</body>

</html>

---

Output

Before Click:

Hello World

After Click:

Welcome to DOM

and color changes to blue.

---

Real-Life Applications of DOM

DOM is used in:

• Login systems

• Registration forms

• Online shopping carts

• Games

• Social media feeds

• Live chat systems

Platforms like Facebook, YouTube, and Amazon rely heavily on DOM manipulation for dynamic user interfaces.

---

Common Mistakes Beginners Make

Wrong ID Name

HTML:

<h1 id="title">

JavaScript:

getElementById(
"heading"
)

Returns:

null

---

Running JavaScript Before HTML Loads

Wrong:

document.getElementById(
"title"
);

before element exists.

---

Forgetting Quotes

Wrong:

getElementById(title)

Correct:

getElementById("title")

---

Advantages of DOM

• Dynamic webpages

• Interactive user interfaces

• Real-time updates

• Better user experience

• Powerful event handling

---

Conclusion

The DOM is the bridge between JavaScript and HTML. It allows JavaScript to access, modify, create, and remove webpage elements dynamically.