Document Object Model
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.
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.
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.
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
tableelement node is reversed a parent ( parent ) of
- 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 .
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
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 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 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
- 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