className (ie vs moz)

[tgh003]

I am trying to retrieve a the class name of a parentnode.

In Firefox this works:
document.getElementById('foo').parentNode.className

returns the class name of the parent element. In IE it doesnt work.

What is the correct syntax for IE?

Any help is much appreciated.
Thx.

 

[RobG]

I am trying to retrieve a the class name of a parentnode.

In Firefox this works:
document.getElementById('foo').parentNode.className

returns the class name of the parent element. In IE it doesnt work.

What is the correct syntax for IE?

Can't tell what your issue is. The following works for me in IE 6
and Firefox:

<div class="blah"><span id="foo">foo</span></div>

<script type="text/javascript">
alert(document.getElementById('foo').parentNode.className);
</script>

 

[Matt Kruse]

In Firefox this works:
document.getElementById('foo').parentNode.className
returns the class name of the parent element. In IE it doesnt work.

Most likely, the 'parentNode' of the element is not the same in each
browser.

Try
alert(document.getElementById('foo').parentNode.tagName)
or
alert(document.getElementById('foo').parentNode.outerHTML)

to see what the browser is really pointing to.

 

[RobB]

I am trying to retrieve a the class name of a parentnode.

In Firefox this works:
document.getElementById('foo').parentNode.className

returns the class name of the parent element. In IE it doesnt work.

What is the correct syntax for IE?

Any help is much appreciated.
Thx.

function getAncestorClass(node)
{
var cN;
while (node = node.parentNode)
if (cN = node.className)
return cN;
return null;
}

getAncestorClass(document.getElementById('foo'));

 

[Martin Honnen]

I am trying to retrieve a the class name of a parentnode.

In Firefox this works:
document.getElementById('foo').parentNode.className

returns the class name of the parent element. In IE it doesnt work.

Element nodes have a className property in IE 4 and later, and nodes
have a parentNode property in IE 5 and later. document.getElementById is
supported in IE 5 and later too so your expression should work with IE 5
and later.
When you say "it doesn't work in IE" what exactly happens, do you get a
script error, if so which one exactly?

 

[tgh003]

thanks for the replies

your right it should work but the value is nothing. like null. I dont
even get undefined but just blank.

I should say I am using the createElement to create the nodes and use
..className = "foo" to set the class

Displays properly but i cannot retrieve the value. strange.

 

[tgh003]

Matt,

You were exacly right. IE has a different parentNode than Firefox.
What a POS - I am really starting to hate javascript because of these
issues.

Thx!

 

[Matt Kruse]

You were exacly right. IE has a different parentNode than Firefox.
What a POS - I am really starting to hate javascript because of these
issues.

Don't hate javascript - it's just the language you're using to access the
browser's DOM.
DOMs can be different. You just have to program appropriately.

If you have an <INPUT> and you expect its parent to be a <TD>, don't rely on
that. Instead, walk up the parentNode chain and stop when you get to a <TD>
element. That way, you won't be dependent on a particular browser's decision
to insert assumed objects or rearrange when you didn't expect it to.

 

[RobG]

Matt,

You were exacly right. IE has a different parentNode than Firefox.
What a POS - I am really starting to hate javascript because of these
issues.

Don't blame JavaScript, it is just a scripting language - your issue
is with the different way various browsers implement the DOM.

It is often risky to depend on parentNode/childNode relationships and
frequently search or iterative techniques are required to ensure the
'correct' descendant/ancestor is recognised, e.g.

<table>
<tr>
<td onclick="alert(this.parentNode.parentNode)">click me</td>
</tr>
</table>

Will report 'TBODY', not 'TABLE'. If the table was the target, it
may be better to use a function that goes up the parents until the
table is found.

Try this in Firefox and then IE:

<script type="text/javascript">
function doClick(x){
var s = x.nextSibling;
alert('nextSibling is : ' + ((s)? s.nodeName : 'nothing' ));
}
</script>
<ul>
<li onclick="doClick(this)">click me</li>
<li onclick="doClick(this)">click me</li>
</ul>


Try posting a bit of the HTML you are having trouble with.