HTML and CSS make a page. JavaScript makes it respond. The DOM is how JavaScript talks to the page.
Direct answer
The DOM (Document Object Model) is the browser's live version of your page. With JavaScript you select elements, change their text and styles, and listen for events such as clicks and typing. The core tools are querySelector, textContent, classList and addEventListener.
Selecting and changing
<h1 id="title">Hello</h1>
<button id="btn">Change</button>
const title = document.querySelector('#title');
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
title.textContent = 'Hello, Sam';
title.classList.add('highlight');
});
When the button is clicked, the heading text changes and gets a CSS class.
Common events
| Event | When it fires |
|---|---|
click | An element is clicked or tapped |
input | The value of an input changes as you type |
submit | A form is submitted |
keydown | A key is pressed |
DOMContentLoaded | The page has loaded |
Building a list from data
const fruits = ['apple', 'banana', 'cherry'];
const list = document.querySelector('#list');
fruits.forEach((fruit) => {
const li = document.createElement('li');
li.textContent = fruit;
list.appendChild(li);
});
textContent vs innerHTML
Use textContent for text. innerHTML interprets HTML, which can be unsafe if the text comes from users.
Next steps
Check input in forms: JavaScript form validation example. New to the language? Read JavaScript for beginners.
Where Teyro fits
Teyro's Interactive Web Pages with JavaScript makes web pages come alive: change what's on the page, react to taps and typing, build lists from data and check forms, on a live page in every lesson. It has 37 lessons and is free to start.
The bottom line
Select, change, listen. Repeat.
