Day 7: DOM Manipulation in JavaScript
Date: December 14, 2024
Welcome to Day 7 of your JavaScript learning journey! Today’s topic focuses on DOM Manipulation, one of the most exciting aspects of JavaScript. With DOM manipulation, you can dynamically update, add, or remove elements from a webpage, making it interactive and user-friendly. By the end of today’s lesson, you’ll also create a simple To-Do List project to put your knowledge into practice.
1. What is the DOM?
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of an HTML document as a tree of objects, allowing you to access and manipulate elements programmatically using JavaScript.
Here’s an example of how the DOM represents HTML:
<html>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
The DOM tree for the above would look like this:
Document
└── html
└── body
├── h1
└── p
2. Accessing DOM Elements
You can access elements in the DOM using several methods:
Using getElementById
let title = document.getElementById("title");
console.log(title); // Logs the element with ID "title"
Using getElementsByClassName
let items = document.getElementsByClassName("item");
console.log(items); // Logs all elements with class "item"
Using querySelector and querySelectorAll
let firstItem = document.querySelector(".item"); // First element with class "item"
let allItems = document.querySelectorAll(".item"); // All elements with class "item"
3. Modifying DOM Elements
Changing Content
You can update the text or HTML inside an element using:
-
innerText: Updates the visible text. -
innerHTML: Updates the HTML content.
let title = document.getElementById("title");
title.innerText = "Updated Title"; // Changes visible text
title.innerHTML = "<strong>Updated Title</strong>"; // Adds HTML formatting
Changing Styles
You can directly modify the CSS styles of an element.
let title = document.getElementById("title");
title.style.color = "blue";
title.style.fontSize = "24px";
Adding or Removing Classes
let box = document.getElementById("box");
box.classList.add("highlight"); // Adds a class
box.classList.remove("highlight"); // Removes a class
4. Handling Events
Events allow you to make your web pages interactive. Here are some common event types and how to handle them.
Inline Event Handling
In your HTML:
<button onclick="alert('Button Clicked!')">Click Me</button>
Using addEventListener
This approach is preferred as it separates JavaScript from HTML.
let button = document.getElementById("btn");
button.addEventListener("click", function () {
alert("Button Clicked!");
});
Common Events
-
click: Triggered when an element is clicked. -
mouseover: Triggered when the mouse hovers over an element. -
keyup: Triggered when a key is released.
Example:
let inputField = document.getElementById("input");
inputField.addEventListener("keyup", function (event) {
console.log(`You typed: ${event.target.value}`);
});
5. Project: To-Do List
Let’s combine what you’ve learned into a simple To-Do List application.
HTML Structure
<!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>
</head>
<body>
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Enter a task">
<button id="addTaskBtn">Add Task</button>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>
JavaScript Code
// Access elements
let taskInput = document.getElementById("taskInput");
let addTaskBtn = document.getElementById("addTaskBtn");
let taskList = document.getElementById("taskList");
// Add event listener to the button
addTaskBtn.addEventListener("click", function () {
let task = taskInput.value; // Get the input value
if (task.trim() !== "") {
// Create a new list item
let listItem = document.createElement("li");
listItem.innerText = task;
// Add a delete button
let deleteBtn = document.createElement("button");
deleteBtn.innerText = "Delete";
deleteBtn.addEventListener("click", function () {
taskList.removeChild(listItem);
});
listItem.appendChild(deleteBtn); // Add delete button to the list item
taskList.appendChild(listItem); // Add the list item to the task list
taskInput.value = ""; // Clear the input field
} else {
alert("Please enter a task!");
}
});
How It Works
- User types a task in the input field.
- Clicking "Add Task" creates a new
<li>element with the task. - Each task has a "Delete" button to remove it.
6. Key Takeaways
-
DOM Access: Use methods like
getElementByIdandquerySelector. - DOM Modification: Change content, styles, and classes dynamically.
-
Event Handling: Use
addEventListenerto make your pages interactive. - Practice Project: Build a to-do list to reinforce your knowledge.
Practice Tasks for Day 7
- Add a "Mark as Done" feature to your to-do list.
- Create a shopping list app where users can input items and their quantities.
- Experiment with event types like
mouseoverandkeydownin a small project.
Next Steps
Tomorrow, on Day 8, we’ll explore Error Handling and Debugging, learning how to handle unexpected issues in your JavaScript code. See you then!
Top comments (2)
I would advise against using
innerHTMLMaybe you like one of my libraries tinyDOM or JQL (both intended to take some heavy lifting of DOM manipulation).
thanks men appreciate your effort , great work ✨