const element = document.getElementById("myId");

const elements = document.getElementsByClassName("myClass");

const elements = document.getElementsByTagName("div");

const element = document.querySelector(".myClass");     // First match
const elements = document.querySelectorAll("div.box");  // All matches (NodeList)

element.textContent = "New text";

element.innerHTML = "<strong>Bold text</strong>";

const inputValue = inputElement.value;
inputElement.value = "New value";

element.style.color = "blue";
element.style.backgroundColor = "#f0f0f0";

element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("dark-mode");
element.classList.contains("highlight"); // returns true/false

element.getAttribute("href");
element.setAttribute("src", "image.png");
element.removeAttribute("alt");

const newDiv = document.createElement("div");
newDiv.textContent = "Hello World!";

parent.appendChild(newDiv);
parent.prepend(newDiv);

parent.insertBefore(newElement, referenceElement);

element.remove();

element.parentNode.removeChild(element);

element.parentNode;
element.children;
element.firstElementChild;
element.lastElementChild;
element.nextElementSibling;
element.previousElementSibling;

element.addEventListener("click", () => {
  console.log("Element clicked!");
});

function handleClick() {
  console.log("Clicked!");
}
element.removeEventListener("click", handleClick);

document.addEventListener("DOMContentLoaded", () => {
  // safe to manipulate DOM here
});