PDA

View Full Version : DOM Node Tree Viewer

Vladdy
07-06-2002, 08:58 PM
Oh well, guess I will try to be the first one to submit something that someone may find usefull....

It really surprises me that there are not so many posts in the DOM Scripting forum and I take it as indication of how many people attempt to write DOM compliant scripts.

I came up with the following script when I was learning DOM and needed some visual on parent - child relationships in my documents.

The working example (I'm not sure if that counts as promoting of my scripts that I'm not supposed to do here) can be found at:
http://www.vladdy.net/WebDesign/DOM_TreeViewer.html

Here is listing of the script file:
/*********************************
* Module: DOM_TreeViewer.js Version 1.0
*********************************
* Using Document Object Model tree viewer:
*
* Create "Styles" subfolder and place DOM_TreeViewer.css in it
* Create "Scripts" subfolder and place DOM_TreeViewer.js in it
* If you use another folder structure you need to modify referencies in the lines
* 42 and 43
*
* Place the following code in your HTML header:
* <LINK REL="stylesheet" TYPE="text/css" HREF="Styles/DOM_TreeViewer.css">
* <SCRIPT TYPE="text/JavaScript" SRC="Scripts/DOM_TreeViewer.js"></SCRIPT>
* Place the following code in your HTML body:
* <INPUT CLASS="button" TYPE="button" VALUE="View Document Tree"
* onClick="javascript:DisplayDOM()">
*
* Open DOM Tree Viewer window by clicking on the "View Document Tree" button.
* If you wish to display only a particular branch of the DOM tree provide the ID
* of the root element to the DisplayDOM function: DisplayDOM(rootElementID)
*********************************
* Software contained in this file can be used for personal and educational purposes
* free of charge. If you are interested in utilizing this code for comercial use,
* contact the author at vladimir.g.krylov@verizon.net
*
* Copyright (c) 2002, Vlad Krylov, All Rights Reserved.
*********************************/


