Traversing the DOM tree based on 2 tags

[dproberts]

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:

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>

[shyam]

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

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')

function getStyle(el, at) {
if ( window.getComputedStyle ) {
return getComputedStyle(el, null).getPropertyValue(at);
} else {
return el.currentStyle[at];
}
}

[Kor]

another method is to check the nodeType

..
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 ...
}
}
...

[dproberts]

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!