Document Object Model

How DOM works. Source: Mozilla 2020c.
How DOM works. Source: Mozilla 2020c.

Document Object Model (DOM) is the object-oriented representation of an HTML or XML document. It defines a platform-neutral programming interface for accessing various components of a webpage, so that JavaScript programs can change document structure, style, and content programmatically.

It generates a hierarchical model of the HTML or XML document in memory. Programmers can access/manipulate tags, IDs, classes, attributes and elements using commands or methods provided by the document object. It's a logical structure because DOM doesn't specify any relationship between objects.

Typically you use DOM API when documents can fit into memory. For very large documents, streaming APIs such as Simple API for XML (SAX) may be used.

The W3C DOM and WHATWG DOM are standards implemented in most modern browsers. However, many browsers extend these standards. Web applications must keep in view the DOM standard used for maintaining interoperability across browsers.

Discussion

  • What are the different components of a DOM?
    DOM tree and its components. Source: Wikipedia 2020.
    DOM tree and its components. Source: Wikipedia 2020.

    Purpose of DOM is to mirror HTML/XML documents as an in-memory representation. It's composed of:

    • Set of objects/elements
    • Hierarchical structure to combine objects
    • An interface to access/modify objects

    DOM lists the required interface objects, with supported methods and fields. DOM-compliant browsers are responsible to supply concrete implementation in a particular language (mostly JavaScript).

    Some HTML DOM objects, functions & attributes:

    • Node - Each tree node is a Node object. Different types of nodes inherit from the basic Node interface.
    • Document - Root of the DOM tree is the HTMLDocument node. Usually available directly from JavaScript as document or window. Gives access to properties associated with a webpage such as URL, stylesheets, title, or characterSet. The field document.documentElement represents the child node of type HTMLElement and corresponds to <html> element.
    • Attr – An attribute in an HTMLElement object providing the ability to access and set an attribute. Has name and value fields.
    • Text — A leaf node containing text inside a markup element. If there is no markup inside, text is contained in a single Text object (only child of the element).
  • Can you show with an example how a web page gets converted into its DOM?
    HTML document and its equivalent DOM . Source: Sakpal 2018.
    HTML document and its equivalent DOM . Source: Sakpal 2018.

    The simplest way to see the DOM generated for any webpage is using "Inspect" option within your browser menu. DOM element navigation window that opens allows you to scroll through the element tree on the page. You can also alter some element values and styles – text, font, colours. Event listeners associated with each elements are also listed.

    The document is the root node of the DOM tree and offers many useful properties and methods. document.getElementById(str) gives you the element with str as id (or name). It returns a reference to the DOM tree node representing the desired element. Referring to the figure, document.getElementById('div1') will return the first "div" child node of the "body" node.

    We can also see that "html" node has two direct children, "head" and "body". This example also shows three leaf nodes containing only text. These are one "title" and two "p" tags.

    Corresponding CSS and JavaScript files referenced from HTML code can also be accessed through DOM objects.

  • How is JavaScript used to manipulate the DOM of a web page?
    Commonly used JavaScript DOM interfaces. Source: Mozilla 2020b.
    Commonly used JavaScript DOM interfaces. Source: Mozilla 2020b.

    The ability to manipulate webpages dynamically using client-side programming is the basic purpose behind defining a DOM. This is achieved using DHTML. DHTML is not a markup language but a technique to make dynamic web pages using client-side programming. For uniform cross-browser support of webpages, DHTML involves three aspects:

    • JavaScript - for scripting cross-browser compatible code
    • CSS - for controlling the style and presentation
    • DOM - for a uniform programming interface to access and manipulate the web page as a document

    Google Chrome, Microsoft Edge, Mozilla Firefox and other browsers support DOM through standard JavaScript. JavaScript programming can be used to manipulate the HTML page rendering, the underlying DOM and the supporting CSS. List of some important DOM related JavaScript functionalities:

    • Select, Create, Update and Delete DOM Elements (reference by ID/Name)
    • Style setting of DOM Elements – color, font, size, etc
    • Get/set attributes of Elements
    • Navigating between DOM elements – child, parent, sibling nodes
    • Manipulating the BOM (Browser Object Model) to interact with the browser
    • Event listeners and propagation based on action triggers on DOM elements
  • Can DOM be applied to documents other than HTML or XML?

    By definition, DOM is a language-neutral object interface. W3 clearly defines it as an API for valid HTML and well-formed XML documents. Therefore, a DOM can be defined for any XML compliant markup language. The WHATWG community manages the HTML DOM interface. Some Microsoft specific XML extensions define their own DOM.

    Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional vector graphics. It defines its own DOM API.

    XAML is a declarative markup language promoted by Microsoft, used in UI creation of .NET Core apps. When represented as text, XAML files are XML files with .xaml extension. By treating XAML as a XAML node stream, XAML readers communicate with XAML writers and enable a program to view/alter the contents of a XAML node stream similar to the XML Document Object Model (DOM) and the XmlReader and XmlWriter classes.

    Standard Generalized Markup Language (SGML) is a standard for how to specify a document markup language or tag set. The DOM support for SGML documents is limited to parallel support for XML. While working with SGML documents, the DOM will ignore IGNORE marked sections and RCDATA sections.

  • What are the disadvantages of using DOM?

    The biggest problem with DOM is that it is memory intensive. While using the DOM interface, the entire HTML/XML is parsed and a DOM tree (of all nodes) is generated and returned. Once parsed, the user can navigate the tree to access data in the document nodes. DOM interface is easy and flexible to use but has an overhead of parsing the entire HTML/XML before you can start using it. So when the document size is large, the memory requirement is high and initial document loading time is also high. For small devices with limited on board memory, DOM parsing might be an overhead.

    SAX (Simple API for XML) is another document parsing technique where the parser doesn’t read in the entire document. Events are triggered when the XML is being parsed. When it encounters a tag start (e.g. <sometag>), then it triggers the tagStarted event. When the end of the tag is seen (</sometag>), it triggers tagEnded. So it's better in terms of memory efficiency for heavy applications.

    In earlier days, the DOM standard was not uniformly adopted by various browsers, but that incompatibility issue doesn’t exist anymore.

  • What sort of DOM support is offered by React, Node.js and other JavaScript-based platforms?

    Everything in DOM is a node – document/element/attribute nodes, etc. But if you have a list of 10 items on your webpage and after some user interaction, need to update one of them, the entire DOM will be re-rendered. This is especially troublesome in Single Page Applications (SPAs).

    React WebUI framework solves this by creating a virtual DOM which is an in-memory data-structure cache for selective rendering. Differences in the node rendering are computed, browser's displayed DOM is updated efficiently, "reconciled" by the algorithm.

    NodeJS runtime environment has its own implementation for DOM interface, used when we need to work with HTML on server side for some reason. The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. jsdom is a pure JavaScript implementation of WHATWG DOM and HTML Standards for use with Node.js.

    In AngularJS scripting framework, there are directives for binding application data to attributes of HTML DOM elements. Ex. ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.

