JavaScript DOM Manipulation - Basics and Examples

The Document Object Model (DOM) represents the structure of a web page and allows you to manipulate its content using JavaScript. In this guide, we'll cover the basics of DOM manipulation and provide examples to help you get started.

Accessing Elements

You can access elements in the DOM using JavaScript by selecting them with methods like getElementById, querySelector, or getElementsByClassName:

<!-- HTML -->
<div id="myDiv">This is a div</div>
// JavaScript
let divElement = document.getElementById("myDiv");
console.log(divElement.textContent); // Outputs: "This is a div"
    

Modifying Elements

You can change the content, attributes, and style of elements using JavaScript:

let paragraph = document.querySelector("p");
// Change text content
paragraph.textContent = "New text content";
// Add a CSS class
paragraph.classList.add("highlight");
// Modify attributes
paragraph.setAttribute("data-custom", "example");
    

Creating Elements

You can create new elements and add them to the DOM dynamically:

let newElement = document.createElement("div");
newElement.textContent = "Newly created element";
let container = document.getElementById("container");
container.appendChild(newElement);
    

Event Handling

You can attach event listeners to elements to respond to user interactions:

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Button clicked!");
});
    

Removing Elements

You can remove elements from the DOM using the removeChild method:

let elementToRemove = document.getElementById("toRemove");
let parentElement = elementToRemove.parentNode;
parentElement.removeChild(elementToRemove);
    

Conclusion

JavaScript DOM manipulation is a crucial skill for web development. With the ability to access, modify, create, and remove elements, you can create dynamic and interactive web pages. Start experimenting with DOM manipulation to build engaging web applications.

Happy coding!