If you are someone who just got started with frontend development you might have wondered how JavaScript can change a webpage after it's loaded?
That’s where the Document Object Model (DOM) comes in! The DOM is like a map of your webpage that JavaScript can read and modify, letting you dynamically update content, change styles, and create interactive web experiences.
In this simple guide, we’ll break down the basics of the DOM in a simple way, so you can start using it with confidence.
What is the DOM?
Think of the DOM as a family tree of your webpage. Each HTML element (like <h1>, <p>, and <div>) is a node in this tree. When your browser loads a webpage, it builds this tree-like structure, allowing JavaScript to interact with different parts of the page.
Example DOM Structure
Here's a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1 id="title">Hello, DOM!</h1>
<p class="description">This is an example paragraph.</p>
</body>
</html>
When loaded in a browser, this turns into a DOM tree, where each element becomes accessible via JavaScript.
How to Select Elements in the DOM
Before we can modify anything, we first need to select elements using JavaScript. Here’s how:
Selecting an Element by ID
If an element has an id, you can grab it like this:
let heading = document.getElementById("title");
console.log(heading.textContent); // Outputs: Hello, DOM!
Selecting Elements by Class or Tag Name
let paragraph = document.querySelector(".description");
console.log(paragraph.innerHTML); // Grabs the first paragraph
let allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs.length); // Counts all `<p>` elements
How to Modify the DOM
Once we’ve selected an element, we can change its content, style, or attributes. Let’s see how:
Changing Text
document.getElementById("title").textContent = "Welcome to the DOM!";
Updating Attributes
let link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
Modifying Styles
document.querySelector(".description").style.color = "blue";
Creating and Removing Elements
Creating a New Element
let newDiv = document.createElement("div");
newDiv.textContent = "This is a new div!";
document.body.appendChild(newDiv);
Removing an Element
let paragraph = document.querySelector(".description");
paragraph.remove();
Final Thoughts
Mastering the DOM opens up a world of possibilities in web development! From updating text dynamically to creating interactive elements, the DOM is an essential tool for any aspiring frontend developer. Keep experimenting and building cool projects—the best way to learn is by doing!
Just like any other beginner I was also exploring the world of DOM, then it slowly progressed towards me building more complex frontend experiences over time.
Currently I'm Developing LiveAPI, here you can see the progress I have made currently.
LiveAPI is a Super-Convenient tool that helps to generate Interactive API documentation in seconds!
Top comments (0)