JavaScript Tutorials - Herong's Tutorial Examples - Version 2.21, by Dr. Herong Yang
Dump Document in a New Window - Firefox 2.0 Result
This section provides the Firefox 2.0 result of the tutorial example that dumps the browser built-in 'document' object as an XML message in new browser window by using DOM API attributes and methods.
If you run the JavaScript page, DOM_HTML_Document_Dump.html, in Firefox 2.0, you will get the "document" XML dump result in a new window:
<#document> <html> <head> <#comment> DOM_HTML_Document_Dump.html Copyright (c) 2013 by Dr. Herong Yang, herongyang.com </#comment> <title> <#text> Dump HTML Document in New Window </#text> </title> <#text> </#text> <script type="text/javascript"> <#text> function nodeToXML(node, indentation, out) { out += indentation+"<"+node.nodeName.toLowerCase(); if (node.attributes!=null) { for (var i=0; i<node.attributes.length; i++) { var item = node.attributes.item(i); var value = item.nodeValue; if (value==null) value = ""; out += " "+item.nodeName+"=\""+value+"\""; } } out += ">\n"; for (var i=0; i<node.childNodes.length; i++) { var item = node.childNodes.item(i); out = nodeToXML(item, indentation+" ", out); } if (node.nodeValue!=null) out += indentation+" "+node.nodeValue+"\n"; out += indentation+"</"+node.nodeName.toLowerCase()+">\n"; return out; } function show() { var w = window.open('', 'Popup', ''); w.document.write('<html><head><title>Document Dump</title>'); w.document.write('</head><body><pre>'); var s = nodeToXML(document, '', ''); s = s.replace(new RegExp('&','g'),'&'); s = s.replace(new RegExp('<','g'),'<'); s = s.replace(new RegExp('>','g'),'>'); w.document.write(s); w.document.write('</pre></body></html>'); w.document.close(); } </#text> </script> </head> <body> <#text> </#text> <script type="text/javascript"> <#text> document.write('<p>Click to show document in a new window:</p>'); </#text> </script> <p> <#text> Click to show document in a new window: </#text> </p> <#text> </#text> <form> <#text> </#text> <input type="button" onclick="show();" value="Show"> </input> <#text> </#text> </form> <#text> </#text> </body> </html> </#document>
Several notes about this Firefox 2.0 result:
Table of Contents
ECMAScript Language Specification and JavaScript Dialects
Data Types, Variables and Expressions
Creating, Accessing, and Manipulating Arrays
Defining and Calling Functions
Web Browser Supporting JavaScript
Server-Side and Client-Side Web Scripting
Defining Your Own Object Types
Inheritance of Properties and Methods through the Prototype Object Chain
'jrunscript' - JavaScript Shell Command from JDK
Using Functions as "Function" Objects
Introduction to Built-in Object Types
►W3C's Document Object Model (DOM) Specifications
Overview of DOM Specifications
DOM Level Test - document.implementation.hasFeature
Inheritance vs. Flattened Views of the API
A Web Document as A Tree of Different Interfaces
A Web Document as A Tree of Nodes
Dump Document in a New Window - JavaScript Source
►Dump Document in a New Window - Firefox 2.0 Result