Closed Thread Icon

Topic awaiting preservation: node, childNodes, I'm confused Pages that link to <a href="https://ozoneasylum.com/backlink?for=27060" title="Pages that link to Topic awaiting preservation: node, childNodes, I&amp;#039;m confused" rel="nofollow" >Topic awaiting preservation: node, childNodes, I&#039;m confused\

 
Author Thread
redroy
Paranoid (IV) Inmate

From: 1393
Insane since: Dec 2003

posted posted 11-28-2005 20:15

How would I reference

code:
<ul id="nav"><li><ul><li><ul><li>

that second nested li via nodes? I'm using document.getElementById("nav").childNodes[i] to reference the first level, but I can't figure that darn thing out... basically I'm trying to get http://www.alistapart.com/articles/horizdropdowns/ to have a third level dropdown. I've got the css and everything working fine in mozilla but that javascript IE hack isn't working because the above (I think). Thanks!



(Edited by redroy on 11-28-2005 20:42)

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 11-28-2005 21:37

every level is an additional child node:

code:
<ul id="nav"> <-- document.getElementById('nav');
  <li> <-- document.getElementById('nav').childNode[0] (if no space creating a text node)
     <ul> <-- document.getElementById('nav').childNode[0].childNode[0]
        <li> <--- document.getElementById('nav').childNode[0].childNode[0].childNode[0]





.:[ Never resist a perfect moment ]:.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 11-28-2005 22:06

I haven't really look at your script but why don't you attach some events on all the children UL of #nav on load of the page ? I did that on my site. Well I attach the events to their parent LI but the result is mostly the same.

Hope that helps,

liorean
Bipolar (III) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

posted posted 11-28-2005 22:09

Yeah, that's one problem you need to be wary of whan working with the childNodes nodelist in particular. In modern browsers, all text nodes, including just whitespace, are part of the childNodes nodelist. In Internet Explorer, by comparison, whitespace nodes aren't in the nodelist.

code:
<foo><bar>baz</bar></foo>


In all browsers:

Node:Element foo
> Node:Element bar
> > Node:Text 'baz'

code:
<foo>
    <bar>
        baz
    </bar>
</foo>


In modern browsers:

Node:Element foo
> Node:Text '\n '
> Node:Element bar
> > Node:Text '\n baz\n '
> Node:Text '\n '

In iew:

Node:Element foo
> Node:Element bar
> > Node:Text 'baz '




Similar differences in behavior can be seen with the firstChild, lastChild, nextSibling, previousSibling properties as well.

--
var Liorean = {
abode: "http://web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 11-28-2005 23:53

BTW It sometimes helps to take a look at the DOM Inspector when trying to figure these things out. It gives you a nice tree diagram of all the nodes in your document (at least in regards to Firefox)



.:[ Never resist a perfect moment ]:.

redroy
Paranoid (IV) Inmate

From: 1393
Insane since: Dec 2003

posted posted 11-29-2005 21:02

Excellent, just what I needed poi. Thanks for the help everyone!

« BackwardsOnwards »

Show Forum Drop Down Menu