Document Object Model
Document Object Model
We can easily access any part of a web page simply by adding an id attribute to the HTML tag.
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.
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.
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.
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.
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.