Milestones

1995

Brendan Eich and Netscape design and release JavaScript, first supported in Netscape Navigator. In subsequent years, JavaScript becomes one of the core technologies of the World Wide Web, alongside HTML and CSS. All major web browsers have a dedicated JavaScript engine to execute it. In 1997, it's standardized as ECMAScript.

1996

JScript is introduced as the Microsoft dialect of the ECMAScript standard. Limited support for user-generated events and modifying HTML documents in the first generation of JavaScript & JScript is called "DOM Level 0" or Legacy DOM. No independent standard is developed for DOM Level 0, but it's partly described in the specifications for HTML 4.

1997

Netscape and Microsoft release version 4.0 of Netscape Navigator and Internet Explorer respectively. DHTML support is added to enable changes to a loaded HTML document. DHTML requires extensions to Legacy DOM implementations but both browsers developed them in parallel and remain incompatible. These versions of the DOM later become known as the Intermediate DOM.

1998

W3C DOM Working Group drafts a standard DOM specification, known as DOM Level 1 that becomes the W3C Recommendation in 1998. This is after the standardization of ECMAScript.

2001

Microsoft Internet Explorer version 6 comes out with support for W3C DOM.

2004

Mozilla comes out with its Design Principles for Web Application Technologies, the consensus opinion of the Mozilla Foundation and Opera Software in the context of standards for Web Applications and Compound Documents. This defines browser code compatibility with HTML, CSS, DOM, and JavaScript.

2005

Large parts of W3C DOM are well-supported by all the common ECMAScript-enabled browsers including Safari and Gecko-based browsers (like Mozilla, Firefox, SeaMonkey and Camino).

2020

The HTML DOM living standard is a constantly updated standard maintained by WHATWG.org, with latest updates happening continuously.

Sample Code

  • <!--
Source: https://vsquareinformatics.files.wordpress.com/2016/07/intro-to-web-design-and-programming.pdf
Accessed 2020-09-09
 
Two event handlers are attached to the page:
1. `onload()` function  gets executed at page-loading time.
2. A button click event associated with “GO” button, identified using its documentId.
-->
<html>
    <head>
        <title>DOM Calculator</title>
        <link rel="stylesheet" href="domcalc.css" 
            type="text/css" title="Dom Calculator" />
        <script>
            var answer;
            function init() {
                answer = document.getElementById("ans").firstChild;
                comp("uin");
            }
            function comp(id) {
                var el = document.getElementById(id);
                var res = eval(el.value);
                answer.data = res;
            }
        </script>
    </head>
 
    <body onload="init()">
        <h3>DOM Calculator</h3>
        <p>Simply type in a string such as 
            <code>12 + 43 * 6</code>
            and click GO.
        </p>
        <p>
            <strong>COMPUTE : </strong>
            <input id="uin" value="(5 - 2) * 8" maxlength="30" />
            &nbsp;&nbsp;
            <input value="GO" type="button" onclick="comp('uin')" />
        </p>
        <p id="par">And the answer is:<span id="ans">00</span></p>
    </body>
</html>
 

References

  1. Alam, Rashedul. 2013. "Document Object Model or DOM." Cybarlab, April 22. Accessed 2020-09-05.
  2. Chitalia, Hima. 2017. "Hey React, What is the Virtual DOM?" Medium, October 16. Accessed 2020-09-05.
  3. Denicola, Domenic. 2020. "jsdom." GitHub, August 9. Accessed 2020-09-05.
  4. Le Hégaret, Philippe, Lauren Wood, and Jonathan Robie (eds). 2004. "What is the Document Object Model?" W3C, April 07. Accessed 2020-07-22.
  5. Microsoft Docs. 2019. "XAML overview in WPF." Microsoft Docs, August 08. Accessed 2020-09-09.
  6. Microsoft Docs. 2019b. "XAML node stream structures and concepts." Microsoft Docs, March 30. Accessed 2020-09-09.
  7. Microsoft Docs. 2020. "Get Started With Viewing And Changing The DOM." Microsoft Docs, January 9. Accessed 2020-07-22.
  8. Mozilla. 2020. "Introduction to the DOM." MDN Web Docs, Mozilla, August 30. Accessed 2020-09-09.
  9. Mozilla. 2020b. "Document Object Model (DOM)." MDN Web Docs, Mozilla, June 24. Accessed 2020-07-22.
  10. Mozilla. 2020c. "How DOM works." MDN Web Docs, Mozilla, July 27. Accessed 2020-07-22.
  11. Mozilla. 2020e. "Node." MDN web docs, Mozilla, August 24. Accessed 2020-09-05.
  12. PTC. 2020. "Using the DOM with SGML Documents." PTC Arbortext 8.0.0.0 Help Center. Accessed 2020-07-22.
  13. Pfister, Dustin. 2018. "Client side javascript in a node.js environment using jsdom." Blog, January 11. Updated 2019-09-06. Accessed 2020-09-05.
  14. Rajput, Abhishek. 2018. "DOM (Document Object Model)." GeeksforGeeks, June 6. Updated 2019-02-19. Accessed 2020-07-22.
  15. Robie, Jonathan. 2000. "What is the Document Object Model?" W3 Recommendation, February. Accessed 2020-07-22.
  16. Sakpal, Tanmay. 2018. "What is Document Object Model(DOM)? How JS interacts with DOM." Simple Snippets, October 6. Accessed 2020-07-22.
  17. TutorialRepublic. 2020. "JavaScript DOM Nodes." JavaScript Tutorial, TutorialRepublic. Accessed 2020-07-22.
  18. TutorialsPoint. 2020. "XML DOM - Overview." TutorialsPoint. Accessed 2020-09-05.
  19. W3C. 2004. "Position Paper for the W3C Workshop on Web Applications and Compound Documents." W3C, April. Accessed 2020-07-22.
  20. W3Schools. 2020. "AngularJS HTML DOM." W3Schools. Accessed 2020-09-05.
  21. WHATWG. 2020b. "DOM Living Standard." September 02. Accessed 2020-09-05.
  22. Wang, Paul S, and Sanda Katila. 2004. "Document Object Model and Dynamic HTML." Chapter 10 in: An introduction to Web design and programming." Belmont, CA: Thomson/Brooks/Cole. Accessed 2020-09-09.
  23. Wikipedia. 2020. "Document Object Model." Wikipedia, August 29. Accessed 2020-09-09.
  24. Wikipedia. 2020b. "JavaScript." Wikipedia, September 7. Accessed 2020-09-09.
  25. Wikipedia. 2020c. "JScript." Wikipedia, July 16. Accessed 2020-07-22.

Further Reading

  1. WHATWG. 2020. "Common DOM interfaces." Sec. 2.7 in: HTML Living Standard, WHATWG, September 9. Accessed 2020-09-09.
  2. Wang, Paul S, and Sanda Katila. 2004. "Document Object Model and Dynamic HTML." Chapter 10 in: An introduction to Web design and programming." Belmont, CA: Thomson/Brooks/Cole. Accessed 2020-09-09.
  3. Chitalia, Hima. 2017. "Hey React, What is the Virtual DOM?" Medium, October 16. Accessed 2020-09-05.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
User avatar anuradhac
3
2
1358
Avatar of user arvindpdmn arvindpdmn
3
5
348
Avatar of user ikumargaurav ikumargaurav
1
0
4
DevCoins due to articles, chats, their likes and article hits are included.
1615
Words
3
Authors
7
Edits
7
Chats
3
Likes
8016
Hits

Cite As

Devopedia. 2020. "Document Object Model." Version 7, September 13. Accessed 2024-06-25. https://devopedia.org/document-object-model
Contributed by
3 authors

Last updated on
2020-09-13 06:20:26

Improve this article
web design javascript browsers

See Also

Article Warnings

  • In References, replace these sub-standard sources: geeksforgeeks.org, simplesnippets.tech, tutorialspoint.com, w3schools.com