How JavaScript Sees the DOM

When you open a web page in your browser, the browser reads the HTML and builds a structured representation of the page called the Document Object Model (DOM). The DOM is not just plain text—it is a tree of objects, where every HTML element, attribute, and piece of text becomes a node in this tree. JavaScript interacts with the DOM through these objects, letting you read or change any part of the page while it is displayed.

The browser exposes the DOM to JavaScript as a hierarchy of objects. The root of this hierarchy is the document object. This object represents the entire web page and gives you access to all its parts. Each element in your HTML, such as <body>, <h1>, or <p>, becomes a property or method you can access from document. For example, document.body refers to the <body> element, and document.title refers to the text inside the <title> tag.