How to Manipulate the DOM with Vanilla JavaScript

Introduction

Manipulating the Document Object Model (DOM) with vanilla JavaScript is a fundamental skill for web developers. The DOM is a tree-like structure representing the content of a webpage, and with JavaScript, you can dynamically change, add, or remove elements from this structure. In this guide, you’ll learn how to manipulate the DOM to create a fully functional to-do list where tasks can be added and removed.

Understanding the DOM

The Document Object Model (DOM) represents your HTML document as a hierarchical tree of nodes. Each element in your HTML is a node that can be accessed, modified, or deleted using JavaScript. Understanding the DOM is essential for creating dynamic and interactive web pages.

Selecting DOM Elements

To manipulate the DOM, you first need to select the elements you want to work with. JavaScript provides several methods for selecting elements, such as getElementById, getElementsByClassName, getElementsByTagName, and querySelector. These methods allow you to target specific elements in your HTML document.

// Selecting an element by its ID
const header = document.getElementById('header');

// Selecting elements by their class name
const items = document.getElementsByClassName('item');

// Selecting elements using a CSS selector
const button = document.querySelector('.add-task');

Modifying DOM Elements

Once you’ve selected the elements, you can modify them by changing their content, styles, or attributes. For example, you can use innerHTML to change the content of an element, style to modify its CSS, and setAttribute to update its attributes.

// Changing the content of an element
header.innerHTML = 'My To-Do List';

// Changing the style of an element
header.style.color = 'blue';

// Updating an attribute
header.setAttribute('class', 'header-title');

Creating and Appending Elements

JavaScript also allows you to create new elements and append them to the DOM. This is especially useful for building dynamic features like a to-do list, where new tasks are added on the fly. The document.createElement method is used to create a new element, and appendChild is used to add it to a parent element.

// Creating a new list item
const newTask = document.createElement('li');
newTask.innerHTML = 'New Task';

// Adding the new item to the list
const taskList = document.getElementById('task-list');
taskList.appendChild(newTask);

Removing Elements from the DOM

To remove elements from the DOM, you can use the removeChild method, which requires you to select the parent element and then remove the child element. This is commonly used in features like a to-do list, where tasks can be deleted once they are completed.

// Removing a task from the list
const taskToRemove = document.getElementById('task-id');
taskList.removeChild(taskToRemove);

Building a To-Do List with JavaScript

In this example, you’ll build a simple to-do list where users can add and remove tasks. This project combines all the concepts you’ve learned, including selecting, modifying, creating, and removing DOM elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #task-list { list-style-type: none; padding: 0; }
        .task { display: flex; justify-content: space-between; margin: 5px 0; }
        .remove-task { cursor: pointer; color: red; }
    </style>
</head>
<body>
    <h1 id="header">My To-Do List</h1>
    <input type="text" id="task-input" placeholder="Add a new task">
    <button class="add-task" onclick="addTask()">Add Task</button>
    <ul id="task-list"></ul>

    <script>
        function addTask() {
            const taskInput = document.getElementById('task-input');
            const taskText = taskInput.value;
            if (taskText === '') return;

            const newTask = document.createElement('li');
            newTask.className = 'task';
            newTask.innerHTML = `${taskText} <span class="remove-task" onclick="removeTask(this)">&#x2716;</span>`;

            const taskList = document.getElementById('task-list');
            taskList.appendChild(newTask);

            taskInput.value = '';
        }

        function removeTask(taskElement) {
            const taskList = document.getElementById('task-list');
            taskList.removeChild(taskElement.parentElement);
        }
    </script>
</body>
</html>

Conclusion

Mastering DOM manipulation with vanilla JavaScript is a crucial step in becoming a proficient web developer. By learning how to select, modify, create, and remove elements from the DOM, you’ll be able to build dynamic and interactive web applications, like the to-do list example in this guide.