Javascript is largely based around the Document Object Model (DOM) of a webpage. The Document Object Model is a way of representing HTML documents for querying and manipulating documents. Access to the DOM makes Javascript a unique language, as it allows you access to the webpage as it’s fully rendered in the browser, something no other language allows us.

So, using the Document Object Model, we are able to read information in our HTML and then modify and add information to our HTML – all dynamically. The Document Object Model is basically a nested model of HTML/CSS tags and attributes of the document. This is sometimes referred to as the DOM tree.

There are three top-level branches in the DOM, window, location and document. Most of what we want will be under document. From this top branch, we can branch our further to various places. One way we could go is to get an element in our HTML. But, for right now, let’s look at modifying the document directly.

The Document Object Model can get quite advanced, really quickly. We’re going to just start with adding some text to the body via Javascript.

[code='javascript']document.write('

This text has been written to the document using Javascript.

');[/code]

Using the DOM is it also possible to access styling attributes, normally done using CSS. For example, if we wanted to change the background colour the of the document, we could do this:

[code='javascript']document.bgColor = '#0099CC';[/code]

The syntax of Javascript can sometimes be inconsistent (as you can see with the two examples above), however it does have some consistency to it. Each of the above examples are statements, which have to end with a semi-colon. When referencing the DOM, branches are separated by periods. Like with HTML and CSS, you need to use US English in Javascript.

Next week we’re going to further our discussion of the Document Object Model by talking about elements.