DOM Manipulation and Selection APIs

// Get by ID - fastest
const header = document.getElementById("header");

// Query selector - flexible CSS selectors
const firstButton = document.querySelector(".btn-primary");
const allButtons = document.querySelectorAll("button.active");

// Live collections - auto-update
const items = document.getElementsByClassName("item");
console.log(items.length); // 5
document.body.appendChild(newItem); // Adds .item element
console.log(items.length); // 6 - auto-updated

// Closest for ancestor lookup
const card = button.closest(".card");

// Matches for filtering
if (element.matches("[data-active='true']")) {
  // Element has attribute
}

// Traditional approach
const div = document.createElement("div");
div.textContent = "Hello";
document.body.appendChild(div);

// Modern approach - multiple nodes
const container = document.querySelector("#container");
container.append("Text", document.createElement("span"), "More text");

// Document fragment for performance
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const item = document.createElement("li");
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}
list.appendChild(fragment); // Single reflow

// Clone with deep copy
const original = document.querySelector(".template");
const copy = original.cloneNode(true);
copy.id = "new-id"; // Change duplicate ID
document.body.appendChild(copy);

// Modern insertion methods
element.before("Before"); // Insert before
element.after("After");   // Insert after
element.replaceWith("Replacement"); // Replace
element.remove(); // Remove from DOM

// Add single or multiple classes
element.classList.add("active");
element.classList.add("highlight", "bold", "large");

// Remove classes
element.classList.remove("inactive");

// Toggle class
const isActive = element.classList.toggle("active");
console.log(isActive); // true if added, false if removed

// Force toggle
element.classList.toggle("active", true);  // Always add
element.classList.toggle("active", false); // Always remove

// Check if class exists
if (element.classList.contains("active")) {
  console.log("Element is active");
}

// Replace class
element.classList.replace("old-theme", "new-theme");

// Iterate classes
for (let className of element.classList) {
  console.log(className);
}

// Direct style property (camelCase)
element.style.backgroundColor = "#ff0000";
element.style.fontSize = "16px";
element.style.marginTop = "20px";

// Set multiple styles at once
element.style.cssText = "color: blue; font-size: 14px; padding: 10px;";

// Set with priority
element.style.setProperty("color", "red", "important");

// Remove inline style
element.style.removeProperty("background-color");

// Get computed styles (read-only)
const computed = getComputedStyle(element);
console.log(computed.color); // "rgb(255, 0, 0)"
console.log(computed.fontSize); // "16px"

// Get pseudo-element styles
const beforeStyles = getComputedStyle(element, "::before");
console.log(beforeStyles.content);

// CSS Typed OM (modern)
element.attributeStyleMap.set("opacity", 0.5);
const opacity = element.attributeStyleMap.get("opacity");

// Parent navigation
const parent = element.parentElement;
const grandparent = element.parentElement.parentElement;

// Find closest ancestor with class
const container = element.closest(".container");

// Child navigation
const allChildren = parent.children; // HTMLCollection of elements
const firstChild = parent.firstElementChild;
const lastChild = parent.lastElementChild;

// Sibling navigation
const next = element.nextElementSibling;
const previous = element.previousElementSibling;

// Iterate all child elements
for (let child of parent.children) {
  console.log(child.tagName);
}

// Node type checking
if (node.nodeType === Node.ELEMENT_NODE) {
  console.log("Element node");
} else if (node.nodeType === Node.TEXT_NODE) {
  console.log("Text node");
}

// Walk entire tree
function walkDOM(node, callback) {
  callback(node);
  for (let child of node.children) {
    walkDOM(child, callback);
  }
}

walkDOM(document.body, (element) => {
  console.log(element.tagName);
});

// Create observer
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log("Mutation type:", mutation.type);
    console.log("Target:", mutation.target);
    
    if (mutation.type === "childList") {
      console.log("Added:", mutation.addedNodes);
      console.log("Removed:", mutation.removedNodes);
    }
    
    if (mutation.type === "attributes") {
      console.log("Attribute:", mutation.attributeName);
      console.log("Old value:", mutation.oldValue);
    }
  });
});

// Configure and start observing
const config = {
  "childList": true,
  "attributes": true,
  "attributeOldValue": true,
  "subtree": true
};

observer.observe(document.body, config);

// Later: stop observing
observer.disconnect();

// Watch for specific attribute changes
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === "data-status") {
      console.log("Status changed to:", mutation.target.dataset.status);
    }
  });
});

observer.observe(element, {
  "attributes": true,
  "attributeFilter": ["data-status", "class"]
});

// Detect when element is added to DOM
function whenElementAdded(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.matches && node.matches(selector)) {
          callback(node);
        }
      });
    });
  });
  
  observer.observe(document.body, {
    "childList": true,
    "subtree": true
  });
  
  return observer;
}

// Usage
const obs = whenElementAdded(".dynamic-content", (element) => {
  console.log("Dynamic content appeared:", element);
  obs.disconnect(); // Stop after first match
});

// React to DOM changes with debouncing
let timeoutId;
const debouncedObserver = new MutationObserver(() => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    console.log("DOM stable after changes");
    updateUI();
  }, 300);
});

debouncedObserver.observe(container, {
  "childList": true,
  "subtree": true
});