By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,573 Members | 903 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,573 IT Pros & Developers. It's quick & easy.

problem traversing through dom

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

Expand|Select|Wrap|Line Numbers
  1. function getnodes(elem)
  2. {
  3.     for (i=0; i<elem.childNodes.length; i++)
  4.     {
  5.         alert(elem.childNodes[i].nodeName);
  6.         alert(elem.childNodes[i].nodeType);
  7.  
  8.         if(elem.childNodes[i].nodeType==1)
  9.         {
  10.             alert("hello - "+elem.childNodes[i].nodeName);
  11.             getnodes(elem.childNodes[i]);
  12.         }
  13.         else if(elem.childNodes[i].nodeType==3)
  14.         {
  15.             alert("hi text");
  16.         }
  17.     }
  18. }
  19. window.onload=function(){
  20.     var node=document.getElementById("hello");
  21.     var count=0;
  22.     while(count<5)
  23.     {
  24.         node=node.parentNode;
  25.         count++;
  26.     }
  27.     getnodes(node);
  28. }
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
Feb 1 '08 #1
Share this Question
Share on Google+
11 Replies


gits
Expert Mod 5K+
P: 5,325
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
Feb 1 '08 #2

P: 85
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
Feb 1 '08 #3

P: 85
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
Feb 1 '08 #4

gits
Expert Mod 5K+
P: 5,325
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
Feb 1 '08 #5

P: 85
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
Feb 1 '08 #6

gits
Expert Mod 5K+
P: 5,325
... 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
Feb 1 '08 #7

P: 85
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
Expand|Select|Wrap|Line Numbers
  1. function nodeTrav(elem)
  2. {
  3.     while(elem)
  4.     {
  5.         if(elem.nodeType==1)
  6.         {
  7.             alert("parent node is:"+elem.parentNode.nodeName+" current node is:"+elem.nodeName);
  8.             for(i=0;i<elem.childNodes.length;i++)
  9.             nodeTrav(elem.childNodes[i]);
  10.         }
  11.         elem=elem.nextSibling;
  12.     }
  13. }
  14. var x= document.getElementsByTagName("div")[0];
  15. nodeTrav(x);
Feb 6 '08 #8

Dasty
Expert 100+
P: 101
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.

Expand|Select|Wrap|Line Numbers
  1. for(i=0;i<elem.childNodes.length;i++)
change it to:

Expand|Select|Wrap|Line Numbers
  1. for(var i=0;i<elem.childNodes.length;i++)
always check the variable's scope in recursion!
Feb 6 '08 #9

P: 85
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
Feb 6 '08 #10

Dasty
Expert 100+
P: 101
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

Expand|Select|Wrap|Line Numbers
  1. function nodeTrav(elem)
  2. {
  3.     while(elem)
  4.     {
  5.         if(elem.nodeType==1)
  6.         {
  7.             alert("parent node is:"+elem.parentNode.nodeName+" current node is:"+elem.nodeName);
  8.             for(i=0;i<elem.childNodes.length;i++)
  9.             nodeTrav(elem.childNodes[i]);
  10.         }
  11.         elem=elem.nextSibling;
  12.     }
  13. }
  14.  
INTO:

Expand|Select|Wrap|Line Numbers
  1. function nodeTrav(elem)
  2. {
  3.     while(elem)
  4.     {
  5.         if(elem.nodeType==1)
  6.         {
  7.             if (elem.childNodes.length > 0) nodeTrav(elem.firstChild);
  8.         }
  9.         elem=elem.nextSibling;
  10.     }
  11. }
  12.  
If this is not the case, can you post link to your page that is causing problem?
Feb 6 '08 #11

P: 85
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
Feb 7 '08 #12

Post your reply

Sign in to post your reply or Sign up for a free account.