The
Document Object Model (
DOM) is a
cross-platformIn computing, cross-platform, or multi-platform, is an attribute conferred to computer software or computing methods and concepts that are implemented and inter-operate on multiple computer platforms...
and
languageA programming language is an artificial language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely....
-independent convention for representing and interacting with
objectsIn computer science, an object is any entity that can be manipulated by the commands of a programming language, such as a value, variable, function, or data structure...
in
HTMLHyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
,
XHTMLXHTML is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language , the language in which web pages are written....
and
XMLExtensible Markup Language is a set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards....
documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use. The public interface of a DOM is specified in its
application programming interfaceAn application programming interface is a source code based specification intended to be used as an interface by software components to communicate with each other...
(API).
History
The history of the Document Object Model is intertwined with the history of the "
browser warsBrowser wars is a metaphorical term that refers to competitions for dominance in usage share in the web browser marketplace. The term is often used to denote two specific rivalries: the competition that saw Microsoft's Internet Explorer replace Netscape's Navigator as the dominant browser during...
" of the late 1990s between
Netscape NavigatorNetscape Navigator was a proprietary web browser that was popular in the 1990s. It was the flagship product of the Netscape Communications Corporation and the dominant web browser in terms of usage share, although by 2002 its usage had almost disappeared...
and Microsoft Internet Explorer, as well as with that of
JavaScriptJavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
and
JScriptJScript is a scripting language based on the ECMAScript standard that is used in Microsoft's Internet Explorer.JScript is implemented as a Windows Script engine. This means that it can be "plugged in" to any application that supports Windows Script, such as Internet Explorer, Active Server Pages,...
, the first
scripting languageA scripting language, script language, or extension language is a programming language that allows control of one or more applications. "Scripts" are distinct from the core code of the application, as they are usually written in a different language and are often created or at least modified by the...
s to be widely implemented in the layout engines of web browsers.
Legacy DOM
JavaScript was released by Netscape Communications in 1996 within Netscape Navigator 2.0. Netscape's competitor,
MicrosoftMicrosoft Corporation is an American public multinational corporation headquartered in Redmond, Washington, USA that develops, manufactures, licenses, and supports a wide range of products and services predominantly related to computing through its various product divisions...
, released
Internet Explorer 3.0Microsoft Internet Explorer 3 is a graphical web browser released on August 13, 1996 by Microsoft for Microsoft Windows and on January 8, 1997 for Apple Mac OS . It began serious competition against Netscape Navigator in the first Browser war...
later the same year with a port of JavaScript called JScript. JavaScript and JScript let
web developerA web developer is a software developer or software engineer who specializes in, or is specifically engaged in, the development of World Wide Web applications, or distributed network applications that are run over HTTP from a web server to a web browser....
s create web pages with
client-sideClient-side refers to operations that are performed by the client in a client–server relationship in a computer network.Typically, a client is a computer application, such as a web browser, that runs on a user's local computer or workstation and connects to a server as necessary...
interactivity. The limited facilities for detecting user-generated
eventsIn computing an event is an action that is usually initiated outside the scope of a program and that is handled by a piece of code inside the program. Typically events are handled synchronous with the program flow, that is, the program has one or more dedicated places where events are handled...
and modifying the HTML document in the first generation of these languages eventually became known as "DOM Level 0" or "Legacy DOM". No independent standard was developed for DOM Level 0, but it was partly described in the specification of HTML4.
Legacy DOM was limited in the kinds of
elementAn HTML element is an individual component of an HTML document. HTML documents are composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have attributes specified. Elements can also have content, including other elements and text. HTML elements represent...
s that could be accessed.
FormA webform on a web page allows a user to enter data that is sent to a server for processing. Webforms resemble paper or database forms because internet users fill out the forms using checkboxes, radio buttons, or text fields...
,
linkIn computing, a hyperlink is a reference to data that the reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks...
and image elements could be referenced with a hierarchical name that began with the root document object. A hierarchical name could make use of either the names or the sequential index of the traversed elements. For example, a
form input elementA text box, text field or text entry box is a kind of widget used when building a graphical user interface . A text box's purpose is to allow the user to input text information to be used by the program...
could be accessed as either "document.formName.inputName" or "document.forms[0].elements[0]".
The Legacy DOM enabled client-side form validation and the popular "
rolloverRollover refers to a button created by a web developer or web designer, found within a web page, used to provide interactivity between the user and the page itself...
" effect.
Intermediate DOM
In 1997, Netscape and Microsoft released version 4.0 of Netscape Navigator and Internet Explorer, adding support for
Dynamic HTMLDynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language , a client-side scripting language , a presentation definition language , and the Document Object Model.DHTML...
(DHTML), functionality enabling changes to a loaded HTML document. DHTML required extensions to the rudimentary document object that was available in the Legacy DOM implementations. Although the Legacy DOM implementations were largely compatible since JScript was based on JavaScript, the DHTML DOM extensions were developed in parallel by each browser maker and remained incompatible. These versions of the DOM became known as the "Intermediate DOM."
The Intermediate DOMs enabled the manipulation of Cascading Style Sheet (CSS) properties that influence the display of a document. They also provided access to a new feature called "layers" via the "document.layers" property (Netscape Navigator) and the "document.all" property (Internet Explorer). Because of the fundamental incompatibilities in the Intermediate DOMs,
cross-browserCross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers. The term cross-browser is often confused with multi-browser...
development required special handling for each supported browser.
Subsequent versions of Netscape Navigator abandoned support for its Intermediate DOM. Internet Explorer continues to support its Intermediate DOM for backwards compatibility.
Standardization
The
World Wide Web ConsortiumThe World Wide Web Consortium is the main international standards organization for the World Wide Web .Founded and headed by Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the...
(W3C), founded in 1994 to promote open standards for the
World Wide WebThe World Wide Web is a system of interlinked hypertext documents accessed via the Internet...
, brought Netscape Communications and Microsoft together with other companies to develop a standard for browser scripting languages, called "
ECMAScriptECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript, and ActionScript.- History :JavaScript...
". The first version of the standard was published in 1997. Subsequent releases of JavaScript and JScript would implement the ECMAScript standard for greater cross-browser compatibility.
After the release of ECMAScript, W3C began work on a standardized DOM. The initial DOM standard, known as "DOM Level 1," was recommended by W3C in late 1998. About the same time, Internet Explorer 5.0 shipped with limited support for DOM Level 1. DOM Level 1 provided a complete model for an entire HTML or
XMLExtensible Markup Language is a set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards....
document, including means to change any portion of the document. Non-conformant browsers such as Internet Explorer 4.x and Netscape 4.x were still widely used as late as 2000.
DOM Level 2 was published in late 2000. It introduced the "
getElementByIdgetElementById is a method of the Document object in the Document Object Model. It is commonly used in JavaScript programming to refer to an HTML element for processing. Specifically, it returns a reference to an object that represents an element on the page, in the case of an HTML document, or a...
" function as well as an
event modelDOM events allow event-driven programming languages like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handlers/listeners on the element nodes inside a DOM tree, e.g. HTML, XHTML, XUL and SVG documents....
and support for XML namespaces and CSS. DOM Level 3, the current release of the DOM specification, published in April 2004, added support for
XPathXPath is a language for selecting nodes from an XML document. In addition, XPath may be used to compute values from the content of an XML document...
and keyboard event handling, as well as an interface for
serializingIn computer science, in the context of data storage and transmission, serialization is the process of converting a data structure or object state into a format that can be stored and "resurrected" later in the same or another computer environment...
documents as XML.
By 2005, large parts of W3C DOM were well-supported by common ECMAScript-enabled browsers, including Microsoft Internet Explorer version 6 (2001),
OperaOpera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
,
SafariSafari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
and
GeckoGecko is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation , as well as in many other open source software projects....
-based browsers (like
MozillaThe Mozilla Application Suite is a cross-platform integrated Internet suite. Its development was initiated by Netscape Communications Corporation, before their acquisition by AOL. It is based on the source code of Netscape Communicator...
,
FirefoxMozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. , Firefox is the second most widely used browser, with approximately 25% of worldwide usage share of web browsers...
,
SeaMonkeySeaMonkey is a free and open source cross-platform Internet suite. It is the continuation of the former Mozilla Application Suite, based on the same source code...
and
CaminoCamino is a free, open source, GUI-based Web browser based on Mozilla's Gecko layout engine and specifically designed for the Mac OS X operating system...
).
Web browsers
Web browsers are not obligated to use the DOM in order to render an HTML document. However, the DOM is required by JavaScript scripts that wish to inspect or modify a Web page dynamically. In other words, the Document Object Model is the way JavaScript sees the browser state and the HTML page it contains.
When an HTML page is rendered in a browser, the browser assembles all the elements (objects) that are contained in the HTML page, downloaded from web-server in its memory. Once done the browser then renders these objects in the browser window as text, forms, input boxes, etc. Once the HTML page is rendered in web-browser window, the browser can no longer recognize individual HTML elements (Objects).
Since the JavaScript enabled browser uses the
Document
Object
Model (DOM), after the page has been rendered, JavaScript enabled browsers are capable of recognizing individual objects in an HTML page.
The HTML objects, which belong to the DOM, have a descending relationship with each other.
The topmost object in the DOM is the
Navigator (
i.e. Browser) itself. The next level in the DOM is the browser's
Window, and under that are the
Documents displayed in Browser's Window.
DOM
|-> Window
|-> Document
|-> Anchor
|-> Link
|-> Form
|-> Text-box
|-> Text Area
|-> Radio Button
|-> Check Box
|-> Select
|-> Button
Levels of DOM
Three levels or parts of DOM exist:
- The Core DOM: standard model for any structured document
- The HTML DOM: standard model for HTML documents
- The XML DOM: standard model for XML documents
Implementations
Because DOM supports navigation in any direction (e.g., parent and previous sibling) and allows for arbitrary modifications, an implementation must at least buffer the document that has been read so far (or some parsed form of it).
Layout engines
Web browsers rely on layout engines to parse HTML into a DOM. Some layout engines such as
Trident/MSHTMLTrident is the name of the layout engine for the Microsoft Windows version of Internet Explorer.It was first introduced with the release of Internet Explorer version 4.0 in October 1997; it has been steadily upgraded and remains in use today...
and
PrestoPresto is the layout engine for later versions of the Opera web browser . After several public betas and technical previews, it was released on January 28, 2003 in Opera 7 for Windows, and as of Opera 11 it is still in use. Presto is dynamic: the page or parts of it can be re-rendered in response...
are associated primarily or exclusively with a particular browser such as Internet Explorer and Opera respectively. Others, such as
WebKitWebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook...
and
GeckoGecko is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation , as well as in many other open source software projects....
, are shared by a number of browsers, such as
SafariSafari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
,
Google ChromeGoogle Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...
,
RockMeltRockMelt is a free social media web browser developed by Tim Howes and Eric Vishria. The project is backed by Netscape founder Marc Andreessen....
, Firefox or
FlockFlock was a web browser that specialized in providing social networking and Web 2.0 facilities built into its user interface.Earlier versions of Flock used the Gecko HTML rendering engine by Mozilla....
. The different layout engines implement the DOM standards to varying degrees of compliance.
Libraries
DOM implementations:
- libxml2
- MSXML
Microsoft XML Core Services is a set of services that allow applications written in JScript, VBScript, and Microsoft development tools to build Windows-native XML-based applications...
- Xerces
Xerces is a collection of software libraries for parsing, validating, serializing and manipulating XML. The library implements a number of standard APIs for XML parsing, including DOM, SAX and SAX2. The implementation is available in Java, C++ and Perl programming languages.-External...
is a C++ DOM implementation with Java and Perl bindings
APIs that expose DOM implementations:
- JAXP
The Java API for XML Processing, or JAXP , is one of the Java XML programming APIs. It provides the capability of validating and parsing XML documents...
(Java API for XML Processing) is an API for accessing DOM providers
See also
- Ajax
Ajax is a group of interrelated web development methods used on the client-side to create asynchronous web applications...
—a methodology employing DOM in combination with techniques for retrieving data without reloading a page.
- Application Object Model
Application Object Model for Mozilla is an application programming interface for manipulating the application using JavaScript. It is similar to Document Object Model, but instead of being document-centric, it is application-centric...
- DOM scripting
The term DOM scripting refers to programmatically accessing the Document Object Model . In common usage, DOM scripting implies JavaScript. DOM scripting has its roots in Dynamic HTML , but is more structured. It is the third pillar in the web standards movement.-DHTML vs...
- JDOM
JDOM is an open source Java-based document object model for XML that was designed specifically for the Java platform so that it can take advantage of its language features. JDOM integrates with Document Object Model and Simple API for XML , supports XPath and XSLT. It uses external parsers to...
—a Java-based document object model for XML that integrates with DOM and SAXSAX is an event-based sequential access parser API developed by the XML-DEV mailing list for XML documents. SAX provides a mechanism for reading data from an XML document that is an alternative to that provided by the Document Object Model...
and uses parsers to build the document.
- jQuery
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
- JSON
JSON , or JavaScript Object Notation, is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects...
- Prototype.js
- RapidXml
RapidXml is a very fast and stable XML DOM-style parser written in C++. It is aimed primarily at embedded environments, computer games, or any other applications where available memory or CPU processing power comes at a premium...
—is an attempt to create the fastest XML parser possible using modern C++.
- SAX
SAX is an event-based sequential access parser API developed by the XML-DEV mailing list for XML documents. SAX provides a mechanism for reading data from an XML document that is an alternative to that provided by the Document Object Model...
—serial access parser API for XML, an alternative to DOM.
- SXML
SXML is a way to write and process XML data in the form of S-expressions.Textual correspondence between SXML and XML for a sample XML snippet is shown below: XML SXML Text node SXML is a way to write and process XML data in the form of S-expressions.Textual correspondence between...
—a model for representing XML and HTML in the form of S-expressions.
- TinyXml
TinyXML is a small, simple XML parser for the C++ language. It is free and open source software, distributed under the terms of the license of zlib/libpng.- Features :...
—efficient platform-independent XML library for C++.
External links