JavaScript Simplified · One concept, one day, one project · Day 13 of 32

Introduction to the DOM

How JavaScript reaches into a web page and changes it. You select an element and change what it says, then build a greeting that writes a name onto the page.

Everything so far has lived in the console. Today JavaScript finally touches the page you can see. This is the layer that makes the language feel real: you write code, and the page changes in front of you.

1. What the DOM Is

Definition

The DOM (Document Object Model) is the browser’s live version of your HTML, as objects JavaScript can read and change. When the page loads, the browser turns your HTML into a tree of elements, and JavaScript can reach any branch of that tree.

Real-Life Scenario

Think of your HTML as the blueprint of a house, and the DOM as the actual house once it is built. You cannot move a wall by editing the blueprint after the fact; you move it in the real house. JavaScript changes the real house, the DOM, and you see it happen.

2. Selecting an Element

Before you can change something, you have to grab hold of it. Two ways cover almost everything.

• getElementById("name") finds the one element whose id is "name".
• querySelector("...") finds the first element matching a CSS selector, like ".title" for a class or "h1" for a tag.

Once you have an element, textContent is the text inside it. Setting it changes what the page shows.

1

<h1 id="title">Loading...</h1>

1
2
3
4

// grab the heading by its id
const title = document.getElementById("title");
// change what it says
title.textContent = "Welcome to Webbo3!";

The HTML said "Loading...", but the JavaScript selected the heading and replaced its text. What you see on the page is the DOM after your code changed it.

querySelector

1

<p class="note">Original text</p>

1
2
3

// . means a class, just like in CSS
const note = document.querySelector(".note");
note.textContent = "Changed by JavaScript.";

Today’s Mini Project

👋 Interactive Greeting

A page with a name box and a greeting. JavaScript reads the name and writes a personal greeting onto the page. (On Day 17 you will make it update on a click; today it writes on load.)

1
2

<input id="nameBox" value="Ada">
<h2 id="greeting">Hello!</h2>

1
2
3
4

// read the value typed in the box
const name = document.getElementById("nameBox").value;
// write a personal greeting into the heading
document.getElementById("greeting").textContent = "Hello, " + name + "!";

.value reads what is in an input box. The greeting heading is then set to include that name. Change the box’s value and the greeting would change to match.

Checkpoint

Next: Day 14. You changed one heading. Tomorrow you change several parts of a card at once, and meet the difference between textContent and innerHTML.