getting UL node value nested inside UL

[allida77]

I am having problems trying to get a UL node nested inside a UL. I have the following html:

<ul onClick="testing(this);">
	<li>Vowels
		<ul>
			<li>A</li> 
			<li>E</li> 
			<li>I</li> 
			<li>O</li> 
		</ul>
	</li> 
	....
	...
	...
</ul>

This can get nested 2-3 levels but for now I cant even get the nested UL node with one nested level. I have tried

function testing(e){
node=e.firstChild.firstChild
alert(node.nodeName)

but it returns "#text" and not the UL node. I usually do this with DIVs with no problem but I though I would try to use ULs this time but I am not having much luck. How can I get the value of this nested UL?

[sad69]

Sometimes there is a TextNode in front and that is a space. Do a .childNodes.length and see how many children there are. If there are at least 2, then you know you want the second child or something.

I've never done the UL thing with DOM, but I don't foresee there being a problem with it.

Good luck,
Sadiq.

[brothercake]

Mozilla counts whitespace as text nodes.

You've got two ways of dealing with that - you can either strip whitespace out of the list, or you can use getElementsByTagName. The latter would be easier, like this:

function testing(obj)
{
    node=obj.getElementsByTagName("ul")[0];
    alert(node.nodeName);
}

(btw - don't use "e" for custom object references - what if you want the event argument later on?)

Be aware that Opera 7.5 in XHTML mode will return "html:ul" rather than simply "ul". You might be able to use node.localName instead, but (iirc - may be wrong) that doesn't work in Opera 7.2. What I do is parse the nodeName manually, using this generic method:

//convert node name for O7 in XHTML mode
function convertNodeName(nName)
{
	return nName.replace(/html[:]+/,'');
};

It actually removes multiple colons ... because ... a created element in Opera 7.5 in XHTML mode will come back as "html::ul"

If you go for the whitespace-stripping solution, watch out for mac/ie5 - sometimes HTML structures which are stripped of whitespace become unstable in that browser - you may lose margins, or items may collapse together and overlap. But anyway Alex wrote a method for that - http://www.codingforum.net/showthrea...&threadid=7028

[allida77]

Thanks for the help.I went with the easy route and am now able to get things going. I will have to try out that strip method sometime, it seems pretty nifty.

[brothercake]

Yeah it is very useful - it gives you predictable DOM that's the same in every browser

btw - there is a third way, but the most tedious - you can look through a node list recursively and build a custom array, ignoring everything that returns a nodeName of "#text"