Sideway
output.to from Sideway
Document Object Model (DOM)



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:
<p>paragraph 1</p>
<p>paragraph 2</p>
<script type = "text/javascript">
var paragraphs = document.getElementsByTagName("p");
paragraphs[2].innerHTML = "Hello World!"
</script> 

HTTP Response Output:
<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> 

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>
   <!-- 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: 2019/5/18 Revision: 0

IMAGE

Home (5)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (336)

Reference (66)

Computer

Hardware (149)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (644)new

CSS (SC)

ASP.NET (SC)

Regular Expression (SC)

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (389)new

MS Windows

Windows10 (SC)

.NET Framework (SC)

DeskTop (7)

Knowledge

Mathematics

Formulas (8)

Number Theory (206)

Algebra (20)

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)

Biology (1)

Geography (1)

Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019