JavaScript DOM Manipulation

DOM stands for Document Object Model. It allows JavaScript to access, modify, create, and delete HTML elements dynamically.

DOM Manipulation is one of the most important concepts in JavaScript because it makes webpages interactive and dynamic.

Why DOM Manipulation is Important?

Updates webpage content dynamically
Creates interactive websites
Handles user actions
Changes styles and elements
Makes webpages responsive without refreshing

What is DOM?

When a webpage loads, the browser converts HTML into a tree-like structure called the DOM. JavaScript uses this structure to interact with webpage elements.

<body>

    <h1>Hello</h1>

</body>

JavaScript can access and modify these elements dynamically.

Selecting HTML Elements

Before modifying elements, JavaScript must first select them.

Using getElementById()

getElementById() selects an element using its ID.

<h1 id="title">Welcome</h1>

<script>

let element =

document.getElementById("title");

console.log(element);

</script>

Explanation

The method searches for the element with matching ID.
The selected element is stored inside a variable.

Using querySelector()

querySelector() selects the first matching element.

<p class="text">JavaScript</p>

<script>

let element =

document.querySelector(".text");

console.log(element);

</script>

Explanation

.text selects the class name.
querySelector() supports CSS selectors.

Changing Text Content

JavaScript can change webpage content dynamically.

<h1 id="title">Old Text</h1>

<script>

document.getElementById("title").innerHTML =

"New Text";

</script>

Output

New Text

Explanation

innerHTML changes element content.
The webpage updates instantly.

Using innerText

innerText changes only visible text.

<p id="demo"></p>

<script>

document.getElementById("demo").innerText =

"Hello World";

</script>

Output

Hello World

Changing CSS Styles

JavaScript can modify CSS styles dynamically.

<h1 id="title">JavaScript</h1>

<script>

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

"red";

</script>

Output

Text color changes to red

Explanation

style property accesses CSS styles.
JavaScript changes appearance dynamically.

Changing HTML Attributes

JavaScript can change HTML attributes dynamically.

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

<script>

document.getElementById("image").src =

"new.jpg";

</script>

Explanation

The src attribute changes dynamically.
Useful for sliders and galleries.

Handling Button Click Events

Events allow JavaScript to respond to user actions.

<button onclick="showMessage()">

Click Me

</button>

<script>

function showMessage(){

    alert("Button Clicked");

}

</script>

Output

Popup appears after button click

Explanation

onclick triggers when the button is clicked.
The function executes automatically.

Creating New Elements

JavaScript can create HTML elements dynamically.

let heading =

document.createElement("h1");

heading.innerHTML = "New Heading";

document.body.appendChild(heading);

Output

New Heading appears on webpage

Explanation

createElement() creates new HTML elements.
appendChild() adds elements to webpage.

Removing Elements

JavaScript can remove elements dynamically.

let element =

document.getElementById("title");

element.remove();

Explanation

remove() deletes the selected element.
Useful for dynamic UI updates.

Getting User Input using DOM

DOM Manipulation is commonly used with forms.

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

<button onclick="showName()">

Submit

</button>

<script>

function showName(){

    let name =

    document.getElementById("username").value;

    console.log(name);

}

</script>

Explanation

.value gets input field data.
User input can be processed dynamically.

Complete Real Life Example

The following example shows a simple profile card updater using JavaScript DOM Manipulation.

<!DOCTYPE html>

<html>

<head>

    <title>JavaScript DOM Example</title>

</head>

<body>

<h2>Profile Card</h2>

<input type="text"
id="name"
placeholder="Enter Name">

<br><br>

<input type="text"
id="course"
placeholder="Enter Course">

<br><br>

<button onclick="updateProfile()">

Update Profile

</button>

<div id="output"></div>

<script>

function updateProfile(){

    let name =

    document.getElementById("name").value;

    let course =

    document.getElementById("course").value;

    document.getElementById("output").innerHTML =

    "<h3>Student Profile</h3>" +

    "Name: " + name + "<br>" +

    "Course: " + course;

}

</script>

</body>

</html>

Output

Profile Card

Input:
Name = Rahul
Course = JavaScript

Output:

Student Profile

Name: Rahul

Course: JavaScript

Detailed Explanation of Example

The input fields accept user information.
The button executes updateProfile() function.
DOM methods access input values.
innerHTML updates webpage content dynamically.
The webpage updates without refreshing.
DOM Manipulation creates interactive applications.

Common Mistakes

Using wrong element IDs.
Writing JavaScript before HTML loads.
Forgetting .value for input fields.
Using incorrect selectors.

Best Practices

Use meaningful element IDs.
Keep DOM updates efficient.
Separate HTML, CSS, and JavaScript properly.
Use event listeners for better structure.
Write clean and readable code.

Important Notes

DOM allows JavaScript to interact with webpages.
innerHTML updates webpage content.
Events handle user actions.
DOM Manipulation makes websites interactive.
Modern web applications heavily depend on DOM.

Summary

DOM stands for Document Object Model.
JavaScript can access and modify HTML elements.
getElementById() selects elements by ID.
innerHTML changes webpage content.
style changes CSS dynamically.
Events respond to user actions.
DOM Manipulation creates interactive websites.