DOM Manipulation Basics

Last Update: 11 Oct 2024
DOM Manipulation Basics image

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!

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.

Author

About the Author

Hey, I'm Md Shamim Hossen, a Content Writer with a passion for tech, strategy, and clean storytelling. I turn AI and app development into content that resonates and drives real results. When I'm not writing, you'll find me exploring the latest SEO tools, researching, or traveling.

Trendingblogs
The Software Development Life Cycle (SDLC): A Complete Guide for Software Success image

The Software Development Life Cycle (SDLC): A Complete Guide for Software Success

The Software Development Life Cycle (SDLC): A Complete Guide for Software Success

What is SDLC?

SDLC Stages: A Detailed Look

Popular SDLC Models

Choosing the Right SDLC Model

Benefits of Following SDLC

Zustand: A Lightweight State Management Library for React image

Zustand: A Lightweight State Management Library for React

Zustand: A Lightweight State Management Library for React

Introduction to Zustand

Why Choose Zustand?

Getting Started with Zustand

Conclusion: The Power of Simplicity

From Bugs to Beauty: Integrating UI/UX Testing into Software Quality Assurance image

From Bugs to Beauty: Integrating UI/UX Testing into Software Quality Assurance

From Bugs to Beauty: Integrating UI/UX Testing into Software Quality Assurance

Introduction

Why UI/UX Testing Matters in QA

Tools for UI/UX Testing

Challenges and Best Practices in UI/UX Testing

Conclusion: The Symbiotic Relationship Between QA and UX

Why is a Gaming PC the Ultimate Tool for Both Gaming and Professional Development? image

Why is a Gaming PC the Ultimate Tool for Both Gaming and Professional Development?

Why is a Gaming PC the Ultimate Tool for Both Gaming and Professional Development?

Why is a Gaming PC the Ultimate Tool for Both Gaming and Professional Development?

Why React Native is the Best Choice for Cross-Platform Development image

Why React Native is the Best Choice for Cross-Platform Development

Why React Native is the Best Choice for Cross-Platform Development

What is React Native?

Why should you choose React Native?

Saves Time and Money

Cross-Platform Consistency

Large Community and Easy Support

Let's Deep Dive Into Threads with Rust image

Let's Deep Dive Into Threads with Rust

Let's Deep Dive Into Threads with Rust

What is a Thread?

Why Do We Need Threads?

Types of Threads

Creating Threads in Rust

Thread Safety: Send and Sync

Get the best of our content straight to your inbox!

By submitting, you agree to our privacy policy.

Let's
Talk