Document Object Model

DOM node tree of a fictitious website

The Document Object Model ( DOM ., Engl for Document Object Model ) is a specification of a programming interface which HTML - or XML - document as a tree structure represents in which each node an object is, which represents a part of the document, e.g. . B. a paragraph, a heading, a video or a table cell. The interface is platform and programming language independent and thus allows standardized changes to the structure and layout of a document. In the web browser , this is an important component for dynamic websites.

The DOM is defined by the World Wide Web Consortium . An implementation that meets the DOM specification consists in the sense of object-oriented programming from a set of classes together with their methods and attributes.

designation

The term “Document Object Model ” is actually a misnomer, since DOM is not defined as a model but as an interface for data access and is also referred to as such by the W3C. The designation as a model , on the other hand, emphasizes the well-defined object model on which the interface is based , the validity of which is a prerequisite for the validity of the interface built on it. At a higher level of abstraction, an interface is also a model, namely for the way in which objects or data are accessed.

history

DOM was originally created under the influence of at least two developments that have significantly shaped the computer world in the recent past. Both are based on the need to be able to easily and uniformly access the structured data in HTML and XML documents.

In the mid-1990s, as the World Wide Web grew in popularity, the scripting language JavaScript was invented and popular web browsers have since included interpreters that execute such scripts . JavaScript defined rudimentary options for accessing the HTML document and for handling events . Later, different browser manufacturers invented different dynamic HTML (DHTML) models that allowed more extensive changes to the structure and appearance of the document while the document was displayed in the browser. However, these differences made the work for web developers who wanted to use dynamic HTML an extremely tedious affair, as they were often practically forced to write a separate version for each browser to be supported. The first DOM standards of the W3C are therefore attempts to merge, standardize and ultimately replace the various proprietary JavaScript and DHTML techniques that emerged during the time of the browser wars. This has succeeded, so that DOM is of central importance in JavaScript programming today.

At the same time, XML emerged as a general exchange format for the human-readable representation of structured data, which was linked to the success of HTML. A comprehensible, powerful and cross-programming language interface was required to process XML documents. DOM offers this and also defines additional interfaces for convenient handling of XML documents.

Basics based on an example

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

<table>
  <thead>
    <tr>
      <th>Vorname</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Donald</td>
      <td>Duck</td>
    </tr>
  </tbody>
</table>

This is what it looks like in the browser:

The DOM represents the tableelement and its sub-elements in the following tree structure:

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

Types of relationships

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

• The root node ( root ) tableis a child ( children ) the element nodes theadand tbody.
• The tableelement node is reversed a parent ( parent ) of theadand tbody.
• Nodes with a common parent (for example, the two thelement node) mates (are siblings ) mentioned.

Starting from any node, every other node can be reached via these relationships.

Types of knots

The most important node types in DOM are:

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

Attribute nodes are a special type of node because they do not appear as nodes in the tree structure, which is mainly formed by element nodes. Attribute nodes are therefore not “children” of element nodes, but properties of them.

Processing a document

In the first step, an existing document is read in by the program and a document object is generated. This object can be used to access the content, structure and display using the methods of the API .

In particular, DOM

• the navigation between the individual nodes of a document,
• creating, moving and deleting nodes as well as
• reading, changing and deleting text content.

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

standardization

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

DOM level 0

This level was never formally specified. Level 0 describes the techniques that can be used using JavaScript to access HTML documents. These were introduced by web browsers such as Internet Explorer and Netscape Navigator before the standardization of DOM.

DOM level 1

Published in late 1998.

• DOM Core (DOM core) defines the movement in the DOM tree, the manipulation of the nodes, including the insertion of new elements and the setting of attributes.
• DOM HTML is the extension for accessing HTML documents. It standardizes and complements the already widespread practice, which is based on the JavaScript specifications from Netscape and Microsoft JScript .

DOM level 2

Published in late 2000.

• DOM Core : u. a. Extension to XML namespace support
• DOM HTML : u. a. Extension to XHTML documents, adaptation to DOM 2 Core
• DOM Style and DOM CSS enable dynamic reading, adding and changing of the formatting or the layout of the document using style sheets , especially Cascading Style Sheets (CSS).
• DOM Views allows access to information about specific types of reproduction of the document (for example the graphic display in the web browser). This is mainly used in conjunction with DOM CSS in order to find out the actual CSS property values ​​of certain elements (eg "What background color is this heading?").
• DOM Events standardizes the processing of events in the document, for example user actions. Mainly used in connection with JavaScript when displaying HTML documents in web browsers. Based on the models of 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 areas in the document that include certain elements and text nodes

DOM level 3

Published April 2004.

• DOM 3 Core : comprehensive expansion, u. a. improved exception handling and handling of character encodings
• DOM 3 Load and Save enables the serialization of documents or document parts as well as the parsing of XML documents in character strings in document objects. In addition, XML documents can be sent and retrieved via HTTP , as is possible with the more popular XMLHttpRequest technique.
• DOM 3 XPath allows nodes to be selected based on XPath expressions.
• DOM 3 Events extends DOM 2 Events u. a. to keyboard events.
• DOM 3 Validation allows you to check whether the DOM document remains valid after a dynamic change (adding or removing nodes) .
• DOM 3 Views and Formatting allows dynamic access to content, structure and style and changes to them.
• DOM 3 Abstract Schemas

See also

• Simple API for XML (SAX)
• Xerces , JDOM , dom4j

Web links

• Site at the W3C (English)
• W3C translation of test suites (German)
• Mario Jeckle : Script for the lecture XML: DOM
• DOM introduction at data2type (German)
• DOM reference at data2type (German)
• Slide presentation
• DOM in the SELFHTML Wiki
• Collection of links to technical articles (English)
• Practical application example DOM with PHP - creation of a valid RSS feed with DOM and PHP

Individual evidence

1. ↑ JavaScript CRE146 (Podcast; from 01:00:45)