JavaScript

1. What is the DOM?

The Document Object Model (DOM) is the browser's live, in-memory representation of your HTML webpage. When the browser loads an HTML file, it parses the tags and constructs a tree of objects that JavaScript can inspect and modify.

Whenever JavaScript changes the DOM, the browser updates the visual display immediately.

The DOM Tree Hierarchy

document
 └── html
      ├── head
      │    └── title → "My Web App"
      └── body
           ├── h1   → "Hello World"
           ├── p    → "Welcome to JS"
           └── button → "Click Me"

Node Types Cheat Sheet

2. Selecting Elements

Every DOM operation starts with finding the right element. Modern JavaScript provides fast, flexible selector methods:

// 1. By ID (Fastest single element lookup, returns Element or null)
const mainTitle = document.getElementById("header-title");

// 2. By CSS Selector (Returns the FIRST matching element, or null)
const primaryBtn = document.querySelector(".btn-primary");
const emailField = document.querySelector("form input[type='email']");

// 3. All Matches (Returns a static NodeList)
const allCards = document.querySelectorAll(".card-item");

// 4. Legacy methods (Return LIVE HTMLCollections)
const tagList = document.getElementsByTagName("p");
const classList = document.getElementsByClassName("active");

const el = document.querySelector(".missing-box");
// ❌ Crashes: TypeError: Cannot set properties of null (setting 'textContent')
// el.textContent = "Hello";

// ✅ Safe: Optional chaining or null check
if (el) el.textContent = "Found!";
el?.classList.add("highlight");

Static NodeList vs Live HTMLCollection

// 1. Create a container with 2 items:
const container = document.createElement("div");
for (let i = 0; i < 2; i++) {
    const item = document.createElement("p");
    item.className = "item";
    container.append(item);
}

const staticSnapshot = container.querySelectorAll(".item");       // NodeList snapshot
const liveCollection = container.getElementsByClassName("item");  // Live HTMLCollection

console.log("Before adding item:", staticSnapshot.length, liveCollection.length); // 2 2

// 2. Add a third item to the container:
const newItem = document.createElement("p");
newItem.className = "item";
container.append(newItem);

console.log("After adding item:", staticSnapshot.length, liveCollection.length);  // 2 3

3. Traversing the DOM Tree

Once you have a reference to one element, you can navigate up, down, or sideways through the hierarchy without re-querying the whole document:

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

// 1. Upwards traversal
card.parentElement;                 // The direct parent node
card.closest(".dashboard-section"); // Nearest ancestor matching CSS selector (Crucial for delegation!)

// 2. Downwards traversal (Elements only)
card.children;                      // HTMLCollection of child elements
card.firstElementChild;             // First child element
card.lastElementChild;              // Last child element

// 3. Sideways sibling traversal
card.nextElementSibling;            // Next sibling element
card.previousElementSibling;        // Previous sibling element

// 4. Utility checks
card.matches(".active");            // Does this element match the selector? (returns true/false)
card.contains(subElement);          // Is subElement nested inside card? (returns true/false)

4. Reading & Changing Content (Security & XSS)

JavaScript provides multiple properties to read and update an element's content:

const userInput = '<img src="invalid" onerror="alert(\'Hacked!\')">';

// ❌ DANGEROUS: Executes malicious injected script!
// card.innerHTML = `<h3>Welcome ${userInput}</h3>`;

// ✅ SECURE: Characters like < and > are treated strictly as text!
card.textContent = `Welcome ${userInput}`;

5. Attributes, classList, dataset & Styles

Manipulating Classes with classList

Never overwrite element.className = "..." directly because it erases existing utility classes. Always use the built-in classList API:

const btn = document.createElement("button");

btn.classList.add("btn", "btn-primary"); // Add one or more classes
btn.classList.remove("btn-primary");     // Remove a class
btn.classList.toggle("active");          // Adds if absent, removes if present
btn.classList.toggle("dark", true);      // Force add (if 2nd arg is true)
btn.classList.contains("btn");           // Returns true
btn.classList.replace("btn", "badge");   // Replaces 'btn' with 'badge'

Custom Data Attributes (dataset)

HTML5 allows embedding custom data with data-* attributes. JavaScript reads them as camelCase properties on the dataset object:

// HTML: <div id="userCard" data-user-id="4590" data-account-type="premium"></div>
const userCard = document.getElementById("userCard");

console.log(userCard.dataset.userId);       // "4590" (Always a string!)
console.log(userCard.dataset.accountType);  // "premium"

// Update attribute dynamically:
userCard.dataset.accountType = "admin";    // Sets data-account-type="admin"

Inline Styles vs getComputedStyle()

const box = document.createElement("div");
// 1. Setting styles (camelCase properties):
box.style.backgroundColor = "#6C4CE8";
box.style.fontSize = "16px";
box.style.setProperty("--custom-theme", "#10B981");

// 2. Reading REAL styles (from external CSS stylesheets):
const computed = window.getComputedStyle(box);
console.log("Calculated background:", computed.backgroundColor);

6. Creating, Inserting & Batching DOM Elements

Modern DOM Insertion Methods

const newCard = document.createElement("div");
newCard.className = "card";
newCard.textContent = "Fresh Card";

// Modern insertion methods:
parentEl.append(newCard);         // Inserts at the end of parent (can accept strings & nodes)
parentEl.prepend(newCard);        // Inserts at the very start of parent
referenceEl.before(newCard);      // Inserts right before referenceEl
referenceEl.after(newCard);       // Inserts right after referenceEl
referenceEl.replaceWith(newCard);  // Swaps referenceEl with newCard
newCard.remove();                 // Removes element from the DOM directly!

High Performance Batching with DocumentFragment

Inserting 1,000 elements one by one into the live DOM causes 1,000 costly browser layout recalculations (reflows). A DocumentFragment is an invisible, lightweight off-screen container that lets you prepare elements in memory and inject them with a single reflow:

const userList = document.createElement("ul");
const fragment = document.createDocumentFragment(); // Lightweight off-screen memory bucket

const users = ["Anshuman", "Priya", "Rahul", "Sara", "Vikram"];

users.forEach(name => {
    const li = document.createElement("li");
    li.textContent = name;
    fragment.append(li); // Adding to off-screen fragment does NOT trigger reflow
});

userList.append(fragment); // 🚀 ONE single paint & reflow to the real DOM!
console.log("Generated HTML:", userList.outerHTML);

const div = document.createElement("div");
div.innerHTML = '<span class="tag">A</span><span class="tag">B</span>';

const staticList = div.querySelectorAll(".tag");
const liveList = div.getElementsByClassName("tag");

const extra = document.createElement("span");
extra.className = "tag";
div.append(extra);

console.log(staticList.length, liveList.length);

const p = document.createElement("p");
p.textContent = "<b>Alex</b>";

console.log(p.innerHTML);

const card = document.createElement("article");
card.className = "card";

const btn = document.createElement("button");
card.append(btn);

console.log(btn.closest(".card") === card);

const el = document.createElement("div");

const firstToggle = el.classList.toggle("active");
const secondToggle = el.classList.toggle("active");

console.log(firstToggle, secondToggle);

const frag = document.createDocumentFragment();
for (let i = 0; i < 50; i++) {
    const li = document.createElement("li");
    frag.append(li);
}

const ul = document.createElement("ul");
ul.append(frag);

7. Hands-On Practice: Build a Dynamic Profile Card

Write a function createProfileCard({ name, role, skills }) that creates and returns an <article class="profile-card"> element with an <h2> for the name, a <p> for the role, and an <ul> containing <li> items for each skill.