DOM Cheatsheet for Beginners

1. What is the DOM?

The DOM is a programming interface for web documents. It represents the structure of the HTML document as a tree, where elements are nodes. With JavaScript, you can manipulate the DOM to change content, styles, and structure dynamically.

2. Commonly Used DOM Methods

Selecting Elements

Method	Description	Example
`document.getElementById()`	Selects an element by its `id`.	`document.getElementById("myElement")`
`document.querySelector()`	Selects the first element matching a CSS selector.	`document.querySelector(".myClass")`
`document.querySelectorAll()`	Selects all elements matching a CSS selector.	`document.querySelectorAll("div")`
`document.getElementsByClassName()`	Selects all elements with a specific class name.	`document.getElementsByClassName("class")`
`document.getElementsByTagName()`	Selects all elements with a specific tag name.	`document.getElementsByTagName("p")`

Manipulating Elements

Method	Description	Example
`.innerHTML`	Get or set the HTML content of an element.	`element.innerHTML = "Hello, World!"`
`.textContent`	Get or set the text content of an element.	`element.textContent = "Just Text"`
`.style`	Modify inline styles of an element.	`element.style.color = "red"`
`.classList.add()`	Add a CSS class to an element.	`element.classList.add("active")`
`.classList.remove()`	Remove a CSS class from an element.	`element.classList.remove("hidden")`
`.classList.toggle()`	Toggle a CSS class on an element.	`element.classList.toggle("dark-mode")`
`.setAttribute()`	Set an attribute on an element.	`element.setAttribute("src", "image.jpg")`
`.getAttribute()`	Get the value of an attribute on an element.	`element.getAttribute("id")`
`.removeAttribute()`	Remove an attribute from an element.	`element.removeAttribute("disabled")`

Creating and Removing Elements

Method	Description	Example
`document.createElement()`	Creates a new element.	`const div = document.createElement("div")`
`.appendChild()`	Appends a child element to a parent.	`parent.appendChild(child)`
`.removeChild()`	Removes a child element from a parent.	`parent.removeChild(child)`
`.replaceChild()`	Replaces a child element with another.	`parent.replaceChild(newChild, oldChild)`
`.insertBefore()`	Inserts an element before another.	`parent.insertBefore(newChild, refChild)`

3. DOM Events

Common Event Types

Event	Description
`click`	Fires when an element is clicked.
`mouseover`	Fires when the mouse hovers over an element.
`keydown`	Fires when a key is pressed.
`submit`	Fires when a form is submitted.
`change`	Fires when an input value changes.
`input`	Fires when a user types in an input field.
`load`	Fires when the page or an image loads.

Adding Event Listeners

Syntax	Example
`element.addEventListener()`	`button.addEventListener("click", () => alert("Clicked!"))`
`element.removeEventListener()`	Removes an event listener.

4. Practical Use Cases

Dynamic Content

const button = document.querySelector("button");
const div = document.querySelector("#content");

button.addEventListener("click", () => {
  div.textContent = "Button clicked!";
});

Toggling Dark Mode

const toggle = document.querySelector("#toggle");
document.body.classList.toggle("dark-mode");

Creating a New List Item

const list = document.querySelector("#list");
const newItem = document.createElement("li");
newItem.textContent = "New Item";
list.appendChild(newItem);

Form Validation

const form = document.querySelector("#form");
form.addEventListener("submit", (event) => {
  event.preventDefault(); // Prevents the form from submitting
  const input = document.querySelector("#name");
  if (input.value === "") {
    alert("Name is required!");
  }
});

DEV Community