lastChild & NN

[mothra]

I'm having some problems that I believe are related to the lastChild property. The browsers I'm testing with are IE6 & NN7.

I wrote a simple javascript to hide/show a DIV, it works fine in IE, but not in NN. While debugging I added a temporary ID to the DIV I wanted to show and used getElementById - this worked, leading me to believe there is an issue with lastChild. My other thought is that there is a problem with the way I'm passing the element into the function.

Here is a small snippet of the layout & code, the css is not shown but as I mentioned it does work when I use the DIV ID so I assume the css is ok... I don't know how to keep my indented formatting, sorry about the readability.

<div class="menuHead" onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Main 1
<div class="subMenu" id="menu2">
<div class="menuItem" onmouseover="menuItemOver(this)" onmouseout="menuItem(this)">Item 1</div>
<div class="menuItem" onmouseover="menuItemOver(this)" onmouseout="menuItem(this)">Item 2</div>
<div class="menuItem" onmouseover="menuItemOver(this)" onmouseout="menuItem(this)">Item 3</div>
</div>
</div>


...and the script

function showMenu(eID){
eID.lastChild.className = "subMenuVisible";
//var shat = document.getElementById('menu2');
//shat.className = "subMenuVisible";
}

function hideMenu(eID){
eID.lastChild.className = "subMenu";
//var shat = document.getElementById('menu2');
//shat.className = "subMenu";
}


please help!

[jkd]

Try alerting "lastChild". It may be a text node.

[mothra]

I have found some strange results:

I was attempting to use lastChild because it was giving me the results I wanted in IE, even though I wanted a reference to what I considered to be the *first* child, me not being a web programmer I chalked it up to not knowing what I'm doing and went with it.

This does not work in NN though. So I try firstChild out of curiosity and it still does not work, no errors nothing. My next move was to use the childNodes collection directly. The first thing I did was to alert the length property in both IE & NN. IE reports 2 nodes, while NN reports 3.

What I ended up doing that *did* work in both browsers is to use the collection directly, apparently element [1] is what I needed. This brings up a couple of questions...

1) Is this variation on such a basic level to be expected, I would think if I have 3 nodes, I have 3 nodes period. Not 2, or some other number!

2) Are collections in javascript zero based? I assume so, but the funny thing is that I would expect element [0] to be the first child that I was after, not element [1]. Maybe [0] is a text node that you were referring to?

M.

[jkd]

Indentation will cause the creation of TextNodes in Gecko browsers, as that is what is going on.


<ul>
<li>bla</li>
</ul>


ul.firstChild happens to be the 4-space indentation represented as a TextNode, instead of an HTMLLiElement, which happens to be childNodes.item(1).

[mothra]

thanks for clearing that up. seems a little odd.

[brothercake]

Get a copy of mozilla - then go "Tools > Web Development > DOM Inspector" - it's all much easier when you can see what's going on :)

[mothra]

What exactly is Mozilla? Just from lurking and reading it sounds like the engine that NN uses?

I'm still sort of un clear on why the element I was referencing is element[1] of the childNodes collection in BOTH browsers, when they report a different count of nodes.:confused:

[Roy Sinclair]

Originally posted by mothra
What exactly is Mozilla? Just from lurking and reading it sounds like the engine that NN uses?



http://www.mozill.org/ -- Link to their web site.

You're pretty close, Mozilla is the open source browser project that was started by Netscape corporation. Netscape 6.x and later releases were indeed based on that browser. The Mozilla version of the browser has always been cleaner than the Netscape branded version, doesn't come loaded down with all the excess (IMO) baggage that Netscape releases come with and doesn't try to run every other click you make through the Netscape.com website (actually that's an exageration but it always seemed that way to me).

Check through the Mozilla site for more information.

[brothercake]

You are gonna have to expect this variation a lot. What I generally do is look for the node by the reference I think it "ought" to have, and then query it's tagName - if it returns undefined then it's a text node, and since it's a tab before the element, then the node you want is the text node's nextSibling:

node = element.firstChild;
if(typeof node.tagName=='undefined')
{
node = node.nextSibling;
}

You can also query the nodeName, and iirc a text node returns "#text" where a tag would return, for example "div" (except in Opera 7.2 which returns "html:div")

[mothra]

Thanks guys. Learning more by the minute, I should be completely up to speed in a couple more days :)!

M.

[brothercake]

Originally posted by mothra
I should be completely up to speed in a couple more days :)!M.
You reckon? I've been doing this for three years and I still feel like I know nothing ;)

Incidentally, what I said - "if it returns undefined then it's a text node" - now I think again that's not necessarily true - it might be a comment; they're nodes as well, so I generally avoid having them inside groups of elements I want to manipulate like this.

[mothra]

I meant that sarcastically actually!