JavaScript DOM Manipulation Methods Cheat Sheet

DOM (Document Object Model) manipulation is essential for web development, allowing you to dynamically change the content and structure of web pages. This cheat sheet covers various methods for interacting with the DOM.

Selecting Elements

`getElementById()`

Selects an element by its ID.

let element = document.getElementById("myId");
console.log(element); // <div id="myId"></div>

`getElementsByClassName()`

Selects elements by their class name.

let elements = document.getElementsByClassName("myClass");
console.log(elements); // HTMLCollection of elements with class "myClass"

`getElementsByTagName()`

Selects elements by their tag name.

let elements = document.getElementsByTagName("div");
console.log(elements); // HTMLCollection of <div> elements

`querySelector()`

Selects the first element that matches a CSS selector.

let element = document.querySelector(".myClass");
console.log(element); // First element with class "myClass"

`querySelectorAll()`

Selects all elements that match a CSS selector.

let elements = document.querySelectorAll(".myClass");
console.log(elements); // NodeList of elements with class "myClass"

Creating Elements

`createElement()`

Creates a new element.

let newElement = document.createElement("div");
console.log(newElement); // <div></div>

Modifying Elements

`innerHTML`

Sets or gets the HTML content of an element.

element.innerHTML = "<p>New Content</p>";
console.log(element.innerHTML); // "<p>New Content</p>"

`textContent`

Sets or gets the text content of an element.

element.textContent = "New Text";
console.log(element.textContent); // "New Text"

`setAttribute()`

Sets the value of an attribute on an element.

element.setAttribute("class", "newClass");
console.log(element.getAttribute("class")); // "newClass"

`getAttribute()`

Gets the value of an attribute on an element.

let attrValue = element.getAttribute("class");
console.log(attrValue); // "newClass"

`removeAttribute()`

Removes an attribute from an element.

element.removeAttribute("class");
console.log(element.hasAttribute("class")); // false

`classList.add()`

Adds one or more class names to an element.

element.classList.add("newClass");
console.log(element.className); // "newClass"

`classList.remove()`

Removes one or more class names from an element.

element.classList.remove("newClass");
console.log(element.className); // ""

`classList.toggle()`

Toggles a class name on an element.

element.classList.toggle("active");
console.log(element.classList.contains("active")); // true or false

`style`

Sets or gets the inline style of an element.

element.style.color = "blue";
console.log(element.style.color); // "blue"

Adding and Removing Elements

`appendChild()`

Appends a new child element to a parent element.

let parent = document.getElementById("parent");
let child = document.createElement("div");
parent.appendChild(child);
console.log(parent.innerHTML); // <div></div>

`insertBefore()`

Inserts a new element before an existing child element.

let newElement = document.createElement("div");
let existingElement = document.getElementById("existing");
parent.insertBefore(newElement, existingElement);

`removeChild()`

Removes a child element from a parent element.

parent.removeChild(child);
console.log(parent.innerHTML); // ""

`replaceChild()`

Replaces a child element with a new element.

let newElement = document.createElement("div");
let oldElement = document.getElementById("old");
parent.replaceChild(newElement, oldElement);

Event Handling

`addEventListener()`

Attaches an event handler to an element.

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

`removeEventListener()`

Removes an event handler from an element.

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

Traversing the DOM

`parentNode`

Gets the parent node of an element.

console.log(child.parentNode); // parent element

`childNodes`

Gets the child nodes of an element.

console.log(parent.childNodes); // NodeList of child nodes

`firstChild`

Gets the first child of an element.

console.log(parent.firstChild); // first child node

`lastChild`

Gets the last child of an element.

console.log(parent.lastChild); // last child node

`nextSibling`

Gets the next sibling of an element.

console.log(element.nextSibling); // next sibling node

`previousSibling`

Gets the previous sibling of an element.

console.log(element.previousSibling); // previous sibling node

`firstElementChild`

Gets the first child element of a parent element.

console.log(parent.firstElementChild); // first child element

`lastElementChild`

Gets the last child element of a parent element.

console.log(parent.lastElementChild); // last child element

`nextElementSibling`

Gets the next sibling element of an element.

console.log(element.nextElementSibling); // next sibling element

`previousElementSibling`

Gets the previous sibling element of an element.

console.log(element.previousElementSibling); // previous sibling element

Manipulating Forms

`value`

Gets or sets the value of a form element.

let input = document.getElementById("myInput");
input.value = "New Value";
console.log(input.value); // "New Value"

`submit()`

Submits a form programmatically.

let form = document.getElementById("myForm");
form.submit();

`reset()`

Resets a form.

form.reset();

This comprehensive overview covers the most commonly used DOM manipulation methods in JavaScript, providing a quick reference for web developers.