DOM Manipulation Basics
Learn the essential skills and steps to become a full stack developer. Start your journey today with this comprehensive guide for beginners!
Last Update: 11 Oct 2024
Introduction to the DOM
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.
Selecting Elements
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:
#getElementById
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.
#querySelector
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.
#querySelectorAll
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.
Modifying Elements
After selecting elements, we can modify them. This could mean changing their text, styles, or attributes.
#textContent
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.”
#style
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.
#setAttribute
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.
Creating and Removing Elements
JavaScript also allows us to create new elements and add them to the page, or remove ones that we no longer need.
#createElement
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.”
#appendChild
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>).
#remove
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.
Hands-On: Build a Simple Interactive Web Page
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:
- The user types in a new item in the input box.
- When they click the "Add Item" button, a new list item is created and added to the shopping list.
- The input box is then cleared, and ready for the next item.
Conclusion
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!
Get the best of our content straight to your inbox!
By submitting, you agree to our privacy policy.
