In website development, DOM stands for Document Object Model. It is a programming interface that allows us to create, change, or remove elements from a website document. DOM manipulation is when you use JavaScript to add, remove, and modify elements of a website. It is very common in web development.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you the basics of DOM manipulation with JavaScript. CodeLab developed this course.

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.

Below are the sections in this course.

DOM Fundamentals

  • 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

  • General Styles for All Projects
  • Project 1 Mark-Up
  • Project 1 CSS Styling
  • Project 1 JavaScript

Project 2: Beginner Plus

  • 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

Watch the full course below or on the freeCodeCamp.org YouTube channel (3-hour watch).