JS: Module 5

← Dashboard
Module 5: The Digital Pulse

DOM Manipulation

Find elements with querySelector. Update text, styles, and create new elements on the fly.

// Find elements
const el = document.querySelector('.coffee-title');

// Update content & style
el.textContent = 'Fresh Brew';
el.style.color = '#6f4e37';

// Create new element
const div = document.createElement('div');
div.textContent = 'New cup!';
document.body.appendChild(div);
Pro Tip

querySelector returns the first match. querySelectorAll returns all matches.

DOM

The Document Object Model — your HTML as a tree of objects JS can manipulate.