# JavaScript & the DOM

> When I first started learning JavaScript, most of what I wrote lived in the console.

- Author: Bianca Correia
- Published: 17 Feb 2026
- Topics: javascript, dom, frontend
- URL: https://biancacorreia.com/blog/javascript-and-the-dom

When I first started learning JavaScript, most of what I wrote lived in the console.

Variables changed.  
Functions ran.  
Numbers updated.

But the page itself?  
It just… sat there. Frozen in time.

Then I started working with the DOM, and suddenly JavaScript stopped being just logic and started becoming interaction. Buttons responded. Lists grew. Content appeared out of nowhere. The page felt alive.

This article is about how a set of DOM challenges taught me what JavaScript is really for, changing what the user sees, without refreshing the page.

## The DOM Is Not Your HTML File

One of the biggest mindset shifts was understanding what the DOM actually is. The Document Object Model is the browser’s internal representation of your HTML. It’s not the file you wrote — it’s the *tree* the browser builds from it. Which means your page is no longer static.

## DOM Manipulation with Selectors

One of the challenges focused on using CSS selectors inside JavaScript to manipulate the page. The instructions were simple, to use our knowledge of CSS selectors to dynamically manipulate the page using JavaScript.

Learning JavaScript with the DOM helped me understand that web pages are not fixed once they load. Instead of JavaScript just changing numbers or running logic in the background, it can change what the user actually sees on the screen. The browser turns HTML into a structure called the DOM, and JavaScript can move through it, change it, remove parts of it, or add new content at any time.

The setup felt very “developer real-life”:

Run a local server:

```
serve
```

-   Open [`localhost:8000`](http://localhost:8000)
    
-   Edit `lib/dom.js`
    
-   Refresh the browser
    
-   Watch tests turn green one by one
    

So instead of editing markup directly, I was doing things like selecting elements with `querySelector`,

```
const title = document.querySelector("h1"); 
const items = document.querySelectorAll("li");
```

Once elements were selected, I could change their content:

```
title.innerText = "DOM Manipulation in Action";
```

Traversing parents and children, I also learned how to add new elements to the page by creating nodes and inserting them into the DOM:

```
const newItem = document.createElement("li"); 
newItem.innerText = "New list item"; 
document.querySelector("ul").appendChild(newItem);
```

Removing elements was just as important, and showed how flexible the DOM really is:

```
const itemToRemove = document.querySelector(".old-item");
itemToRemove.remove();
```

Every refresh was feedback.

By practicing with challenges that involved selecting elements and updating them, I could see my code immediately affect the page. Building a fake email inbox made this even clearer, because new messages could appear without refreshing the page, just like in real apps such as Gmail. These exercises showed me that interactive websites work by using JavaScript to update the DOM again and again over time, turning simple code into real user experiences.