/* Function: DisplayDOM
* Arguments: ID - ID of the root element.
* If no argument is supplied the document root is assumed
*/
function DisplayDOM(ID)
{ var winDS = window.open('','DOM_Tree','width=600,
height=400,resizable=1, scrollbars=1');
var DS=winDS.document.open('text/html','replace');
if(ID==null)
oRoot=document;
else
oRoot=document.getElementById(ID);
DS.write('<HTML><HEAD><TITLE>DOM Node Tree: '
+document.title+'</TITLE>');
DS.write('<LINK REL="stylesheet" TYPE="text/css"');
DS.write('HREF="Styles/DOM_TreeViewer.css">');
DS.write('<SCRIPT TYPE="text/JavaScript" ');
DS.write(' SRC="Scripts/DOM_TreeViewer.js"></SCRIPT>');
DS.write('</HEAD><BODY>');
DS.write('<DIV CLASS=Node ID="PND_0"><NOBR>');
DS.write('<A CLASS="ce" HREF=javascript:CollapseRestore("0")');
DS.write(' ID="A_0">+ </A>');
WriteNodeInfo(oRoot,DS,'0');
DS.write('<DIV CLASS="NodeDIV" ID="0">');
EnumChildren(oRoot,DS,'0');
DS.write('</DIV></BODY></HTML>');
DS.close();
}

/* Function: EnumChildren
*/
function EnumChildren(oNode,DS,strTNum)
{ var i;
for (i=0; i<oNode.childNodes.length;i++)
{ strNodeID=strTNum + "@" + i;
DS.write('<DIV CLASS=Node ID="PND_' +
strNodeID + '"><NOBR>');
if(oNode.childNodes[i].childNodes.length>0)
{ DS.write('<A CLASS="ce" HREF=javascript:CollapseRestore("'
+strNodeID+'") ID="A_'
+ strNodeID + '">+ </A>');
WriteNodeInfo(oNode.childNodes[i],DS,strNodeID);
DS.write('<DIV ID="' + strNodeID +
'" CLASS="NodeDIV">');
EnumChildren(oNode.childNodes[i],DS,strTNum + "@" + i);
}
else
{ DS.write('<SPAN CLASS="ce">&nbsp;&nbsp;</SPAN>');
WriteNodeInfo(oNode.childNodes[i],DS,strNodeID);
}
}
DS.write('</DIV>');
return;
}

/* Function: WriteNodeInfo
*/
function WriteNodeInfo(oWrNode,DS,strNDNum)
{ var nodeText;
if(oWrNode.nodeValue!=null)
{ DS.write('<A CLASS="nd" HREF=javascript:DisplayNodeDesc("ND_'
+ strNDNum + '") ID="NDA_' + strNDNum + '">');
}
if(oWrNode.nodeType==1)
{ DS.write('&lt;');
DS.write(oWrNode.nodeName);
strID=oWrNode.getAttribute('ID');
strCLASS=oWrNode.getAttribute('CLASS');
if(strID!=null && strID!='' && strID!='null')
DS.write(' ID="' + strID + '" ');
if(strCLASS!=null && strCLASS!='')
DS.write(' CLASS="' + strCLASS + '" ');
DS.write('&gt;');
}
else
{ DS.write(oWrNode.nodeName);
}
if(oWrNode.nodeValue!=null)
{ DS.write('</A></NOBR>');
nodeText=oWrNode.nodeValue;
nodeText=nodeText.replace(/&/g,'&amp;');
nodeText=nodeText.replace(/</g,'&lt;');
nodeText=nodeText.replace(/>/g,'&gt;');
DS.write('<P CLASS="NodeDesc" ID="ND_'
+ strNDNum + '">' + nodeText + '</P>');
}
else
{ DS.write('</NOBR>');
}
DS.write('</DIV>');
}

/* Function: CollapseRestore
*/
function CollapseRestore(DIVID)
{ odiv=document.getElementById(DIVID);
odlnk=document.getElementById('A_'+DIVID);
if(odiv.style.display=='block')
{ odiv.style.display='none';
odlnk.childNodes[0].nodeValue='+ ';
}
else
{ odiv.style.display='block';
odlnk.childNodes[0].nodeValue='- ';
}
return;
}

/* Function: DisplayNodeDesc
*/
function DisplayNodeDesc(NDID)
{ ond=document.getElementById(NDID);
odiv=document.getElementById("P"+NDID);
if(ond.style.display=='block')
{ ond.style.display='none';
odiv.style.border='none';
odiv.style.background='none';
}
else
{ ond.style.display='block';
odiv.style.border='solid blue 1px';
odiv.style.background='#E0E0FF';
}
return;
}



and here is the listing of the style sheet that is used with it

/*********************************
* Cascading Style Sheet: DOM_TreeViewer.css Version 1.0
*
* Copyright (c) 2002, Vlad Krylov, All Rights Reserved.
*********************************/

.Node
{ margin: 0px;
text-align: left;
font-weight: bold;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
color: #000040;
background: inherit;
}

.NodeDIV
{ display: none;
padding: 0px;
margin: 2px;
margin-left: 20px;
text-align: left;
font-weight: bold;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
color: #000080;
background: inherit;
}

.NodeDesc
{ display: none;
padding: 0px;
margin: 2px;
margin-left: 20px;
text-align: left;
font-weight: normal;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000080;
background: inherit;
}

.ce
{ text-decoration: none;
font-weight: bold;
font-family: Courier New, monospace;
font-size: 14px;
color: #FF0000;
background: inherit;
}

.nd
{ text-decoration: none;
font-weight: bold;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
color: #0000C0;
background: inherit;
}

.nd:hover
{ text-decoration: none;
font-weight: bold;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
color: #FF0000;
background: inherit;
}

Regards
jkd
07-06-2002, 09:27 PM
I'd take a look at the DOM2 Traversal-Range TreeWalker interface if I were you. Currently only Mozilla supports the interface, but it makes traversing the document structure of a page much easier.

NodeIterator could also be used to nice effects with this. :)
(Which is something not even Mozilla supports - yet).

var tree = document.createTreeWalker(document, NodeFilter.SHOW_ALL, null, true);

Would create a TreeWalker that traverses the entire document.

As soon as I figure out some issues on my other PC, I'll post a bunch of examples of DOM2 code we can only dream IE will one day support.
Vladdy
07-06-2002, 10:57 PM
While the interfaces you mentioned are nice, they work only in certain browsers. One of the reasons I wrote the presented script was to find out why my DOM scripts work in one browser and not another. As I found out NS and IE have their differencies in the way node tree is built gived the same HTML code.

Now... making DOM2 code work with IE.... that is a challenge ;)

I'm working on this "Ultimate Tooltips" script that relies on XHTML and DOM2 event model..... cussing BG for not suppoting it.... hehe... I think I found a way to make it work using IE way of attaching events, but it makes the code ugly LOL...
mpjbrennan
07-12-2002, 10:36 PM
Hi Vladdy,

I wrote one of those some time ago - you can view it at

http://www.patrick-brennan.com/javascript/DOManalyzer.html

I think yours is better tho'

patrick