Introduction

What is the DOM?

DOM Tree Analogy

Selecting Elements in the DOM

Styling an Element

Creating Elements

Adding Elements

Modify Text

Modifying Elements Attributes & Classes

Remove an Element

DOM Tree Recap

Traversing the DOM

Event Listeners

Event Listener Example

Event Propagation

Event Delegation

Introduction to Projects

Project 1: Beginner

Project 1 Mark-Up

General Styles for All Projects

Project 1 CSS Styling

Project 1 JavaScript

Project 2: Beginner

Project 2 Mark Up

Project 2 CSS styling

Project 2 JavaScript

Project 2 CSS Styling p2

Project 3: Intermediate

Project 3 Mark Up

Project 3 CSS Styling

Project 3 JavaScript

Project 3 CSS Styling p2

Project 4: Pro

Project 4 Mark Up

Project 4 CSS Styling

Project 4 JavaScript

Project 5: Master

Project 5 Mark Up

Project 5 CSS Styling

Project 5 JavaScript

Project 5 CSS Styling p2

Project 5 JavaScript p2

freeCodeCamp.org

Learn about JavaScript DOM manipulation in this beginner's tutorial. This is when you use JavaScript to add, remove, and modify elements of a website. 

In the first part of the course, you will learn about the basic features of a website DOM and the JavaScript commands you can use to manipulate the DOM. In the second part of the course, you will use what you have learned to create practical examples ranging from beginner to advanced. 

✏️ CodeLab created this course. Check out their channel: https://www.youtube.com/c/CodeLab98

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:32) What is the DOM?
⌨️ (0:02:05) DOM Tree Analogy 
⌨️ (0:04:01) Selecting Elements in the DOM
⌨️ (0:11:44) Styling an Element
⌨️ (0:16:33) Creating Elements
⌨️ (0:17:32) Adding Elements 
⌨️ (0:18:33) Modify Text
⌨️ (0:21:15) Modifying Elements Attributes & Classes
⌨️ (0:24:59) Remove an Element
⌨️ (0:25:47) DOM Tree Recap
⌨️ (0:27:58) Traversing the DOM
⌨️ (0:37:48) Event Listeners 
⌨️ (0:44:59) Event Listener Example
⌨️ (0:50:16) Event Propagation
⌨️ (1:00:07) Event Delegation
⌨️ (1:11:13) Introduction to Projects
⌨️ (1:11:52) Project 1: Beginner
⌨️ (1:14:26) Project 1 Mark-Up
⌨️ (1:16:31) General Styles for All Projects
⌨️ (1:17:08) Project 1 CSS Styling
⌨️ (1:24:40) Project 1 JavaScript
⌨️ (1:29:39) Project 2: Beginner + 
⌨️ (1:30:41) Project 2 Mark Up
⌨️ (1:32:33) Project 2 CSS styling
⌨️ (1:41:30) Project 2 JavaScript
⌨️ (1:46:08) Project 2 CSS Styling p2
⌨️ (1:47:53) Project 3: Intermediate 
⌨️ (1:48:39) Project 3 Mark Up
⌨️ (1:49:59) Project 3 CSS Styling
⌨️ (1:55:19) Project 3 JavaScript
⌨️ (1:58:02) Project 3 CSS Styling p2
⌨️ (2:00:45) Project 4: Pro
⌨️ (2:01:26) Project 4 Mark Up
⌨️ (2:02:44) Project 4 CSS Styling
⌨️ (2:06:36) Project 4 JavaScript 
⌨️ (2:20:37) Project 5: Master
⌨️ (2:22:01) Project 5 Mark Up
⌨️ (2:23:15) Project 5 CSS Styling
⌨️ (2:26:39) Project 5 JavaScript
⌨️ (2:33:52) Project 5 CSS Styling p2
⌨️ (2:38:41) Project 5 JavaScript p2

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

JavaScript DOM Manipulation – Full Course for Beginners

JavaScript DOM Manipulation – Full Course for Beginners

JavaScript DOM Manipulation – Full Course for Beginners

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path