🌐 Lesson 8: DOM Manipulation
⏱️ Estimated time: 40 minutes | Difficulty: Intermediate
Bringing Pages to Life
The DOM (Document Object Model) is what allows JavaScript to interact with HTML elements, change their styles, and respond to clicks or keyboard input.
Table of Contents
Selecting Elements
// By ID
let elem = document.getElementById('myId');
// By class
let elems = document.querySelectorAll('.myClass');
// By selector
let first = document.querySelector('p');Output...
Changing Content
let button = document.getElementById('myBtn');
button.textContent = "Click me!";
button.style.color = "blue";Click Events
let btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
console.log("Button clicked!");
});Interactive Example
Try this out: