Form Elements

When a browser loads an HTML page, it creates a tree of objects representing every element. JavaScript can reach into that tree, find elements, and modify them — that's how web pages become interactive.

Selecting Elements

The most common way to find an element 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 Codecraft";

// innerHTML lets you set HTML, not just text
const container = document.querySelector(".container");
container.innerHTML = "<p>New <strong>content</strong></p>";

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 is the cleanest way to toggle styles by adding and removing 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 are how you respond to user actions — clicks, keypresses, form submissions, and more:

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 callback receives an event object with details about what happened:

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

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the page from reloading
  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();

Try It Yourself

Click the button below and edit the HTML, CSS, and JS to see live output: