Making Pages Interactive

Now let's connect JavaScript to HTML! This is where the magic happens.

What is DOM?

DOM = Document Object Model

It's the representation of the HTML page as JavaScript objects. With the DOM, we can:

Find elements
Modify content
Change styles
React to events

HTML in file → Browser reads → Creates DOM → JavaScript manipulates

Selecting Elements

By ID (most specific)

html

<h1 id="title">Hello!</h1>

javascript

const title = document.getElementById("title");console.log(title); // <h1 id="title">Hello!</h1>

By Class

html

<p class="highlight">Paragraph 1</p><p class="highlight">Paragraph 2</p>

javascript

const highlights = document.getElementsByClassName("highlight");// Returns a collection (similar to array)

querySelector (modern and recommended)

javascript

// By IDconst title = document.querySelector("#title"); // By class (first element)const highlight = document.querySelector(".highlight"); // By tagconst paragraph = document.querySelector("p"); // Complex selectorconst item = document.querySelector("nav a.active");

querySelectorAll (multiple elements)

javascript

const allHighlights = document.querySelectorAll(".highlight"); allHighlights.forEach(el => {    console.log(el.textContent);});

Modifying Content

textContent vs innerHTML

html

<p id="text">Hello <strong>world</strong>!</p>

javascript

const text = document.querySelector("#text"); // textContent - just the textconsole.log(text.textContent); // "Hello world!"text.textContent = "New text"; // innerHTML - includes HTMLconsole.log(text.innerHTML); // "Hello <strong>world</strong>!"text.innerHTML = "Text <em>in italics</em>";

Modifying Styles

javascript

const title = document.querySelector("#title"); // One propertytitle.style.color = "blue";title.style.fontSize = "32px";title.style.backgroundColor = "#f0f0f0"; // Multiple at once with cssTexttitle.style.cssText = "color: red; font-size: 24px;";

Note: CSS properties with hyphens become camelCase:

background-color → backgroundColor
font-size → fontSize

Manipulating Classes

javascript

const element = document.querySelector(".card"); // Add classelement.classList.add("active"); // Remove classelement.classList.remove("active"); // Toggleelement.classList.toggle("active"); // Check if haselement.classList.contains("active"); // true/false

Events

Events are user actions: clicks, keys, mouse, etc.

addEventListener

javascript

const button = document.querySelector("#myButton"); button.addEventListener("click", function() {    alert("Button clicked!");});

With arrow function

javascript

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

Common Events

Event	When it fires
`click`	Mouse click
`dblclick`	Double click
`mouseover`	Mouse enters element
`mouseout`	Mouse leaves element
`keydown`	Key pressed
`keyup`	Key released
`submit`	Form submitted
`input`	Input value changes
`change`	Value changes (on blur)
`load`	Page loaded

Example: Toggle Theme

html

<button id="btnTheme">🌙 Dark Mode</button>

javascript

const btnTheme = document.querySelector("#btnTheme");const body = document.body; btnTheme.addEventListener("click", () => {    body.classList.toggle("dark-mode");     if (body.classList.contains("dark-mode")) {        btnTheme.textContent = "☀️ Light Mode";    } else {        btnTheme.textContent = "🌙 Dark Mode";    }});

Creating Elements

javascript

// Create elementconst newParagraph = document.createElement("p");newParagraph.textContent = "Paragraph created with JS!";newParagraph.classList.add("new"); // Add to DOMdocument.body.appendChild(newParagraph); // Or to specific elementconst container = document.querySelector(".container");container.appendChild(newParagraph);

Removing Elements

javascript

const element = document.querySelector("#toRemove");element.remove();

Forms

html

<form id="myForm">    <input type="text" id="name" placeholder="Your name">    <input type="email" id="email" placeholder="Your email">    <button type="submit">Send</button></form><div id="result"></div>

javascript

const form = document.querySelector("#myForm");const result = document.querySelector("#result"); form.addEventListener("submit", (e) => {    e.preventDefault(); // Prevent page reload     const name = document.querySelector("#name").value;    const email = document.querySelector("#email").value;     result.innerHTML = `        <p>Name: ${name}</p>        <p>Email: ${email}</p>    `;     form.reset(); // Clear form});

Complete Example: Todo List

html

<!DOCTYPE html><html><head>    <title>Todo List</title>    <style>        .completed { text-decoration: line-through; color: gray; }    </style></head><body>    <h1>📝 My Tasks</h1>    <form id="taskForm">        <input type="text" id="newTask" placeholder="New task..." required>        <button type="submit">Add</button>    </form>    <ul id="taskList"></ul>     <script src="script.js"></script></body></html>

javascript

// script.jsconst form = document.querySelector("#taskForm");const input = document.querySelector("#newTask");const list = document.querySelector("#taskList"); form.addEventListener("submit", (e) => {    e.preventDefault();     const text = input.value.trim();    if (!text) return;     // Create item    const li = document.createElement("li");    li.innerHTML = `        <span>${text}</span>        <button class="complete">✓</button>        <button class="remove">✕</button>    `;     // Complete button    li.querySelector(".complete").addEventListener("click", () => {        li.querySelector("span").classList.toggle("completed");    });     // Remove button    li.querySelector(".remove").addEventListener("click", () => {        li.remove();    });     list.appendChild(li);    input.value = "";    input.focus();});

Summary

✅ DOM is the HTML representation for JavaScript
✅ querySelector to select elements
✅ .textContent and .innerHTML to modify
✅ .style and .classList for styles
✅ addEventListener to react to events
✅ createElement and appendChild to create elements

In the next lesson, we'll build your complete portfolio! 🚀