Document Object Model

JavaScript's Browser-Based Objects

JavaScript has several browser-based objects. These allow us to interact with the browser and Web page itself. All of the browser-based objects are placed in a hierarchy, beginning with the window object.
These browser-based objects are categorized under two sub-headings: Browser Object Model (BOM) and Document Object Model (DOM). An object model is nothing more than a description of the structure of the objects within a system. It includes their identity and relationship to other objects, attributes and operations.

The Document Object Model ( "the DOM")

The Browser Object Model (BOM)

The Document Object Model is the category most people refer to when speaking of browser-based objects and is a W3C standard. According to the W3C Web site, "The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents." In plain English, the DOM describes the relationship of the HTML elements within the document to the document object itself. By using it when we're writing JavaScript code, we can gain access to all of the HTML elements on the Web page, allowing us to add, change, or delete elements, attributes and content. The DOM is specifically related to the document itself. It's contained inside the Browser Object Model. It does not include the browser and all things related to it, e.g., the window. We'll discuss the DOM in depth in later sessions.

The Browser Object Model ("the BOM")

For some reason, the Browser Object Model is generally not referred to by its proper name. More often, it's usually wrapped up with the DOM. In actuality, the DOM, which relates to all things pertaining to the document, resides within the BOM.
The BOM, as you may have guessed, covers objects which relate to the browser. At the top of the BOM hierarchy is the window object. Below that comes the navigator, screen, history, location, and document objects (in no particular order). The document object is the top level of the DOM hierarchy. In the diagram at the right, each object below the window is of equal status. They all relate directly to the window object.
Let's look at each of these objects separately and see how they work. We'll begin with the window object.