Sideway
output.to from Sideway
Draft for Information Only

Content

Document Object Model
 DOM and Script
  Examples
 Components of DOM
  Window
  Document
  Element
  Node
  Examples
  Console
 Source/Reference

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: 2.0.50727.8000 VB Version 8.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: 2.0.50727.8000 VB Version 8.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

©sideway

ID: 190500018 Last Updated: 18/5/2019 Revision: 0

IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 7

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 149

Software

Application 187

Digitization 24

Numeric 19

Programming

Web 733

CSS 1

ASP.NET 1

Regular Expression 1

HTML

Knowledge Base

Common Color 1

Html Entity (Unicode) 1

Html 401 Special 1

OS 389

MS Windows

Windows10 1

.NET Framework 1

DeskTop 7

Knowledge

Mathematics

Formulas 8

Algebra 20

Number Theory 206

Trigonometry 18

Geometry 18

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Physics

Electric 3

Biology 1

Geography 1


Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 06 September 2019