DOM Manipulation

What is the DOM?

The DOM (Document Object Model) is the browser's representation of your HTML page as a tree of objects. JavaScript can access and modify this tree to change what users see.

<!-- HTML -->
<div id="app">
    <h1>MixMind</h1>
    <p class="status">Ready</p>
</div>

<!-- Becomes this in JavaScript: -->
{
    tagName: "DIV",
    id: "app",
    children: [
        { tagName: "H1", text: "MixMind" },
        { tagName: "P", class: "status", text: "Ready" }
    ]
}

Selecting Elements

// By ID (returns single element)
const playBtn = document.getElementById("playBtn");

// By class (returns collection)
const cards = document.getElementsByClassName("track-card");

// By tag name
const paragraphs = document.getElementsByTagName("p");

// Modern selectors (preferred)
const btn = document.querySelector("#playBtn"); // First match
const allCards = document.querySelectorAll(".track-card"); // All matches

// CSS selectors work!
const firstTrack = document.querySelector(".track-list > .track");

Modifying Elements

// Change text content
statusElement.textContent = "Analyzing...";

// Change HTML content
container.innerHTML = "<h2>New Content</h2>";

// Change styles
element.style.color = "red";
element.style.backgroundColor = "#12121a";

// Change classes
element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("expanded");

// Change attributes
image.src = "new-image.jpg";
link.href = "https://example.com";
input.value = "New value";

// Create new elements
const newDiv = document.createElement("div");
newDiv.textContent = "Hello";
newDiv.className = "card";
document.body.appendChild(newDiv);

// Remove elements
element.remove();

// Updating analysis progress
function updateProgress(trackId, percent) {
    const progressBar = document.querySelector(`#track-${trackId} .progress`);
    progressBar.style.width = percent + "%";
    progressBar.textContent = percent + "%";
}

// Adding tracks to UI
function addTrackToLibrary(track) {
    const card = document.createElement("div");
    card.className = "track-card";
    card.innerHTML = `
        <h3>${track.title}</h3>
        <p>${track.bpm} BPM - ${track.key}</p>
    `;
    document.querySelector(".track-list").appendChild(card);
}

// Updating status
function setStatus(message, type) {
    const status = document.getElementById("status");
    status.textContent = message;
    status.className = "status " + type;
}