JavaScript DOM manipulation allows you to change HTML elements on a web page using JavaScript.
For example, you can use JavaScript to change text, modify styles, add buttons, remove elements, or respond to user actions.
In this tutorial, you will learn the basics of DOM manipulation in JavaScript with simple examples.
What is the DOM?
DOM stands for Document Object Model.
When a browser loads an HTML page, it creates a structure called the DOM. JavaScript can access this structure and modify the HTML and CSS.
For example:
<h1>Hello World</h1>
<p>Welcome to my website.</p>JavaScript can access these elements and change them.
How to Select an HTML Element
Before changing an element, we first need to select it.
1. getElementById()
Suppose we have:
<h1 id="title">Hello World</h1>We can select it using:
const title = document.getElementById("title");Now title contains the <h1> element.
2. querySelector()
querySelector() is another common way to select an element.
<p class="message">Hello JavaScript</p>JavaScript:
const message = document.querySelector(".message");You can use CSS selectors with querySelector().
For example:
document.querySelector("#title");
document.querySelector(".message");
document.querySelector("p");Change HTML Content
You can change the text of an element using textContent.
<h1 id="title">Hello World</h1>const title = document.getElementById("title");
title.textContent = "Hello JavaScript";The browser will now display:
Hello JavaScriptChange CSS Using JavaScript
JavaScript can also change the style of an element.
title.style.color = "blue";
title.style.fontSize = "40px";This changes the text color and font size.
You can modify many CSS properties using the style property.
Change HTML Using innerHTML
You can use innerHTML to change the HTML inside an element.
<div id="box"></div>const box = document.getElementById("box");
box.innerHTML = "<strong>Hello JavaScript!</strong>";The browser will display the text in bold.
For plain text, prefer textContent. Use innerHTML when you actually need to insert HTML.
Create a New Element
JavaScript can create new HTML elements.
const paragraph = document.createElement("p");
paragraph.textContent = "This paragraph was created with JavaScript.";The element has been created, but it is not yet visible on the page.
We can add it to the page using appendChild().
document.body.appendChild(paragraph);Now the paragraph appears on the page.
Remove an Element
You can also remove an HTML element.
const title = document.getElementById("title");
title.remove();This removes the element from the page.
Add a Click Event
DOM manipulation becomes more useful when combined with events.
Example:
<button id="btn">Click Me</button>
<p id="message">Hello</p>JavaScript:
const button = document.getElementById("btn");
const message = document.getElementById("message");
button.addEventListener("click", function () {
message.textContent = "Button clicked!";
});When the user clicks the button, the text changes.
Simple DOM Manipulation Example
Here is a complete example:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="title">Hello World</h1>
<button id="btn">Change Text</button>
<script>
const title = document.getElementById("title");
const button = document.getElementById("btn");
button.addEventListener("click", function () {
title.textContent = "Hello JavaScript!";
title.style.color = "blue";
});
</script>
</body>
</html>When you click the button, JavaScript changes the heading text and its color.
Common DOM Methods
Here are some important DOM methods to remember:
| Method | Purpose |
|---|---|
getElementById() | Select an element by ID |
querySelector() | Select the first matching element |
querySelectorAll() | Select multiple matching elements |
createElement() | Create a new element |
appendChild() | Add an element |
remove() | Remove an element |
addEventListener() | Handle events |
Conclusion
DOM manipulation is one of the most important concepts in JavaScript.
With DOM manipulation, you can make web pages interactive by changing HTML, modifying CSS, creating elements, removing elements, and responding to user actions.
Start by learning these methods:
getElementById()querySelector()textContentstylecreateElement()appendChild()remove()addEventListener()
Once you understand these basics, you can start building interactive JavaScript projects such as to-do lists, calculators, forms, image sliders, and dynamic web pages.
