DOM Manipulation Cheat Sheet

Selecting Elements

// Select an element by ID
let element = document.getElementById("myId");

// Select elements by class name
let elements = document.getElementsByClassName("myClass");

// Select elements by tag name
let elements = document.getElementsByTagName("div");

// Select the first matching element
let element = document.querySelector(".myClass");

// Select all matching elements
let elements = document.querySelectorAll(".myClass");

// Select the element with the specified attribute
let element = document.querySelector("[name='myName']");

Traversing the DOM

// Parent node
let parent = element.parentNode;

// Child nodes
let children = element.childNodes;
let firstChild = element.firstChild;
let lastChild = element.lastChild;

// Sibling nodes
let previousSibling = element.previousSibling;
let nextSibling = element.nextSibling;

Creating Elements

// Create a new element
let newElement = document.createElement("div");

// Create a new text node
let textNode = document.createTextNode("Hello, World!");

// Append the text node to the element
newElement.appendChild(textNode);

// Append the element to the DOM
document.body.appendChild(newElement);

Inserting Elements

// Insert before another element
let referenceElement = document.getElementById("reference");
document.body.insertBefore(newElement, referenceElement);

// Insert after another element
referenceElement.parentNode.insertBefore(
	newElement,
	referenceElement.nextSibling
);

Removing Elements

// Remove an element from the DOM
let element = document.getElementById("myId");
element.parentNode.removeChild(element);

Replacing Elements

// Replace an existing element
let oldElement = document.getElementById("oldElement");
let newElement = document.createElement("div");
oldElement.parentNode.replaceChild(newElement, oldElement);

Modifying Attributes

// Get an attribute value
let value = element.getAttribute("id");

// Set an attribute value
element.setAttribute("id", "newId");

// Remove an attribute
element.removeAttribute("id");

// Check if an element has an attribute
let hasId = element.hasAttribute("id");

Modifying Classes

// Add a class
element.classList.add("newClass");

// Remove a class
element.classList.remove("oldClass");

// Toggle a class
element.classList.toggle("toggleClass");

// Check if an element has a class
let hasClass = element.classList.contains("someClass");

Modifying Styles

// Set an inline style
element.style.color = "red";

// Set multiple inline styles
Object.assign(element.style, {
	backgroundColor: "yellow",
	fontSize: "20px",
});

Modifying Content

// Set inner HTML
element.innerHTML = "<p>Hello, World!</p>";

// Get inner HTML
let htmlContent = element.innerHTML;

// Set text content
element.textContent = "Hello, World!";

// Get text content
let textContent = element.textContent;

Event Listeners

// Add an event listener
element.addEventListener("click", function (event) {
	console.log("Element clicked!");
});

// Remove an event listener
function handleClick(event) {
	console.log("Element clicked!");
}
element.addEventListener("click", handleClick);
element.removeEventListener("click", handleClick);

Event Delegation

// Event delegation using a parent element
document.body.addEventListener("click", function (event) {
	if (event.target && event.target.matches(".myClass")) {
		console.log("Element with class 'myClass' clicked!");
	}
});

Form Elements

// Get input value
let inputValue = document.querySelector("input[name='myInput']").value;

// Set input value
document.querySelector("input[name='myInput']").value = "New value";

// Get selected option value
let selectElement = document.querySelector("select[name='mySelect']");
let selectedValue = selectElement.options[selectElement.selectedIndex].value;

// Set selected option value
selectElement.value = "newValue";

// Get checked status of a checkbox
let isChecked = document.querySelector("input[name='myCheckbox']").checked;

// Set checked status of a checkbox
document.querySelector("input[name='myCheckbox']").checked = true;

Form Submission

// Prevent form submission
document.querySelector("form").addEventListener("submit", function (event) {
	event.preventDefault();
	console.log("Form submission prevented!");
});

Working with Iframes

// Access an iframe document
let iframe = document.querySelector("iframe");
let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

// Modify the content of an iframe
iframeDocument.body.innerHTML = "<p>Hello, iframe!</p>";

Miscellaneous

// Get the current URL
let currentUrl = window.location.href;

// Redirect to a new URL
window.location.href = "https://example.com";

// Reload the current page
window.location.reload();

// Get the viewport dimensions
let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;

// Scroll to a specific position
window.scrollTo(0, 100); // Scrolls to 100px from the top