HTML + JS, DOM & Events

JavaScript connects to HTML through the DOM (Document Object Model). The browser turns HTML into a tree of objects JS can read and change.

HTML First — JS and HTML together

JavaScript connects to HTML through the DOM (Document Object Model). The browser turns HTML into a tree of objects JS can read and change.

Real-life example: HTML builds the shop. JavaScript is the shopkeeper who changes prices and opens doors when customers click.

HTML page ready for JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Rishtaara Demo</title>
</head>
<body>
  <h1 id="title">Welcome</h1>
  <button id="btn">Click me</button>
  <script src="app.js" defer></script>
</body>
</html>

HTML DOM — getElementById and querySelector

getElementById finds one element by id. querySelector uses CSS selectors — more flexible (#id, .class, button).

Real-life example: getElementById is finding a student by exact roll number. querySelector is finding "any boy in blue shirt."

Select elements

const title = document.getElementById("title");
const btn = document.querySelector("#btn");
const firstP = document.querySelector("p");

textContent and classList

textContent sets plain text inside an element. classList.add/remove/toggle changes CSS classes.

Real-life example: textContent — change the words on a sign. classList — add "highlight" sticker without rewriting whole sign.

Change text and classes

const el = document.querySelector("#title");
el.textContent = "Hello, Rishtaara!";
el.classList.add("big-title");
el.classList.toggle("hidden");

createElement and append

document.createElement makes a new tag. append or appendChild adds it to the page.

Real-life example: createElement — build a new chair. append — place the chair in the room.

Add new element

const li = document.createElement("li");
li.textContent = "New item";
document.querySelector("ul").append(li);

HTML Events — onclick

Events are user actions — click, type, submit. onclick in HTML works but addEventListener in JS is cleaner.

Real-life example: onclick attribute is a doorbell wired in the wall. addEventListener is a wireless bell you attach anytime.

Inline onclick (learning only)

<button onclick="alert('Hi')">Say Hi</button>

addEventListener

element.addEventListener("click", handler) runs your function when the event happens. You can add many listeners.

Real-life example: One door, many listeners — security camera and welcome music both react to the same door opening.

Click listener

const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
  console.log("Button clicked!");
});

input and submit events

input fires as the user types. submit fires when a form is sent — use event.preventDefault() to stop page reload for JS handling.

Real-life example: input — live typing on WhatsApp. submit — pressing Send on a form; preventDefault keeps you on the same page.

You finished JS basics! Next steps: async/fetch, modules, and a framework like React in later Rishtaara courses.

Form input and submit

const input = document.querySelector("#name");
input.addEventListener("input", (e) => {
  console.log("Typing:", e.target.value);
});

const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form handled by JS — no reload");
});

Matching HTML form

<form id="signup">
  <input id="name" type="text" placeholder="Your name" />
  <button type="submit">Join Rishtaara</button>
</form>