JavaScript DOM Manipulation

// Get element by ID
const elem = document.getElementById("myId");

// Query selector
const elem = document.querySelector(".class");
const elems = document.querySelectorAll(".class");

// By class/tag
const elems = document.getElementsByClassName("myClass");

// Create element
const div = document.createElement("div");
div.textContent = "Hello";
div.className = "myClass";

// Append to DOM
document.body.appendChild(div);
parent.insertBefore(newNode, refNode);

// Text content
elem.textContent = "New text";
elem.innerHTML = "Bold";

// Attributes
elem.setAttribute("href", "url");
elem.getAttribute("href");
elem.removeAttribute("href");

// Modify classes
elem.classList.add("active");
elem.classList.remove("hidden");
elem.classList.toggle("visible");
elem.classList.contains("active");

// Inline styles
elem.style.color = "red";
elem.style.display = "none";

// Remove element
elem.remove();
parent.removeChild(elem);

// Clear all children
elem.innerHTML = "";

// Add event listener
elem.addEventListener("click", (e) => {
    console.log("Clicked!");
    e.preventDefault();
});

// Remove listener
elem.removeEventListener("click", handler);

// Parent/children
elem.parentElement
elem.children
elem.firstElementChild
elem.lastElementChild

// Siblings
elem.nextElementSibling
elem.previousElementSibling

// Dimensions
elem.offsetWidth
elem.offsetHeight
elem.clientWidth
elem.scrollHeight

// Position
elem.offsetTop
elem.offsetLeft
elem.getBoundingClientRect()