DES 3006 - Web Design II
Week Ten | Part One: Back to the DOM, kids.
Introduction
The Document Object Model, is an application programming interface (API) for valid HTML and XML documents.
The DOM defines the structure of documents and how parts of that document can be accessed and manipulated. With it Web developers can build Web pages, navigate their structure, and add, change, or remove elements and content.
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.
A Brief History of the DOM
The DOM was developed as a specification (a set of rules) to allow JavaScript and Java programs to be portable among different Web browsers. It was designed to be used with any programming language. Next week, we will learn to use JavaScript to explore how it works.
When JavaScript was first introduced in browsers, some kind of interface was needed to allow page elements (images, form elements, hypertext links) to be accessed by scripting. As vendors released newer versions of their browsers, they expanded on this basic model. This led to compatibility problems as each vendor tried to out do what their rivals could do with a Web browser.
Fortunately, the World Wide Web Consortium undertook a thorough investigation of the DOM. The standards they created became adopted by software designers and allowed for better cross-browser compatibility for Web developers.
How DOM Works
By this point, you've come to realize that all Web pages follow a particular structure.
Every valid Web page begins with a declaration that it is an HTML page and which Document Type Definition it will follow. More information follows in the <head> tag which includes the page title, META data, and information about cascading style sheets. Then comes the <body> tag --- this is the actual content that your readers will see.
You remember this graphic from Week 3:
The Document Object Model.
In the Document Object Model, pages (documents) have a logical structure like the branches of a tree. Each Web page contains:
- Zero or one doctype node; and,
- One document element node; and,
- Zero or more comments or processing instructions
Like the branches of a tree, each part of the document is related to the other parts. In an object-oriented programming language (Java is one of these) the data which is embedded in each object is protected from external manipulation unless programming allows it.
DOM Development
There are currently three levels to the DOM.
The first recommendation was written in 1998. The Level Two recommendation was issued in 2002. The Level Three recommendation came out in 2004. All information (and there is quite a lot) is available on the Web site of the World Wide Web Consortium.
Most Web browsers (versions 5 and up) support the DOM2 standard. They also, to some extent, support the DOM1 which allows for some backward compatibility for older browsers. Future browsers will certainly follow the DOM2 standard, though this may mean less and less compatible with version 5 and older browsers.
It's important to remember that DOM coding is to some extent also dependant on the standards for HTML and CSS. This is because the DOM reflects the tags and attributes of those standards. It is also dependant on JavaScript because the DOM is an API for client-side scripting.