1. Technology

Document Object Model

The Document Object Model provides an way for Javascript to access the current web page in order to modify what the page contains or how the page looks.

Document Object Model
An introduction to the JavaScript DOM (document object model).

Javascript DOM
To understand how Javascript uses the DOM to access the HTML we must first understand how the DOM views the HTML.

Even early browsers supplied Javascript with access to certain parts of the page via collections. Many of these collections can still be used and provide the easiest way to access those parts of the page.

We can easily access any part of a web page simply by adding an id attribute to the HTML tag.

Accessing Properties
The properties of an HTML container that can be accessed as properties include all of the attributes on the tag and any tags enclosed within that container.

Changing Styles
The style attributes attached to an HTML container can also be accessed and changed from Javascript.

One of the most useful properties isn't even part of the standards but all of the major browsers support it.

The Document Object Model now allows us to retrieve a collection based on any tag at all.

Classes identify tags which share common attributes and make a useful intermediate level at which we may want to create collections.

The first of the standard DOM commands we will look at is used to remove things from our page.

createElement and createTextNode
Before we can add to our page we must first create what we want to add.

After creating something we can add it into the end of an existing object.

If you don't want to add to the end of an existing object you can insert in front of an object instead.

Where you want to delete one object from the page and add a different object to the same spot you can do it in one command instead of two.

Adding things piecemeal to the page doesn't give your visitor the best impression. By creating a document fragment first you can add a whole block of content in one go.

Table Methods
For those situations where you really need a table in your HTML the DOM provides its own special set of methods and properties to reduce the amount of code that you need to use to access and manipulate it.

Event Handlers
Now that we know how to reference the parts of the page from Javascript the next step is to look at how we can detect when our visitors interact with those objects.

Attaching Event Handlers
Using what we already know, we can move the event handlers out of the HTML and attach them using the DOM.

DOM Event Processors
The DOM provides its own more flexible way to do event processing.

Event Listeners
The standard DOM way of processing events in a web page is using Event Listeners.

Internet Explorer doesn't yet support the standard DOM event listeners but instead provides its own method of attaching events that is almost as flexible.

Cross Browser Event Processing
Since IE uses its own method while other browsers use the standard method we need a way to combine the two methods together in order to get proper cross browser support.

©2014 About.com. All rights reserved.