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: 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

©sideway

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


Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

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

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


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