The Box Model

DOM (Document Object Model) is a JavaScript representation of your HTML page. It lets you read and change HTML elements, attributes, and content using JavaScript.

When a browser loads an HTML page, it builds a tree of objects that represent every element in the page. JavaScript can access that tree, find elements, and modify them. This is what makes web pages interactive.

Selecting Elements

The most common way to find elements is querySelector, which accepts any CSS selector.

// Select the first matching element
const heading = document.querySelector("h1");
const button = document.querySelector(".btn");
const input = document.querySelector("#email");

// Select all matching elements (returns a NodeList)
const paragraphs = document.querySelectorAll("p");
Reading and Changing Content
const heading = document.querySelector("h1");

// Read text content
console.log(heading.textContent);   // "Hello, World!"

// Change text content
heading.textContent = "Welcome to CodingBanana";
// innerHTML lets you set HTML, not just text
const container = document.querySelector(".container");
container.innerHTML = "
New content
";

Changing Styles

const box = document.querySelector(".box");

// Set individual styles
box.style.backgroundColor = "#6367ff";
box.style.padding = "1rem";
box.style.borderRadius = "12px";

Working with Classes

The classList API makes it easy to manage CSS classes.

const card = document.querySelector(".card");

card.classList.add("active");       // add a class
card.classList.remove("active");    // remove a class
card.classList.toggle("active");    // add if missing, remove if present
card.classList.contains("active");  // returns true or false
Changing Attributes
const link = document.querySelector("a");

link.getAttribute("href");              // read an attribute
link.setAttribute("href", "/about");    // set an attribute
link.removeAttribute("target");         // remove an attribute

Event Listeners

Events allow JavaScript to respond to user actions like clicks, typing, and form submissions.

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("Button clicked!");
});

Using an arrow function:

button.addEventListener("click", () => {
  button.textContent = "Clicked!";
  button.style.backgroundColor = "#4ade80";
});

The Event Object

The event callback receives an event object with details about the event.

document.addEventListener("keydown", (event) => {
  console.log(event.key);   // key that was pressed
});

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // prevent page reload
  console.log("Form submitted!");
});
Creating and Inserting Elements
// Create a new element
const item = document.createElement("li");
item.textContent = "New item";

// Add it to the page
const list = document.querySelector("ul");
list.appendChild(item);
Removing Elements
const element = document.querySelector(".remove-me");
element.remove();