The DOM (Document Object Model) is how JS talks to HTML. But manipulating the DOM is slow. Knowing how to do it efficiently is a senior skill.
Interactive Playground
<div id="parent" style="padding: 20px; background: #eee;">
Parent Div
<button id="child">Click Me (Child)</button>
</div>
<p id="log">Logs:</p>Event Bubbling (The Champagne Tower)
When you click a button inside a div, you are actually clicking both.
The event "Bubbles Up" like a bubble in water: Button → Div → Body → HTML.
Pro Pattern (Event Delegation): Instead of adding 100 listeners to 100 list items, add 1 listener to the parent list (UL). It catches all clicks from its children.
Selecting Elements
javascript
// Modern & Flexible
const btn = document.querySelector(".submit-btn");
const allItems = document.querySelectorAll("li");
// Old School (Faster, but specific)
const header = document.getElementById("header");Modifying the DOM
javascript
const box = document.createElement("div");
box.classList.add("alert-box");
box.textContent = "Error Saved!";
document.body.appendChild(box);