DOM Manipulation Mastery

// querySelector — recommended for everything
const header = document.querySelector("header");
const submitBtn = document.querySelector("#submit");
const firstCard = document.querySelector(".card");
const emailInput = document.querySelector('input[type="email"]');

// querySelectorAll — returns NodeList
const allCards = document.querySelectorAll(".card");
const navLinks = document.querySelectorAll(".nav a");

// Convert NodeList to array for array methods
const cardArray = Array.from(allCards);
const links = [...navLinks];

// Contextual search (search within an element)
const list = document.querySelector(".todo-list");
const items = list.querySelectorAll(".todo-item");

const title = document.querySelector("h1");

// Text content (safe — no HTML parsing, XSS-safe)
title.textContent = "New Title";
title.textContent;  // read current text

// Inner HTML (careful with user content!)
const container = document.querySelector(".content");
container.innerHTML = `<p>Hello <strong>World</strong></p>`;

// Attributes
const img = document.querySelector("img");
img.setAttribute("alt", "New description");
img.getAttribute("src");
img.removeAttribute("hidden");
img.hasAttribute("required");

// data-* attributes
const card = document.querySelector("[data-id]");
card.dataset.id;        // read "data-id"
card.dataset.userId = "42";  // set "data-user-id"

// Direct property access (faster for common attributes)
input.value = "hello";
input.disabled = true;
input.checked = false;
link.href = "/new-page";
img.src = "/new-image.jpg";

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

// classList methods
el.classList.add("active", "highlighted");
el.classList.remove("hidden");
el.classList.toggle("selected");           // add if missing, remove if present
el.classList.replace("old-class", "new");
el.classList.contains("active");           // boolean

// Inline styles (prefer CSS classes over inline styles)
el.style.backgroundColor = "#4a90e2";
el.style.setProperty("--custom-var", "value");  // CSS variables
el.style.removeProperty("color");

// Read computed styles (what's actually applied)
const computed = window.getComputedStyle(el);
computed.getPropertyValue("font-size");
computed.getPropertyValue("--primary-color");

// Create
const card = document.createElement("div");
card.className = "card";
card.dataset.id = "42";

const title = document.createElement("h3");
title.textContent = "Card Title";

const button = document.createElement("button");
button.textContent = "View More";
button.className = "btn";

// Build the structure
card.append(title, button);

// Insert into DOM
const grid = document.querySelector(".grid");
grid.appendChild(card);          // last child
grid.prepend(card);              // first child
grid.insertBefore(card, grid.firstElementChild);

// Modern positional insertion
existingCard.after(newCard);     // after sibling
existingCard.before(newCard);    // before sibling

// insertAdjacentHTML — fast string HTML insertion
grid.insertAdjacentHTML("beforeend", `
    <div class="card">
        <h3>${escapeHtml(title)}</h3>
        <p>${escapeHtml(body)}</p>
    </div>
`);

function escapeHtml(str) {
    const div = document.createElement("div");
    div.textContent = str;
    return div.innerHTML;
}

// Remove
element.remove();

// Replace
oldElement.replaceWith(newElement);

// Clear all children
container.innerHTML = "";
container.replaceChildren();  // modern, cleaner

// Inefficient — one DOM update per item
items.forEach(item => {
    list.appendChild(createItemEl(item));
});

// Efficient — one DOM update total
const fragment = document.createDocumentFragment();
items.forEach(item => fragment.appendChild(createItemEl(item)));
list.appendChild(fragment);

// Also efficient — single innerHTML set
list.innerHTML = items.map(item => `
    <li class="item" data-id="${item.id}">
        ${escapeHtml(item.text)}
    </li>
`).join("");

const el = document.querySelector(".selected");

el.parentElement;
el.children;                    // HTMLCollection of direct children
el.firstElementChild;
el.lastElementChild;
el.nextElementSibling;
el.previousElementSibling;
el.closest(".container");       // walk up to find nearest ancestor

// Check relationships
el.contains(child);             // is child a descendant?
el.matches(".active");          // does el match this selector?

function renderTable(data, columns, container) {
    const headers = columns.map(col => `<th>${col.label}</th>`).join("");
    const rows = data.map(row =>
        `<tr>${columns.map(col => `<td>${row[col.key] ?? ""}</td>`).join("")}</tr>`
    ).join("");
    
    container.innerHTML = `
        <table>
            <thead><tr>${headers}</tr></thead>
            <tbody>${rows}</tbody>
        </table>
    `;
}

renderTable(
    [{ id: 1, name: "Alice", role: "Admin" }, { id: 2, name: "Bob", role: "User" }],
    [{ key: "id", label: "ID" }, { key: "name", label: "Name" }, { key: "role", label: "Role" }],
    document.querySelector("#user-table")
);