🌐 Ultimate Universal JavaScript DOM Cheat Sheet

DOM = Document Object Model → HTML represented as a tree of nodes.

<h1 id="title">Hello World</h1>
<p class="text">Paragraph</p>

Method	Selects	Example
getElementById()	Single element by id	document.getElementById("title")
getElementsByClassName()	All elements with class	document.getElementsByClassName("text")[0]
getElementsByTagName()	All elements by tag	document.getElementsByTagName("p")[0]
querySelector()	First CSS selector match	document.querySelector(".text")
querySelectorAll()	All CSS selector matches	document.querySelectorAll("p")

let title = document.getElementById("title");
console.log(title.innerText);

Run Code Copy Code

let title = document.getElementById("title");
title.innerText = "New Title";
title.innerHTML = "<span>HTML!</span>";

HTML!\";')">Run Code

title.style.color = "red";
title.style.fontSize = "30px";
let link = document.querySelector("a");
link.setAttribute("href", "https://example.com");

Run Code

let para = document.createElement("p");
para.innerText = "I am new!";
document.body.appendChild(para);

Run Code

document.querySelector("p").remove();

Run Code

let btn = document.createElement("button");
btn.innerText = "Click Me";
document.body.appendChild(btn);
btn.addEventListener("click", () => alert("Clicked!"));

alert(\"Clicked!\"));')">Run Code

document.body.addEventListener("click", e => {
  if(e.target.tagName === "BUTTON") alert("Button clicked via delegation!");
});

{ if(e.target.tagName === \"BUTTON\") alert(\"Button clicked via delegation!\"); });')">Run Code

Property	Example
parentNode	el.parentNode
childNodes	el.childNodes
children	el.children
nextSibling	el.nextSibling
previousSibling	el.previousSibling
nextElementSibling	el.nextElementSibling
previousElementSibling	el.previousElementSibling

Animate Box

document.getElementById("animateBtn").addEventListener("click", () => {
  const box = document.getElementById("box");
  let pos = 0;
  const interval = setInterval(() => {
    if(pos >= 200) clearInterval(interval);
    pos++;
    box.style.transform = `translateX(${pos}px)`;
  }, 5);
});

{ if(pos>=200) clearInterval(interval); pos++; box.style.transform=`translateX(${pos}px)`; }, 5);')">Run Animation

Submit

document.getElementById("dynamicForm").addEventListener("submit", e => {
  e.preventDefault();
  const name = e.target.name.value;
  document.getElementById("formResult").innerText = "Hello " + name;
});

{ e.preventDefault(); const name = e.target.name.value; document.getElementById(\"formResult\").innerText = \"Hello \" + name; });')">Run Code

const box = document.getElementById('dragBox');
let offsetX, offsetY;
box.onmousedown = e => {
  offsetX = e.offsetX;
  offsetY = e.offsetY;
  document.onmousemove = e => {
    box.style.left = e.pageX - offsetX + 'px';
    box.style.top = e.pageY - offsetY + 'px';
  }
  document.onmouseup = () => document.onmousemove = null;
};

{ offsetX=e.offsetX; offsetY=e.offsetY; document.onmousemove = e => { box.style.left = e.pageX - offsetX + \"px\"; box.style.top = e.pageY - offsetY + \"px\"; }; document.onmouseup = () => document.onmousemove = null; };')">Run Code

• Item 1
• Item 2
• Item 3

const list = document.getElementById('sortable');
let dragItem;
list.addEventListener('dragstart', e => dragItem = e.target);
list.addEventListener('dragover', e => e.preventDefault());
list.addEventListener('drop', e => {
  if(e.target.tagName === 'LI') {
    list.insertBefore(dragItem, e.target.nextSibling);
  }
});

dragItem=e.target); list.addEventListener(\"dragover\", e=>e.preventDefault()); list.addEventListener(\"drop\", e=>{ if(e.target.tagName===\"LI\"){ list.insertBefore(dragItem,e.target.nextSibling); } });')">Run Code

document.querySelectorAll('.thumb').forEach(img=>{
  img.addEventListener('click', e => {
    document.getElementById('mainImg').src = e.target.src;
  });
});

Run Code

document.querySelectorAll('.tabBtn').forEach(btn=>{
  btn.addEventListener('click', e=>{
    document.querySelectorAll('[id^=tab]').forEach(t=>t.style.display='none');
    document.getElementById(e.target.dataset.tab).style.display='block';
  });
});

Run Code

Open Modal

document.getElementById('openModal').onclick = ()=> document.getElementById('modal').style.display='block';
document.getElementById('closeModal').onclick = ()=> document.getElementById('modal').style.display='none';

Run Code