problem traversing through dom

[rohitchawla]

I am trying to get the values of all the child elements from a specific element

function getnodes(elem)
{
    for (i=0; i<elem.childNodes.length; i++)
    {
        alert(elem.childNodes[i].nodeName);
        alert(elem.childNodes[i].nodeType);
 
        if(elem.childNodes[i].nodeType==1)
        {
            alert("hello - "+elem.childNodes[i].nodeName);
            getnodes(elem.childNodes[i]);
        }
        else if(elem.childNodes[i].nodeType==3)
        {
            alert("hi text");
        }
    }
}
window.onload=function(){
    var node=document.getElementById("hello");
    var count=0;
    while(count<5)
    {
        node=node.parentNode;
        count++;
    }
    getnodes(node);
}

this is the html code

[HTML]<div style="padding-left:15px; color:#0f0f0f; background-color:#0099FF"><strong>hello</strong>
<table>
<tr>
<td bgcolor="#CC9966"><iframe id="hello" src="http://www.xyz.com"></iframe></td>
</tr>
</table>
</div> [/HTML]

I am getting problems in the code

when i put my code directly in a new page, it is working fine but when i put it in some page, it gave only 2 alerts and completed without errors
the alerts were for tags <strong> then for #text and it completed
it never went to my table element

[gits]

hi ...

you use a strange method to refer to node ... which node do you really want to refer ... the table? or the div? ... may be it behaves different in IE? i think IE will count the table's tbody too so it may be a problem to use a fixed counter ... give the nodes that should be refered an id or a specific class to identify them reliably ...

kind regards

[rohitchawla]

well i am selecting a node and then traversing to its parent a fixed number of times
like if i select an element div with myid in <span><div><div id = "myid">
and then go up 2 times and ill get span element.
from that span element i want to get all the child nodes
i am back tracking to span from my div element

[rohitchawla]

the main reason i am doing this is to get the css styles of the parent elements
i dont have control of the top element

i just have a script that creates a div and i want to backtrack a fixed number of element and from then on get all the css styles of each child element

[gits]

but as you can see it is not reliable ... so you could climb up recursivly and check what element you currently have refered ... and in case you have the right one then retrieve its styles ... a fixed number seems not to be correct in all cases!?

kind regards

[rohitchawla]

i tried doing that but by traversing up i could only get my current node's sibling's and its parent's sibling's css but not of their children

[gits]

... hmmm i think i don't get it ... you could go the correct node? in case you can, then retrieve its children ... what error do you get ... and what code did you use?

kind regards

[rohitchawla]

well i was not getting any errors in the code
it just stopped at some nodes and didnt go ahead

i tried to make another code but im facing same kind of problem in this code as well
maybe i am not getting it to work recursively

function nodeTrav(elem)
{
    while(elem)
    {
        if(elem.nodeType==1)
        {
            alert("parent node is:"+elem.parentNode.nodeName+" current node is:"+elem.nodeName);
            for(i=0;i<elem.childNodes.length;i++)
            nodeTrav(elem.childNodes[i]);
        }
        elem=elem.nextSibling;
    }
}
var x= document.getElementsByTagName("div")[0];
nodeTrav(x);

[Dasty]

You are using recursive calling of function, but you forgot to declare variable "i" as local variable, so of course code will mess up because all called functions in recursion share the same global "i" variable.

for(i=0;i<elem.childNodes.length;i++)

change it to:

for(var i=0;i<elem.childNodes.length;i++)

always check the variable's scope in recursion!

[rohitchawla]

thanks dasty
i changed the i to var i and atleast i went further deeper in the child elements but i was locked up in an infinite loop in some elements

[Dasty]

thanks dasty
i changed the i to var i and atleast i went further deeper in the child elements but i was locked up in an infinite loop in some elements

Maybe because the recursion is not written right. You got two cycles for the elements on the same level (for & while). Just remove one of them (i removed "for") :D not sure if that caused infinity loop

function nodeTrav(elem)
{
    while(elem)
    {
        if(elem.nodeType==1)
        {
            alert("parent node is:"+elem.parentNode.nodeName+" current node is:"+elem.nodeName);
            for(i=0;i<elem.childNodes.length;i++)
            nodeTrav(elem.childNodes[i]);
        }
        elem=elem.nextSibling;
    }
}
 

INTO:

function nodeTrav(elem)
{
    while(elem)
    {
        if(elem.nodeType==1)
        {
            if (elem.childNodes.length > 0) nodeTrav(elem.firstChild);
        }
        elem=elem.nextSibling;
    }
}
 

If this is not the case, can you post link to your page that is causing problem?

[rohitchawla]

thank you very much dasty

it worked just perfectly
and now i know where i made it wrong

i just invoked every child of an element and used elem=elem.nextSibling which made me go through all the elements over and over again