beginner
7 min read
What is the DOM?
Your HTML file is just text. It sits on disk, perfectly still, until a browser reads it. Yet the page you're looking at right now can change—text updates,…
Read tutorialbeginner
DOM Manipulation Basics
Learn how to use JavaScript to interact with and change web page content.
Tutorials
Articles in DOM Manipulation Basics
Follow these lessons in order, or jump directly to the topic you need.
beginner
10 min read
Selecting DOM Elements
You cannot change an element you cannot reach. Every update, style change, and click response on a web page starts with one act of finding. JavaScript…
Read tutorial
beginner
8 min read
Changing DOM Content
A static page is a finished product. A dynamic page is a conversation: the user clicks, submits, or types, and the page answers. That answer usually means…
Read tutorial
beginner
8 min read
Modifying CSS with JavaScript
You already know how to select an element and change what it says. Now let's make it change what it looks like.
Read tutorial
beginner
8 min read
Creating and Removing Elements
A static HTML page is frozen the moment it loads. Real sites keep changing after that—a to-do item appears, a cart entry disappears, a new message slides…
Read tutorial
beginner
10 min read
Practical DOM Examples
You have learned how to select elements, change their content, update their styles, and create new elements from scratch. Each of those skills makes sense…
Read tutorial
beginner
11 min read
Toggle CSS Classes with JavaScript
You have a button. You have a menu. You want the button to hide the menu, and you want it to show the menu again when clicked a second time. If your first…
Read tutorial
beginner
8 min read
Work with Multiple DOM Elements in JavaScript
You learned to select one button and make it respond to a click. Then your page grew five buttons that all need the same behavior—and your trusty…
Read tutorial
beginner
10 min read
JavaScript DOM Manipulation Practice Exercises
You have read about getElementById, textContent, createElement, and remove(). You understand what they do on paper. But understanding a method and feeling…
Read tutorial
beginner
8 min read
Fix "Cannot Read Properties of null" in JavaScript
If you are new to JavaScript, this message can look like the browser is speaking a different language. It is not. It is telling you something simple: your…
Read tutorial
beginner
8 min read
textContent vs innerHTML in JavaScript
textContent treats your value as plain text. innerHTML treats it as HTML markup. Same string, two different outcomes—and one of them needs extra care when…
Read tutorial
beginner
8 min read
Render an Array as a List in the DOM
You have an array of names sitting in your JavaScript file. You want those names to show up as bullet points on the page. The naive approach is to write…
Read tutorial