In times of content management systems and website construction kits, you might think it’s a waste of time learning HTML. But if a page doesn’t work for some reason or if you plan to install dynamic elements, you won’t be able to continue without having knowledge of this web language. In our detailed HTML tutorial, we introduce you to the basic features of the markup language, including numerous...
What is the Document Object Model (DOM)?
The Document Object Model, DOM for short, is a standardized programming interface for the structuring of HTML and XML documents. It was developed and released by the World Wide Consortium (W3C), the organization founded by web inventor Tim Berners-Lee in 1994, to design and establish standards for the World Wide Web.
Different from what the name suggests, DOM is not actually a model. It is rather – as already mentioned –a programming interface. However, a Document Object Model can be seen in a figurative sense as a model for how to access the web data that’s being depicted as an object.
Where and when are DOM trees used?
The Document Object Model was developed for use across the World Wide Web, which is where it is primarily in use. More specifically, it is the particular browsers that make use of standardized interfaces.
In this way, popular web clients use DOM or DOM-based interfaces in order to render accessed HTML or XML pages. During this process, the individual components are combined together as nodes and organized in an individual DOM tree. At the same time, the respective browser loads this rendered version of the web document into the local storage in order to analyze or process it, and finally to be able to present the page in the form provided by the developer. For the rendering, the browsers rely on different engines (rendering software) such as Gecko (Firefox), WebKit (Safari) or Blink (Chrome, Edge, Opera), which are also based on the DOM standard.
As an object-oriented presentation of a web document, the Document Object Model remains relevant after the output – as an interface for all programmed dynamic content, and, consequently, for all user interactions that can change the site’s appearance during the output.
In 2012, the W3C Consortium introduced a special interface with the name Shadow DOM as one of the four pillars of the so-called web components. This makes it possible to enlarge the actual Document Object Model of a web document through independent subtrees (shadow trees). You can find out more on the topic of Shadow DOM.
How is the Document Object Model structured?
HTML markups define relationships between the different tags. In this way, web document elements identified by tags are superordinate or subordinate, for example, depending on their role within the web project. Furthermore, some tags can be contained within others. In order to simply display these hierarchies adequately in the Document Object Model, the interface makes recourse of the tree structure mentioned above, which makes it possible to arrange the rendered objects accordingly.
How a DOM tree is structured thus always depends on the underlying HTML or XML document. For the former, however, the following cross-project basic hierarchy can be adhered to:
As in the HTML basic structure, the HTML object itself is located at the top position of the hierarchy. Subordinated beneath it are the header and the body of the website. With the latter, it must be assumed that it contains at least one paragraph (section with text content).
The individual splits in the DOM tree are called nodes. In addition, one must distinguish between element nodes such as the HTML, body, header and paragraph objects that can be seen above, attribute nodes such as “align” or “size,” and text nodes.
Document Object Model: a practical example (includes HTML code)
Now that we have carefully examined the function and the general structure of the Document Object Models in the previous sections, we should conclude by illustrating the basic structuring technique for web script languages using a specific example. The following simple HTML document with header (incl. linking to the CSS stylesheet) and body serves as a basis for this, as well as two content elements (image and text):
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="style.css" rel="stylesheet"> <title>Title</title> </head> <body> <p><strong>Hello World!</strong></p> <div><img src="bild.jpg"></div> </body> </html>
The DOM tree generated from thisHTML code looks like this:
Alternatively, you’ll frequently find the following presentation form for the Document Object Model example utilized here:
DOCTYPE: HTML HTML ----head - ---- meta - ---- link - ---- title ----body - ---- p - ---- strong - ---- TEXT: Hello World! - ---- div - ---- img