DOM Manipulation

JavaScript Fundamentals

DOM Manipulation

Beginner Lesson 7 of 10

DOM Manipulation

The DOM (Document Object Model) allows JavaScript to interact with HTML elements.

Selecting Elements

// By ID
const element = document.getElementById("myId");

// By class
const elements = document.getElementsByClassName("myClass");

// By tag
const divs = document.getElementsByTagName("div");

// CSS selectors (recommended)
const one = document.querySelector(".myClass");
const all = document.querySelectorAll(".myClass");

Modifying Elements

Content

const el = document.querySelector("#myDiv");

el.textContent = "Plain text";
el.innerHTML = "<strong>HTML content</strong>";

Attributes

el.setAttribute("data-id", "123");
el.getAttribute("data-id");
el.removeAttribute("data-id");

// Direct property access
el.id = "newId";
el.className = "newClass";

Styles

el.style.color = "red";
el.style.backgroundColor = "blue";
el.style.display = "none";

// Multiple styles
Object.assign(el.style, {
  color: "red",
  fontSize: "16px"
});

Classes

el.classList.add("active");
el.classList.remove("active");
el.classList.toggle("active");
el.classList.contains("active");

Creating Elements

const div = document.createElement("div");
div.textContent = "Hello";
div.className = "greeting";

document.body.appendChild(div);

// Insert at specific position
parent.insertBefore(newElement, referenceElement);

// Remove element
element.remove();

Traversing the DOM

const el = document.querySelector("#myDiv");

el.parentElement;          // Parent
el.children;               // Child elements
el.firstElementChild;      // First child
el.lastElementChild;       // Last child
el.nextElementSibling;     // Next sibling
el.previousElementSibling; // Previous sibling

Next Steps

Continue to Events →