DOM Manipulation — Free JavaScript Tutorial

TL;DR: Learn DOM Manipulation in JavaScript with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

DOM Manipulation in JavaScript

The DOM (Document Object Model) is the browser's representation of the HTML page as a tree of objects. JavaScript can read and modify any part of the DOM — changing text, styles, attributes, and structure.

Key methods: getElementById (by ID), querySelector (CSS selector, first match), querySelectorAll (all matches). To change content: innerHTML (HTML), textContent (plain text), value (inputs).

To change styles: element.style.property = "value". To add/remove CSS classes: classList.add(), classList.remove(), classList.toggle(). classList is preferred over direct style manipulation for maintainability.

const el = document.getElementById("id");
const el = document.querySelector(".class");
el.textContent = "New text";
el.innerHTML = "<b>Bold</b>";
el.style.color = "red";
el.classList.toggle("active");

Learn DOM Manipulation step by step with Syllab's free interactive JavaScript tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full JavaScript course →