DOM Basics
Select, read, and modify HTML elements with JavaScript
Free tier: read the explanation here. Upgrade to Pro for Drills, Speed challenges & Mastery badges.
UpgradeKnowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
The is a tree of objects representing your HTML page. JavaScript can read and modify it.
Selecting elements:
javascript document.getElementById('header') // single, by id document.querySelector('.card') // first match, CSS selector document.querySelectorAll('li.active') // NodeList (all matches)
Reading and setting content:
javascript const el = document.querySelector('h1'); el.textContent = 'New title'; // plain text (safe) el.innerHTML = '<em>New</em> title'; // HTML (careful with user input!)
Changing styles:
javascript el.style.color = 'red'; el.classList.add('active'); el.classList.remove('hidden'); el.classList.toggle('open');
Creating and inserting elements:
javascript const li = document.createElement('li'); li.textContent = 'New item'; document.querySelector('ul').appendChild(li);
Reading attributes:
javascript el.getAttribute('href'); el.setAttribute('data-id', '42'); el.removeAttribute('disabled');
Examples
Update all list items
querySelectorAll returns a NodeList — forEach works on it
const items = document.querySelectorAll('li');
items.forEach((item, i) => {
item.textContent = `Item ${i + 1}`;
item.classList.add('styled');
});Dynamically build a list
createElement + appendChild is the pattern for building DOM from data
const fruits = ['Apple', 'Banana', 'Cherry'];
const ul = document.querySelector('#fruit-list');
fruits.forEach(fruit => {
const li = document.createElement('li');
li.textContent = fruit;
ul.appendChild(li);
});How well did you understand this?
Next in JavaScript Core
Event Listeners