JavaScript · Quick Reference

Lesson 10 — DOM Manipulation Cheat Sheet

JavaScript

In one line: When a browser loads an HTML page, it creates a tree of objects representing the page structure. This tree is called the Document Object Model (DOM). JavaScript can read and mod...

Key Ideas

1What is the DOM?. When a browser loads an HTML page, it creates a tree of objects representing the page structure. This tree is called the Document Object Model (DOM). JavaScript can re...

Code Examples

// getElementById — fastest, by unique ID
const header = document.getElementById('main-header');

// querySelector — CSS selector, returns FIRST match
const btn = document.querySelector('.btn-primary');
const first = document.querySelector('ul li');
c...

const box = document.querySelector('#myBox');

// innerHTML — parses HTML tags (use carefully!)
box.innerHTML = '<strong>Hello</strong> World';

// textContent — plain text only (safer)
box.textContent = 'Hello World';

// innerText — vi...

// Create a new element
const li = document.createElement('li');
li.textContent = 'New Item';
li.classList.add('list-item');

// Append to parent (at the end)
const ul = document.querySelector('#myList');
ul.appendChild(li);

// insertBefore(newNod...