Document Object Model

From page code to what you see

When your browser opens a page, it reads the HTML and builds the Document Object Model (DOM). This live outline records the page’s headings, text, buttons, and which parts sit inside others. The browser uses it, together with CSS, to draw the page on your screen.

Changes you can see

Suppose a shopping basket shows “2 items”. When you add another item, JavaScript can change that count in the DOM to “3 items”. The browser then shows “3 items” on screen without reloading the page. The original HTML may stay the same while the DOM and the visible page change.