60-270: Document Object Model

In Javascript, everything is an object. Arrays, strings, numbers, HTML tags, popup windows, the HTML file being loaded, and even the web browser itself are all considered to fall under this title. Every object holds information, and have what are called properties and methods. A property is just a variable that is attached to an object and holds information related to it, and a method is just a function which is also attached to an object and does something either to the object, or related to it. The easy way to tell the difference between properties and methods is that methods always end in brackets (even if they're empty!), but properties have no brackets. In the picture to the right, "Blob" is an imaginary object - it has methods on it (all in black, and with brackets) and properties as well.

Every object in Javascript has it's own collection of properties and methods, which do things related to what the object is. The Math object for example, holds properties which contain mathematical constants, and it's methods are all mathematical functions. A String object on the other hand holds properties which give you information about whatever string has been placed inside of it, and it's methods are all for doing things to that string. Similarly, the object which represents an <input ... /> tag would also have properties and methods on it which would represent the contents of that tag.

2: How do you use Objects?

Before now, we've been accessing many objects without really thinking about it as that. For example, the window.alert and window.prompt functions we've been using are both actually methods on the window object. The Window object also contains properties such as window.status, which you can use to set the text in the status bar at the bottom of the browser window. The window object in javascript represents the actual web browser, and everything about it. On the other hand, the document object, which we've been using for document.write and document.writeln represents the HTML file which is currently being displayed. (This is why document.write inserts text into the page as though it was part of the HTML file - it is a method for doing things to that file.) An example of a property on the document object would be the document.title object, which can be used to change the title of your web page.

In every case, the first task we have is to first give the name of the object itself, then decide what method or property we need to use. Thus, if we need to find the length of a string object named sample, we would type in sample.length - the important thing here is the . which is placed between sample and length. It indicates that the name before it is to be treated as the name of an object, and the name after is either a method or property of that object. (Brackets or no brackets will make the decision of which.) The result that comes back from that will be treated exactly the same way that the result coming back from an ordinary function or being read from an ordinary variable would be treated.

Objects themselves are, like everything else in Javascript, allowed to be placed into any variable. Since properties on objects are also variables, that means that some properties on objects also contain other objects, which can in turn have properties, which can also have objects in them. One notable example of an object which is always contained in a property on another object would be the style object, which is in a property from every object which represents an HTML tag visible on the page. The style object has one property for each and every CSS property, with it's value set to whatever is currently applied to that object. For example, pretend we've got an object in a variable named Blob, which represents a paragraph tag - if we want to change the colour of the text displayed in it, we can simply run a command like Blob.style.color="#FF0000"; as in the following example:

<p id="bla"> Wee-hoo! </p> <script type="text/javascript"> var Blob = document.getElementById("bla"); </script> <form action="#" method="get" onsubmit="return false"> <input type="button" name="b" value="red" onclick="Blob.style.color = '#FF0000'" /> <input type="button" name="b" value="blue" onclick="Blob.style.color = '#0000FF'" /> </form>

3: Objects are different in different browsers

Sadly, Firefox, Safari, Chrome, and Microsoft's Internet Explorer do not agree perfectly on what properties and methods belong on which object, so most programs that rely heavily on these objects will have to either severely limit which parts they use, or write multiple versions of the script, one for each type of browser. As a programmer-friendly solution to the problem of figuring out which browser your program is running in, Netscape and Microsoft came up with a Document Object Model property called navigator.appName, which is supposed to tell the program which browser it is running in. The bad news is that other than Internet Explorer, every single one of the modern browsers, including the mobile browsers on Android and Apple's iOS, report themselves to be "Netscape". Below is an example of this code being run on whichever browser is currently being used to view this page:

var whichone = navigator.appName; document.writeln("You are using " + whichone);

This, naturally, leads to a problem - even though Internet Explorer is typically the odd browser out in terms of Javascript compatibility, accurate information regarding which browser is being used is still sometimes needed beyond "Internet Explorer" versus "Not Internet Explorer". For that reason, there is another property which once again, is rarely set properly, or in an easily used manner by the browser, navigator.appVersion, which is supposed to report the current browser version number, followed by a few details regarding the browser and operating system. If set properly, this would enable programs to at least check the browser version with parseFloat(navigator.appVersion), unfortunately once again, it is not set quite properly. Here's an example of this code being run in the browser currently viewing this page:

var whichone = navigator.appVersion; document.writeln("You are using " + whichone);

More information is available, and in some cases it's even useful information, though recent builds of Firefox are spectacularly unhelpful. In most cases, you will only have a few things that need to change between browsers, and most of the modern browsers support a very similar set of features, so most of your code should work properly in any browser if it is coded properly. This is one of the biggest reasons why it is very important to test your page on every browser you think your customers or audience will be using to look at your page, to smooth out difficulties between browsers. Meanwhile, since Internet Explorer is generally the only browser that actually requires different code even for simple tasks, a slightly simpler test can be used:

Here, we're testing for the existence of a property called document.all, which only exists in Internet Explorer, or Opera when it is emulating Internet Explorer. By using this quick test, we can identify when we need to provide different code, and can use the if statement to deliver only the code that will work in the browser we are making use of.

NOTE: It is very important that you always test your code in multiple browsers! Otherwise you may try to refer to something which does not work properly from one browser to another without knowing it.

Document Object Model

1: What is an object?

2: How do you use Objects?

3: Objects are different in different browsers