The Document Object Model (DOM) is a specification of an interface for accessing HTML or XML documents. It is defined by the World Wide Web Consortium.
An implementation that meets this specification consists of a set of classes together with their methods and attributes in terms of object-oriented programming. It allows computer programs to dynamically change the content, structure and layout of a document.
Designation
The term „Document Object Model“ is actually a misnomer, since DOM is not defined as a model, but as an interface for the defined data access and is also designated by the W3C. The wording of the designation, on the other hand, emphasises 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 objects or data are accessed.
History
The DOM was originally created under the impression 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 access the structured data in HTML and XML documents in a simple and uniform manner.
In the mid-1990s, as the World Wide Web became more and more popular, the scripting language JavaScript was invented, and popular web browsers since then have included interpreters who run such scripts. JavaScript defined rudimentary ways to access the HTML document and handle events. Later, different browser manufacturers invented different dynamic HTML (DHTML) models that allowed for a more comprehensive change in the structure and appearance of the document while the document is displayed in the browser. 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 nowadays plays a central role in JavaScript programming.
At the same time, XML emerged as a general exchange format for the human-readable representation of structured data, following the success of HTML. Processing XML documents required an understandable, powerful and cross-language programming interface. The DOM offers this and also defines additional interfaces for comfortable handling of XML documents.
Basics of the DOM based on an example
The following HTML code defines a table with the table element and various sub-elements:
<table>
<thead>
<tr>
<th>First name</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donald</td>
<td>Duck</td>
</tr>
</tbody>
</table>
Processing of a document
In the first step, an existing document is read in by the program and a document object is generated. On the basis of this object, the content, structure and presentation can be accessed using the methods of the API.
In particular, DOM allows
navigation between the individual nodes of a document,
generating, moving and erasing nodes; and
read, modify and delete text content.
At the end of the processing, a new XML or HTML document can be generated from the document object by so-called serialization.
Standardization of the DOM
The DOM has been a standard of the W3C since 1998 and has been updated and expanded several times since. There are several versions (levels) each with different modules:
DOM Level 0
This level was never formally specified. Level 0 refers to the JavaScript-usable techniques for accessing HTML documents. These were introduced by web browsers such as Internet Explorer and Netscape Navigator before the standardization of the DOM.
DOM Level 1
DOM Core defines moving in the DOM tree, manipulating the nodes, including inserting new elements and setting attributes.
DOM HTML is the extension for accessing HTML documents. It standardizes and completes the already common practice based on the JavaScript specifications of Netscape and Microsoft JScript.
DOM Level 2
DOM Core: Includes extension of XML namespace support
DOM HTML: Extension to XHTML documents, adaptation to DOM 2 Core
DOM Style and DOM CSS enable the dynamic reading, adding and changing of the formatting or layout of the document via style sheets, in particular Cascading Style Sheets (CSS).
DOM Views allows access to information from specific types of reproduction of the document (for example, the graphical representation in the web browser). This is mainly used together with DOM CSS to find out the actual CSS property values of certain elements (for example, ‘What background color is this heading?’).
DOM Events standardizes the processing of events in the document, such as user actions. Used primarily in connection with JavaScript when displaying HTML documents in web browsers. Based on the models of the event handling of the Netscape Navigator and Internet Explorer for HTML documents.
DOM Traversal and DOM Range: Run through the node tree using certain selection criteria, work with areas in the document that include certain elements and text nodes
DOM Level 3
DOM 3 Core: Comprehensive enhancement, including improved exception handling and handling of character codes
DOM 3 Load and Save enables serialization of documents or document parts, as well as parsing XML documents in strings into document objects. In addition, XML documents can be sent and retrieved via HTTP, as is possible with the more familiar XMLHttpRequest technology.
DOM 3 XPath allows node selection based on XPath expressions.
DOM 3 Events expands DOM 2 events, including keyboard events.
DOM 3 Validation allows you to check whether the DOM document remains valid after a dynamic change (add or remove nodes).
DOM 3 Views and Formatting allows you to dynamically access and change the content, structure and style.
DOM 3 Abstract Schemes