CookieSensei

CookieSensei Home Learn Free Workshops Live Guidance About FAQ Contact Launch Lab

Learn/Programming & AI/Build Web Applications/tutorials

Build Web Applications•Reading lesson•Free

javascript and the dom

No account is required. Learn the material, try the examples, and mark it complete locally when you are ready to move on.

Tutorial 13 - JavaScript and the DOM

Why this tutorial exists

The DOM can sound technical.

A beginner-friendly definition is:

The DOM is the browser's representation of the HTML page.

JavaScript can use the DOM to find and change elements.

1. Start with HTML

html

<p id="message">Hello</p>

JavaScript can find it:

javascript

const message =
    document.getElementById("message");

Now message refers to the paragraph element.

2. Change the page

javascript

message.textContent =
    "Hello from JavaScript";

The visible text changes.

The flow:

HTML
 ↓
Browser creates DOM
 ↓
JavaScript finds element
 ↓
JavaScript changes element
 ↓
Browser updates page

javascript

const button =
    document.getElementById("hello-button");

const message =
    document.getElementById("message");

button.addEventListener(
    "click",
    function () {
        message.textContent = "Hello!";
    }
);

javascript

const nameInput =
    document.getElementById("name");

const result =
    document.getElementById("result");

const button =
    document.getElementById("show");

button.addEventListener(
    "click",
    function () {
        result.textContent =
            nameInput.value;
    }
);