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
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Traversing the DOM tree based on 2 tags

    Getting the array of Elements by Tag Name:

    tagWithLink_ar = document.getElementsByTagName("td");

    The method of locating a child node works in IE5, but not in FF:

    tagWithLink_ar[i].childNodes[0].nodeName.indexOf("DIV")

    Anyone have a suggestion on a cross-browser method to traverse the DOM tree to find a pattern of multiple tags?


    My goal is to draw separator lines within a table, but only when specific "DIV" are not hidden. Unfortunately, I can't use IDs or classes to separate out the DIVs because they vary based on other criteria. Plus the number of DIVs varies within the TD table object.

    The following function and HTML is an example what works in IE, but not FF:
    Code:
    function drawDividerLines() {
    	tagWithLink_ar = document.getElementsByTagName("td");
    	for(i=0;i<tagWithLink_ar.length;i++) {   
    		if (tagWithLink_ar[i].childNodes[0].nodeName.indexOf("DIV") != -1 ) {
    			visibleDiv_str = "";
    			for(j=0;j<tagWithLink_ar[i].childNodes.length;j++) { 
    				if (tagWithLink_ar[i].childNodes[j].currentStyle.display == 'block') {
    					visibleDiv_str = visibleDiv_str + j + ",";   
    				}
    			}
    			visibleDiv_str = visibleDiv_str.substr(0, visibleDiv_str.length - 1);
    			visibleDiv_ar = visibleDiv_str.split(",");
    			if (visibleDiv_ar.length>1) {			
    				for(j=0;j<visibleDiv_ar.length;j++) { 				
    					if (j<visibleDiv_ar.length-1) {
    						tagWithLink_ar[i].childNodes[visibleDiv_ar[j]].style.borderBottom = "1px solid #000000";
    					}
    				}
    			}
    		}
    	}
    }
    
    
    <div id="process1">
      <table cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td class="columnOne">
                <span class="Title"><a href="#">text</a></span>
                <span class="indicator">07/26/200X</span>
             </td>
             
             <td>
    		    <div>
    			  <span class="Name">text1</span>
    			  <span class="Links"><a target="_blank" href="#" class="Template"></a></span>
    			</div>
    			
    			<div class="loc_One">
    			  <span class="Name"><img src="../images/flagOne.gif" alt="One" />text2</span>
    			  <span class="Links"><a target="_blank" href="#" class="Template"></a></span>
    		    </div>
    				  
    		    <div class="loc_Two">
    			   <span class="Name"><img src="../images/flagTwo.gif" alt="Two" />text3</span> 
    			   <span class="Links"><a target="_blank" href="#" class="Template"></a></span> 
    			</div>	  
    		 </td>
          </tr>
       </table>
    </div>
    Last edited by Kor; 03-18-2008 at 04:07 PM. Reason: wrap the code [code][/code]

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    its because you are relying on the index of the childNodes collection which differs in IE and FF. IE does not consider the whitespace between nodes as significant but FF does and hence the difference.

    consider using something like the following

    Code:
    var tds = document.getElementsByTagName('td');
    for ( var i = 0; i < tds.length; i++ ) {
    	var divs = tds[i].getElementsByTagName('div');
    	for ( var j = 0; j < divs.length; j++ ) {
    		var div = divs[j];
    		// do something with div
    	} // endfor j
    } // endfor i
    also currentStyle attribute is IE specific and hence u should use getStyle(div, 'display')

    Code:
    function getStyle(el, at) {
    	if ( window.getComputedStyle ) {
    		return getComputedStyle(el, null).getPropertyValue(at);
    	} else {
    		return el.currentStyle[at];
    	}
    }
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    another method is to check the nodeType
    Code:
    ..
    tagWithLink_ar = document.getElementsByTagName('td');
    var kids=tagWithLink_ar.childNodes, i=0, k;
    while(k=kids[i++]){
    if(k.nodeType==1&&k.nodeName=='DIV'){
    ... do something with the div ...
    }
    }
    ...
    Last edited by Kor; 03-19-2008 at 06:15 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you both!!

    I had found threads about differences between the browser node indexing, yet could never find a resource that spelled them out. And it should have been obvious to me to traverse the TD array for the DIV tag - Doh! Seems like I have mixed results using the childNodes method. Advance DOM references (books and articles) seem to be hard to come by.

    Thank you again -- you guys Rock!


  •  

    Posting Permissions

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