Blog Details
Tajul Islam Refath
11 Oct 2024
8 min read
The DOM (Document Object Model) is the structure of a web page. Think of it like a tree, with each part of the page being a branch or leaf. These parts, called nodes, can be anything from a text, image, or link. The browser builds this structure when it loads the web page. With JavaScript, we can interact with this tree to change how the page looks and behaves. This process is called DOM manipulation.
In this guide, we’ll explore how to select elements on the page, modify them, create new ones, and even remove existing ones.
Before we can change anything on the page, we need to select it. There are a few methods that help us grab the elements we want to work with:
This method finds an element by its unique ID. IDs are like names for elements, and each ID should only be used once on a page.
Example:
const title = document.getElementById('main-title');
This grabs the element with the ID main-title
, which could be a heading or any other element.
This method is more flexible. It selects the first element that matches a CSS selector, such as a class, ID, or tag.
Example:
const button = document.querySelector('.submit-btn');
This selects the first element with the class submit-btn
.
When you need to select more than one element, you can use querySelectorAll
. This returns a list of all matching elements.
Example:
const items = document.querySelectorAll('.list-item');
This grabs all elements with the class list-item
, returning a list of elements.
After selecting elements, we can modify them. This could mean changing their text, styles, or attributes.
We can change the text inside an element using textContent
.
Example:
const title = document.getElementById('main-title');
title.textContent = 'Welcome to My Web Page';
This changes the text of the main-title
to “Welcome to My Web Page.”
The style
property lets us modify CSS directly from JavaScript. We can change colors, sizes, fonts, and more.
Example:
const button = document.querySelector('.submit-btn');
button.style.backgroundColor = 'blue';
This changes the background color of the button to blue.
This method changes or adds an attribute to an element. Attributes are things like class
, id
, or disabled
.
Example:
const button = document.querySelector('.submit-btn');
button.setAttribute('disabled', 'true');
This disables the button by adding a disabled
attribute.
JavaScript also allows us to create new elements and add them to the page, or remove ones that we no longer need.
To add a new element to the page, we use createElement
. This creates the element, but it’s not yet visible until we place it somewhere in the DOM.
Example:
const newItem = document.createElement('li');
newItem.textContent = 'New List Item';
This creates a new list item (<li>
) and sets its text to “New List Item.”
After creating an element, we use appendChild
to insert it into the page. It gets added as the last child of a parent element.
Example:
const newItem = document.createElement('li');
document.querySelector('ul').appendChild(newItem);
This adds the new list item to the unordered list (<ul>
).
To remove an element, we use the remove
method. Once removed, it’s no longer part of the web page.
Example:
const oldItem = document.querySelector('.old-item');
oldItem.remove();
This removes the element with the class old-item
.
Now, let’s build a small interactive web page where users can add items to a list.
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<h1 id="main-title">My Shopping List</h1>
<ul id="item-list">
<li>Milk</li>
<li>Bread</li>
</ul>
<input type="text" id="new-item-input" placeholder="Add a new item">
<button id="add-item-btn">Add Item</button>
<script>
const addButton = document.getElementById('add-item-btn');
const itemList = document.getElementById('item-list');
const inputField = document.getElementById('new-item-input');
addButton.addEventListener('click', () => {
const newItemText = inputField.value;
if (newItemText) {
const newItem = document.createElement('li');
newItem.textContent = newItemText;
itemList.appendChild(newItem);
inputField.value = ''; // Clear the input field after adding
}
});
</script>
</body>
</html>
In this example:
DOM manipulation is a key part of making web pages interactive. By selecting, modifying, creating, and removing elements, we can make the page react to user input in real time. These are just the basics, but mastering them will help you create dynamic and responsive websites!
Don’t worry, we don’t spam!