Welcome back again to our tutorials on JavaScript! In the last post, we saw how event handling can be done. Today, another very important section of JavaScript coding is what we are going to look at: DOM manipulation. Basically, DOM means Document Object Model; it is a cross-platform, language-independent interface. It allows programs and scripts to dynamically access and update the content, structure and even style of documents.”
Introduction to the DOM
The DOM makes the whole page a programmable object model. It can be considered as a tree where each node is a part of the HTML document like a tag, a piece of text or an attribute.
Basic DOM Operations
Different methods are provided by JavaScript to select and manipulate these nodes. Some basic operations are given below:
Selecting Elements
The elements on the page can be selected using methods such as document.getElementById(), document.getElementsByTagName() and document.querySelector().
let element = document.getElementById('myElement');
let images = document.getElementsByTagName('img');
let firstButton = document.querySelector('button');
Modifying Elements
Once an element is selected, you can modify its content or attributes.
// Modify text content
element.textContent = "New content";
// Modify HTML content
element.innerHTML = "<span>Updated content</span>";
// Modify attributes
element.setAttribute('href', 'https://example.com');
Creating and Deleting Elements
You can create new elements and insert them into the DOM tree or delete existing elements from the DOM tree.
// Create an element
let newElement = document.createElement('div');
// Add to the document
document.body.appendChild(newElement);
// Remove an element
document.body.removeChild(newElement);
Interacting with Elements through Events
Combining event handling with DOM manipulation can create interactive user experiences.
button.addEventListener('click', function() {
document.getElementById('demo').style.color = 'red';
});
Example: Simple To-Do Application
Let’s use our learned DOM manipulation skills to create a simple to-do application.
<!DOCTYPE html>
<html lang="en">
<head>
<title>To-Do App</title>
</head>
<body>
<input type="text" id="todoInput" placeholder="Add a new to-do">
<button id="addBtn">Add</button>
<ul id="todoList"></ul>
<script>
document.getElementById('addBtn').addEventListener('click', function() {
let input = document.getElementById('todoInput');
let newTodo = document.createElement('li');
newTodo.textContent = input.value;
document.getElementById('todoList').appendChild(newTodo);
input.value = ''; // Clear the input box
});
</script>
</body>
</html>
In this example we’ve set up some very basic HTML-theXA text input box, a button, and a list. When the button is clicked it reads the value from the text input box, creates a new list item, and adds it to our to-do list.
Summary
Henceforth, throughout this tutorial, you should now have a solid understanding of doing basic DOM manipulations with JavaScript. With these at your disposal, you can offer an all-new level of dynamism and interactivity in web pages. Go through these techniques time and again until you feel confident using them. Use them in some web projects of yours and, when you feel at ease with these, we would be expecting you in the next lesson to learn more in-depth knowledge about JavaScript.
