Module 19: Browser Interactions
The DOM
🏠The everyday picture
A family tree: the grandparents at the top, their children below, grandchildren below them. The browser keeps the page in memory as a tree like this, and JavaScript can visit any member.
📘What it really is
-
When the browser reads your HTML, it builds the DOM (Document Object Model): a tree of objects, one for each element, held in memory.
-
<html>is at the top, with<head>and<body>beneath it, and so on down to every heading, paragraph and button. -
JavaScript changes the page by changing the DOM. The browser redraws the page immediately, without reloading.
-
The Elements tab in developer tools shows the live DOM, which can differ from the original HTML file (View page source) once JavaScript has changed things.
-
documentis the JavaScript name for the whole page; everything starts from it.
🖱️Try it
In the console on your home page, type document.title and press Enter. Then type
document.title = "Changed by me" and look at the browser tab. Open the Elements tab and expand the tree to find
your <h1>.
✅Quick check
JavaScript changes a heading. Does the HTML file on your computer change?
Show the answer
No. Only the DOM in the browser's memory changes; reload and it's back to the file.
Where do you see the page as it is now, including JavaScript's changes?
Show the answer
The Elements tab in developer tools.