Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DOM Node Tree Viewer

    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:
    Code:
    /*********************************
     * 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
    Code:
    
    /*********************************
     * 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
    Last edited by Vladdy; 07-06-2002 at 09:21 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Newcastle, England
    Posts
    178
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Vladdy,

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

    http://www.patrick-brennan.com/javas...Manalyzer.html

    I think yours is better tho'

    patrick


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •