Document Object Model

The Document Object Model (DOM) is not a programming language but a programming interface for HTML and XML documents. DOM is a standard object model of the document tree structure and content of a web document. The W3C DOM (http://www.w3.org/DOM/) and WHATWG DOM (https://dom.spec.whatwg.org/) standards are implemented in most modern browsers.

DOM and Script

JavaScript is one of the common programming language used to access the web document through DOM. The DOM is only an object naming standard for web document and is independent of any particular programming language. The DOM only provides the ways to access and manipulate the web document. The scripting language is the tool used to manipulate and program the web document through accessing the DOM.

Examples

Examples of DOM and script code

ASP.NET Code Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
<%Response.Write("<p>Results on "& Request.ServerVariables("SERVER_SOFTWARE") & " .net: " & System.Environment.Version.ToString & " " & ScriptEngine & " Version " & ScriptEngineMajorVersion & "." & ScriptEngineMinorVersion & "</p>")%>
<p>paragraph 1</p>
<p>paragraph 2</p>
<script type = "text/javascript">
var paragraphs = document.getElementsByTagName("p");
paragraphs[2].innerHTML = "Hello World!"
</script> 

    </body>
</html>

HTTP Response Output:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
<p>Results on Microsoft-IIS/8.5 .net: 4.0.30319.42000 VB Version 14.0</p>
<p>paragraph 1</p>
<p>paragraph 2</p>
<script type = "text/javascript">
var paragraphs = document.getElementsByTagName("p");
paragraphs[2].innerHTML = "Hello World!"
</script> 

    </body>
</html>

HTML Web Page Embedded Output:

Components of DOM

The fundamental components of DOM are

Window

Window is the object that contains the web document object.

Document

Document is the object of the DOM of the web document itself.

Element

Element is any object in the document object of the DOM of the web document.

Node

Node is the primary object datatype of the DOM tree of the web document. Some typical node objects are Document, DocumentType, DocumentFragment, Element, Text, ProcessingInstruction, and Comment objects.

Examples

Examples of DOM and script code

ASP.NET Code Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
<%Response.Write("<p>Results on "& Request.ServerVariables("SERVER_SOFTWARE") & " .net: " & System.Environment.Version.ToString & " " & ScriptEngine & " Version " & ScriptEngineMajorVersion & "." & ScriptEngineMinorVersion & "</p>")%>
   <!-- comment -->
   <DIV>
       <TABLE>
           <TR>
               <TD>Table cell 1
               </TD>
           </TR>
           <TR>
               <TD>Table cell 2
               </TD>
           </TR>
       </TABLE>
   </DIV>
   <PRE id="demo">
   </PRE>
<script type="text/javascript">
<!--
   var txt=""
   parChildNotes(document, 1);
   document.getElementById("demo").innerHTML = txt;
function parChildNotes(currentElement, cnt) {
   if (currentElement) {
       var j,k,xx;
       var tagName=currentElement.tagName;
       if (tagName) {
           printArrow(cnt)
           txt = txt + "&lt;" + currentElement.tagName + "&gt;\n";
       }
       else {
           if (currentElement.innerhtml == "" || currentElement.nodeType != 3) {
               printArrow(cnt)
               txt = txt + currentElement.nodeName + "\n";
           }
           else {
               xx = currentElement.textContent.replace("\n", "").trim()
               if (xx != "" ) {
                   printArrow(cnt)
                   if (xx.length < 15)
                       txt = txt + xx  + "\n";
                   else
                       txt = txt + currentElement.nodeName + "\n";
               }
           }
       }
       for (k = 0; k < currentElement.childNodes.length; k++)
           parChildNotes(currentElement.childNodes[k], cnt + 1);
   }
}
function printArrow(cnt) {
for (j = 0; j < cnt-1; j++)
   txt = txt +"->";
}
-->
</script> 
    </body>
</html>

HTTP Response Output:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
<p>Results on Microsoft-IIS/8.5 .net: 4.0.30319.42000 VB Version 14.0</p>
   <!-- comment -->
   <DIV>
       <TABLE>
           <TR>
               <TD>Table cell 1
               </TD>
           </TR>
           <TR>
               <TD>Table cell 2
               </TD>
           </TR>
       </TABLE>
   </DIV>
   <PRE id="demo">
   </PRE>
<script type="text/javascript">
<!--
   var txt=""
   parChildNotes(document, 1);
   document.getElementById("demo").innerHTML = txt;
function parChildNotes(currentElement, cnt) {
   if (currentElement) {
       var j,k,xx;
       var tagName=currentElement.tagName;
       if (tagName) {
           printArrow(cnt)
           txt = txt + "&lt;" + currentElement.tagName + "&gt;\n";
       }
       else {
           if (currentElement.innerhtml == "" || currentElement.nodeType != 3) {
               printArrow(cnt)
               txt = txt + currentElement.nodeName + "\n";
           }
           else {
               xx = currentElement.textContent.replace("\n", "").trim()
               if (xx != "" ) {
                   printArrow(cnt)
                   if (xx.length < 15)
                       txt = txt + xx  + "\n";
                   else
                       txt = txt + currentElement.nodeName + "\n";
               }
           }
       }
       for (k = 0; k < currentElement.childNodes.length; k++)
           parChildNotes(currentElement.childNodes[k], cnt + 1);
   }
}
function printArrow(cnt) {
for (j = 0; j < cnt-1; j++)
   txt = txt +"->";
}
-->
</script> 
    </body>
</html>

HTML Web Page Embedded Output:

Console

Console is the object used to access to the browser's debugging console.

Source/Reference

https://www.w3.org/DOM/
https://www.w3.org/TR/WD-DOM/
https://dom.spec.whatwg.org/
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
https://www.guru99.com/understanding-dom-fool-guide.html
https://www.w3schools.com/jsref/dom_obj_document.asp
https://www.permadi.com/tutorial/domTree/index.html
https://gist.github.com/mnewt/4331529