Topic awaiting preservation: node, childNodes, I'm confused (Page 1 of 1)

How would I reference

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

every level is an additional child node:

<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 ]:.

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,

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.

<foo><bar>baz</bar></foo>

In all browsers:

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

<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"};

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 ]:.

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