DOM Introduction
A Document Object Model (DOM) is a conceptual way of visualizing a document and its contents.
Each time your browser is asked to load and display a page, it needs to interpret (we usually use the word “parse”) the source code contained in the HTML file comprising the page. As part of this parsing process, the browser creates a type of internal model known as a DOM representation based on the content of the loaded document. It is this model that the browser then refers to when rendering the visible page. You can use JavaScript to access and edit the various parts of the DOM representation, at the same time changing the way the user sees and interacts with the page in view.
In the early days, JavaScript provided rather primitive access to certain parts of a web page. JavaScript programs could gain access, for example, to the images and forms contained in a web page; a JavaScript program could contain statements to select “the second form on the page” or “the form called ‘registration’.”
Web developers sometimes refer to this as DOM Level 0, in backward-compatible homage to the W3C’s subsequent Level 1 DOM definition. As well as DOM Level 0, you might also see reference to the BOM, or Browser Object Model. Since then, the W3C has gradually extended and improved the DOM specification. The W3C’s much more ambitious definition has produced a DOM that is valid not just for web pages and JavaScript, but for any programming language and for XML, in addition to HTML, documents.
The W3C and Standards Compliance
The browser vendors have incorporated much-improved support for DOM in their most recent versions. At the time of writing, Internet Explorer is shipping in version 11, Netscape Navigator has been reborn as Mozilla Firefox (currently in version 35.0), and other competitors in the market include Opera, Konqueror, Apple’s Safari, and Google’s Chrome and Chromium. All of these offer excellent support for the DOM.
The situation has improved markedly for web developers. Apart from a few irritating quirks, we can now largely forget about writing special code for individual browsers provided that we follow the DOM standards.
The window and document Objects
Each time your browser loads and displays a page, it creates in memory an internal representation of the page and all its elements, the DOM. In the DOM, elements of your web page have a logical, hierarchical structure, like a tree of interconnected parent and child objects. These objects, and their interconnections, form a conceptual model of the web page and the browser that contains and displays it. Each object also has a list of properties that describe it, and a number of methods we can use to manipulate those properties using JavaScript.
Right at the top of the hierarchical tree is the browser window object. This object is a parent or ancestor to everything else in the DOM representation of your page.
Object Notation
The notation we use to represent objects within the tree uses the dot or period:
parent.child
As an example, referring to snap, the location object is a child of the window object, so in the DOM it is referred to like this:
window.location
The <body> section of your HTML page is represented in the DOM as a child element of the document object; we would access it like this:
window.document.body
The last item in the sequence can also be, instead of another object, a property or method of the parent object:
object1.object2.property
object1.object2.method
For example, let’s suppose that we want to access the title property of the current document, as specified by the HTML <title>...</title> tags. We can simply use
window.document.title