Part 1 — Definition

The **DOM** is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. You first "Find" the element, then you "Action" it.

Part 2 — Syntax

let title = document.getElementById("main-title");
title.innerText = "New Title";
title.style.color = "red";

Part 3 — Example

Problem: Change the background of a div when a button is clicked.

function changeBg() {
    document.body.style.backgroundColor = "yellow";
}

Observation: innerText changes only the text, while innerHTML can inject new HTML tags.

Part 4 — Video

Video: Coming Soon

Part 1 — Definition

An Event is an action that happens on your web page, like a user clicking a button or typing in a field. An Event Listener is a function that "waits" for that event to happen and then runs a specific piece of code.

Part 2 — Syntax

button.addEventListener("click", () => {
    console.log("Button Clicked!");
});

Part 3 — Example

Problem: Create a "Toggle" button that shows/hides a paragraph.

let btn = document.querySelector("#toggle-btn");
let content = document.querySelector("#content");

btn.addEventListener("click", () => {
    if (content.style.display === "none") {
        content.style.display = "block";
    } else {
        content.style.display = "none";
    }
});

Part 4 — Video

Video: Coming Soon