JavaScript DOM Reference

document.getElementById("myId"); # single element by ID
document.querySelector(".class"); # first match
document.querySelectorAll(".class"); # all matches
document.getElementsByClassName("class"); # live collection
document.getElementsByTagName("div"); # by tag name

element.textContent = "New text"; # change text
element.innerHTML = "HTML"; # change HTML
element.setAttribute("class", "active"); # set attribute
element.getAttribute("class"); # get attribute
element.removeAttribute("class"); # remove attribute

element.style.color = "red"; # inline style
element.style.backgroundColor = "blue"; # camelCase property
element.classList.add("active"); # add class
element.classList.remove("active"); # remove class
element.classList.toggle("active"); # toggle class
element.classList.contains("active"); # check class

const div = document.createElement("div"); # create element
parent.appendChild(div); # add to end
parent.insertBefore(new, ref); # insert before
parent.removeChild(child); # remove child
element.remove(); # remove self
element.replaceWith(newElement); # replace element

element.addEventListener("click", function); # add listener
element.removeEventListener("click", function); # remove listener

# Event object
element.addEventListener("click", (e) => {
  e.preventDefault(); # prevent default
  e.stopPropagation(); # stop bubbling
});