Skip to main content

Introduction to the DOM

The Document Object Model (DOM) is a programming interface created natively by the browser for your Web Pages. It represents your HTML document as a structured tree of objects so that JavaScript can safely interact with it.

Because of the DOM, JavaScript can dynamically:

  • Add, change, and remove HTML elements.
  • Change CSS styles on the fly.
  • React to user events like clicks, typing, and scrolling.

The DOM Tree Structure​

When the browser loads your HTML code, it parses it into a hierarchical inverted tree representing parents, children, and siblings.

Every single node on this tree is a true JavaScript Object inside the browser, exposing specialized methods that we can call to manipulate them!