AI Workshop: learn to build apps with AI →
The DOM: Types of nodes

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

There are different types of nodes, some of which you have already seen in the example images above. The main ones you will encounter are:

  • Document: the document Node, the start of the tree
  • Element: an HTML tag
  • Attr: an attribute of a tag
  • Text: the text content of an Element node
  • Comment: an HTML comment
  • DocumentType: the Doctype declaration

Lessons in this unit:

0: Introduction
1: The `window` object
2: The `document` object
3: ▶︎ Types of nodes
4: Traversing the DOM
5: Editing the DOM
6: Selectors API
7: DOM Ready
8: Add a class to an element
9: Remove a class from an element
10: Check if element has a class
11: Change a DOM node value
12: Loop through DOM elements
13: Add an image to the DOM
14: Create a DOM attribute
15: Remove children elements
16: Replace a DOM element
17: insertAdjacentHTML
18: Add click events to a list