DOM Manipulation Basics

Learn to select and modify elements on your webpage using JavaScript.
Understand how to create, append, and remove elements dynamically.
Hands-on project: Build a simple interactive shopping list.
Improve user experience by making your web pages more responsive and dynamic.

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.

Final Thoughts

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!

Frequently Asked Questions

Use getElementById when you want to quickly select an element by its unique ID. It’s the fastest method, but it only works for IDs. If you need more flexibility, such as selecting elements by class, tag, or more complex CSS selectors, use querySelector. This method is more versatile but may be slightly slower if you're selecting a lot of elements.

By Mediusware Editorial Team

Content Team at Mediusware

We are the Mediusware Editorial Team, passionate about crafting insightful content on technology, software development, and industry trends. Our mission is to inform, inspire, and engage our audience with well-researched articles and thought leadership pieces. With a deep understanding of the tech landscape, we aim to be a trusted source of knowledge for professionals and enthusiasts alike.