Learn Javascript
Document Object Model
Join the Discussion
More of this Tutorial
Internet Explorer DOM Netscape 4 DOM Standard DOM Cross Browser DOM Quiz Yourself
Introduction
Javascript is mostly used to provide a means for your visitors to interact with your web page. In order to be able to do this we need to have some means by which our Javascript program can access the component parts of the web page. The means that we use is calledc the Document Object Model. Basically what this provides is a collection of predefined objects that correspond to the component parts of the browser window and the web page being displayed that the Javascript program can reference in order to interact with the browser window and the page displayed within it.
What is the DOM?
The document object model provides a mapping for some or all of the various component parts of the browser/web page into objects that your Javascript program can access. Many of the simplest objects are mapped the same way in all browsers that support Javascript however the earlier browsers only supported accessing a small selection of the component parts of the web page and the access to the rest of the web page has been only partially implemented in some browsers and has also been implemented in different ways in different browsers.
Let's start by looking at some of these simpler objects defined by the Document Object Model. We actually introduced one such obect right back in the first tutorial. The document object refers to the current web page. Right from the very beginning we have been using the write() method with this object to output from our Javascript program into the web page.
Actually the objects within the Document Object Model form a heirarchy wit the browser window being the top level so strictly speaking the current page should be referred to as window.document but in most cases we can leave off the window reference and the current window will be assumed.
The objects within the window that are accessible in most cases are document which is the current web page, location which is the address of the current web page (its URL), and history which is a record of the pages previously visited. There are a number of other objects that we can reference but these vary between the different Document Object Models. We will discuss how to get around this problem of different browsers using different DOMs in the next few tutorials.
Another object that is separate from the window object in some browsers but is considered to be within it in other browsers is the navigator object. Since we can leave the window reference off of the front anyway, we can access this object the same way in different browsers. In fact what this object refers to is the browser itself and the properties that we can access within this object include appName which tells us which browser the browser claims to be, appVersion which tells us which version of that browser it is claiming to be, and userAgent which contains more detailed information about the browser and which operating system the browser thinks is running.
Why did I say "that the browser claims to be" rather than "that the browser is"? Well some browsers allow the person using the browser to change these values so that the browser reports itself as a completely different browser than it actually is. This is what is known as browser spoofing.
Using What You Know
At this stage you should be able to write a script for yourself using navigator.appName and navigator.appVersion to display information on a web page as to which web browser and version that the browser itself claims to be.
document.write('Version: ' + navigator.appVersion);
You may like to compare the simplicity of the necessary code to do that with the more complex code that I provide on the Browser Detection page where the navigator.userAgent field is examined to determine which browser that field identifies is running. In a small number of browsers it is possible to change even the userAgent field to spoof a different browser but testing that field although more complex gives a better chance of identifying the browser correctly.
