∟Dump Document in a New Window - JavaScript Source
This section provides a tutorial example of JavaScript to dump the browser built-in 'document' object as an XML message in new browser window by using DOM API attributes and methods.
To summarize what I have learned about DOM API specifications so far,
I wrote a JavaScript page to dump the browser built-in "document" object
with DOM attributes and methods, DOM_HTML_Document_Dump.html:
<html>
<head>
<!-- DOM_HTML_Document_Dump.html
Copyright (c) 2008 by Dr. Herong Yang, http://www.herongyang.com/
-->
<title>Dump HTML Document in New Window</title>
<script type="text/javascript">
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();
}
</script>
</head>
<body>
<script type="text/javascript">
document.write('<p>Click to show document in a new window:</p>');
</script>
<form>
<input type="button" value="Show" onClick="show();"/>
</form>
</body>
</html>
The idea of this JavaScript is simple:
Walk through the document tree with recursive function nodeToXML().
For each node, dump it as XML element. The node name becomes the element name.
Node attributes become element attributes. The node child list becomes the element child list.
The node value becomes the element content.
The dumped XML string is then displayed in a new window.
Read next sections to see result from FireFox and IE.
