Document Object Model

Document Object Model (DOM ) is a specification of an interface for accessing an HTML or XML documents. It is defined by the World Wide Web Consortium.

An implementation that meets this specification, is in the sense of object-oriented programming of a set of classes and methods, along with their attributes. It allows computer programs to dynamically change the contents of the structure and layout of a document.

  • 4.1 DOM Level 0
  • 4.2 DOM Level 1
  • 4.3 DOM Level 2
  • 4.4 DOM Level 3


The name " Document Object Model " is actually a misnomer, since DOM is defined not as a model, but as an interface ( Interface) for data access and is also referred to as the W3C. The text of label emphasizes, however, the basis of the interface well-defined object model whose validity is a prerequisite for the validity of the constructed thereon interface. At a higher level of abstraction is a model of an interface, namely the way to access objects or data.


DOM was originally created under the influence of at least two developments that significantly shaped the computer world in the recent past. Two is motivated by the need for the structured data in HTML and XML documents easily and be able to access uniformly.

The mid- 1990s, when once the World Wide Web grew in popularity, the JavaScript scripting language was invented and standard web browser contained since interpreter to run such scripts. JavaScript defined rudimentary ways to access the HTML document and event handling. Later, different browser makers invented different models for dynamic HTML (DHTML ), which enabled a more comprehensive change in the structure and appearance of the document while the document is displayed in the browser. However, these differences did the work for web developers who wanted to use dynamic HTML to an extremely arduous task since they were often practically forced for each to write supportive browsers own version. The first DOM W3C standards are therefore attempts that various proprietary JavaScript and DHTML techniques that emerged during the browser wars, bring together, standardize and ultimately replace. This has been achieved, so that DOM these days plays a central role in the JavaScript programming.

At the same XML emerged as a common exchange format for human-readable representation of structured data, which built on the success of HTML. For processing XML documents a comprehensive, powerful and programming language independent interface was needed. DOM offers such and also defines additional interfaces for a comfortable dealing with XML documents.

Basics of DOM is an example

The following HTML code defines a table with the table element and various sub-elements:

first name < / th>        Name < / th>           
Donald < / td >        Duck < / td >         < / table> How it looks in a browser:

The DOM represents the table element and its subelements in the following tree structure:

This example can be the basic structure of the object model to discuss: Documents are logically represented as a tree. Nodes ( nodes ) are about " relationships " with each other in connection.

Types of relationships

The present structure is characterized by the following relations in the object model:

  • The root node (root ) table is a child ( children) thead and tbody the element node.
  • The table element node is inversely a parent ( parent) of thead and tbody.
  • Nodes with a common parent (for example, the two - th element node ) are called siblings ( siblings ).

Starting from an arbitrary node at any other node is reachable via relationships.

Types of nodes

The most important types of nodes in the DOM are:

  • A document node represents the entire tree
  • A document fragment node represents a part of the tree structure
  • An element node corresponds to exactly one element in HTML or XML.
  • An attribute node corresponds to exactly one attribute in HTML or XML.
  • A text node represents the textual content of an element

Attribute nodes are a special type of node, because they do not come as a node in the tree in front, which is formed mainly by the element nodes. Attribute nodes thus are not " children " of element nodes, but properties of them.

Processing a document

In the first step an existing document is read by the program and creates a document object. Based on this object may be accessed content, structure, and representation means of the methods of the API.

In particular DOM allows

  • Navigation between the individual nodes of a document,
  • Creating, moving and deleting nodes and
  • Retrieval, modification and deletion of text content.

At the end of the processing can be generated from the document object by so-called serialization a new XML or HTML document.

Standardization of DOM

DOM is a W3C standard since 1998, and has since been updated and expanded several times. There are several versions (levels ), each with different modules:

DOM Level 0

This level was never formally specified. Level 0 refers to the usable techniques using JavaScript to access HTML documents. These were introduced by web browsers like Internet Explorer and Netscape Navigator prior to the standardization of the DOM.

DOM Level 1

  • DOM Core ( core DOM ) defined the movement in the DOM tree, the manipulation of the node, including the insertion of new elements and setting of attributes.
  • HTML DOM is the extension to access HTML documents. It standardizes and completes the already widespread practice that is based on the JavaScript specifications of Netscape or Microsoft JScript.

DOM Level 2

  • DOM Core: inter alia extension to XML namespace support
  • HTML DOM: inter alia extension to XHTML documents, adaptation to DOM 2 Core
  • DOM Style DOM and CSS allows for dynamic reading, adding, and changing the formatting or the layout of the document using stylesheets in particular Cascading Style Sheets ( CSS).
  • DOM Views provides access to information of specific types of playback of the document ( for example, the graph in the web browser ). This is mainly used together with DOM CSS to bring the actual CSS property values ​​of certain elements in experience (eg, " What background color has this headline ?").
  • DOM Events standardizes the processing of events in the document, for example, user actions. Mainly used in conjunction with JavaScript in the presentation of HTML documents in Web browsers. Based on the models of the event handling of Netscape Navigator and Internet Explorer for HTML documents.
  • DOM Traversal and DOM Range: traversing the node tree based on certain selection criteria, working with fields in the document that include elements and text nodes

DOM Level 3

  • DOM 3 Core: full extension, inter alia, improved exception handling, and dealing with character encodings
  • DOM 3 Load and Save allows the serialization of documents or document parts and parsing XML documents into character strings in the document objects. In addition, XML documents can be sent and retrieved via HTTP, as it is possible with the better-known XMLHttpRequest technology.
  • DOM 3 XPath allows you to select nodes based on XPath expressions.
  • DOM 3 Events extended DOM 2 Events, inter alia, to keyboard events.
  • DOM 3 Validation allows you to check whether, after a dynamic change (adding or removing nodes ) the DOM document remains valid.
  • DOM 3 Views and Formatting allows to dynamically access the content, structure and style and change it.
  • DOM 3 Abstract Schemas