Rijul Rajesh

Posted on Feb 17

JavaScript & The DOM: The Short and Simple way to get started

#webdev #programming #javascript #beginners

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!

Forem