DOM Manipulation
The Document Object Model (DOM) is JavaScript's representation of your HTML page. You can use JS to change content, styles, and structure on the fly.
Selecting Elements
document.querySelector is the most versatile way to find elements, using CSS selectors.
const title = document.querySelector('h1');
const buttons = document.querySelectorAll('.btn'); // Gets all
const specificId = document.getElementById('my-div');
Modifying Elements
Once you select an element, you can change its text, HTML, styles, or classes.
const box = document.querySelector('.box');
box.textContent = "New Text!";
box.style.backgroundColor = "blue";
box.classList.add('active');
Practice
Challenge 1: Use DevTools to select the h1 on this page and change its color to red.