Skip to content

DOM Manipulation

This lesson explains DOM Manipulation in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript DOM Manipulation Overview

JavaScript DOM manipulation is the process of selecting, reading, updating, creating, removing, and styling HTML elements dynamically. It allows developers to build interactive web pages that respond to user actions without reloading the page.

DOM manipulation is used in form validation, menus, modals, tabs, accordions, dashboards, shopping carts, search filters, notifications, animations, and real-time UI updates. It is one of the most important frontend JavaScript skills for building modern web applications.

DOM Task Description Common Methods
Select Elements Find HTML elements on the page. querySelector, getElementById
Update Content Change text or HTML content. textContent, innerHTML
Update Styles Change CSS styles dynamically. style, classList
Create Elements Add new HTML elements. createElement, appendChild
Remove Elements Delete elements from the page. remove, removeChild
Handle Attributes Read or update HTML attributes. getAttribute, setAttribute

JavaScript DOM Manipulation Example

const title = document.querySelector("#title");

const button = document.querySelector("#changeButton");

button.addEventListener("click", function() {
  title.textContent = "DOM Manipulation Updated";
  title.classList.add("active");
});

const list = document.querySelector("#list");

const item = document.createElement("li");

item.textContent = "New Item";

list.appendChild(item);

This example selects elements, changes text content, adds a CSS class, creates a new list item, and appends it to an existing list.

Top 10 JavaScript DOM Manipulation Examples

The following examples show the most common DOM manipulation operations used in real-world frontend development and JavaScript interviews.

# Example Syntax
1 Change Text Content title.textContent = "New Title";
2 Change HTML Content box.innerHTML = "<strong>Hello</strong>";
3 Change Style title.style.color = "blue";
4 Add CSS Class box.classList.add("active");
5 Remove CSS Class box.classList.remove("active");
6 Toggle CSS Class box.classList.toggle("open");
7 Create Element const div = document.createElement("div");
8 Append Element container.appendChild(div);
9 Remove Element item.remove();
10 Set Attribute image.setAttribute("alt", "Product image");

Best Practices

  • Use textContent for plain text updates.
  • Use innerHTML carefully and never with untrusted user input.
  • Prefer classList for CSS changes instead of inline styles.
  • Cache selected DOM elements in variables when reused.
  • Check whether an element exists before manipulating it.
  • Use event listeners instead of inline event attributes.
  • Avoid unnecessary DOM updates inside large loops.
  • Use document fragments for adding many elements efficiently.

Common Mistakes

  • Using innerHTML with unsafe user input.
  • Trying to manipulate elements before they exist in the DOM.
  • Forgetting to check for null after selecting an element.
  • Changing too many inline styles instead of using CSS classes.
  • Creating duplicate elements accidentally.
  • Adding repeated event listeners inside loops.
  • Updating the DOM too frequently, causing performance issues.

Key Takeaways

  • DOM manipulation allows JavaScript to update web pages dynamically.
  • Common operations include changing content, styles, classes, attributes, and elements.
  • textContent is safer than innerHTML for plain text.
  • classList is preferred for adding, removing, and toggling CSS classes.
  • createElement() and appendChild() create dynamic content.
  • Efficient DOM manipulation improves performance and user experience.

Pro Tip

For safer and cleaner DOM updates, use textContent for text, classList for styles, and createElement() for dynamic elements. Avoid using innerHTML with user-provided content.

You now understand JavaScript DOM manipulation, including changing content, updating styles, adding classes, creating elements, removing elements, and updating attributes. Continue to the next lesson to learn JavaScript DOM Events and how to respond to user interactions.