Learn DOM Manipulation In 18 Minutes
Table of Contents
Introduction
This tutorial will guide you through the essential techniques of DOM manipulation using JavaScript. In just 18 minutes, you'll learn how to create, add, modify, and remove elements from the Document Object Model (DOM), a crucial skill for web development. Understanding these methods will enable you to dynamically interact with web pages and enhance user experiences.
Step 1: Adding Elements
Adding new elements to the DOM is fundamental for dynamic web applications. Follow these steps to add an element:
-
Select the parent element where you want to append the new element.
const parentElement = document.getElementById('parent');
-
Create the new element using
document.createElement()
.const newElement = document.createElement('div');
-
Set content or attributes for the new element if needed.
newElement.textContent = 'Hello, World!';
-
Append the new element to the parent.
parentElement.appendChild(newElement);
Step 2: Creating Elements
Creating elements is similar to adding them, but it often involves additional setup. Use this method to create elements with attributes:
-
Create an element.
const button = document.createElement('button');
-
Add attributes or classes.
button.setAttribute('type', 'button'); button.classList.add('my-button');
-
Append the element to the desired location in the DOM.
document.body.appendChild(button);
Step 3: Modifying Element Text
To change the text content of an existing element, follow these steps:
-
Select the element you want to modify.
const element = document.getElementById('myElement');
-
Change its text content.
element.textContent = 'New Text Content';
Step 4: Modifying Element HTML
If you need to change the HTML content inside an element:
-
Select the target element.
const htmlElement = document.getElementById('myHtmlElement');
-
Use
innerHTML
to modify the content.htmlElement.innerHTML = '<strong>Bold Text</strong>';
Step 5: Removing Elements
To remove elements from the DOM:
-
Select the element to be removed.
const elementToRemove = document.getElementById('removeMe');
-
Use the
remove()
method to delete it.elementToRemove.remove();
Step 6: Modifying Element Attributes
To change attributes of an element:
-
Select the element.
const image = document.getElementById('myImage');
-
Use
setAttribute()
to modify an attribute.image.setAttribute('src', 'newImage.jpg');
Step 7: Modifying Data Attributes
Data attributes are customizable attributes that can store extra information:
-
Select the element.
const dataElement = document.getElementById('dataElement');
-
Use
dataset
to change a data attribute.dataElement.dataset.customValue = 'newValue';
Step 8: Modifying Element Classes
To add or remove CSS classes from an element:
-
Select the element.
const classElement = document.getElementById('classElement');
-
Use
classList
to add or remove classes.classElement.classList.add('new-class'); classElement.classList.remove('old-class');
Step 9: Modifying Element Style
To change the inline styles of an element:
-
Select the element.
const styleElement = document.getElementById('styleElement');
-
Modify the style properties directly.
styleElement.style.backgroundColor = 'blue'; styleElement.style.fontSize = '20px';
Conclusion
By mastering these DOM manipulation techniques, you can create dynamic and interactive web applications. Start practicing with small projects to apply these concepts, and consider exploring more advanced topics like event handling and AJAX for enhanced functionality. Happy coding!