Dev.to

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

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 , , and ) 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: My Page Hello, DOM! This is an example paragraph. 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 `` 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!

Feb 17, 2025 - 20:00
 0
JavaScript & The DOM: The Short and Simple way to get started

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

,

, and

) 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:




    </span>My Page<span class="nt">


     id="title">Hello, DOM!

class="description">This is an example paragraph.

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 `
` 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!