DOM Mastery - Blackbox Learning Docs

What is DOM?

DOM = Document Object Model

When the browser loads an HTML page, it converts the HTML into a tree-like structure called the DOM.

HTML

<body>
    <h1>Hello</h1>
    <p>Welcome</p>
</body>

DOM Tree

Document
│
└── html
    │
    ├── head
    │
    └── body
         │
         ├── h1
         │    └── "Hello"
         │
         └── p
              └── "Welcome"

JavaScript can access and modify any node in this tree.

Without DOM, JavaScript cannot:

Change text
Change images
Open menus
Create cards
Build sliders
Build modals
Build shopping carts

Almost every frontend website uses DOM.

In this section

Selecting Elements