Understanding the DOM

When a web page loads, the browser doesn’t just display text and images. It also builds a live structure behind the scenes that JavaScript can interact with. This structure is called the DOM, which stands for Document Object Model.

Think of the DOM as a family tree of your HTML elements:

• The document is like the root (the parent of everything).

• Inside it, there might be a body, which has children like <div>, <p>, or <button>.

• Each element can also have its own children, just like nested boxes inside other boxes.