className (ie vs moz)

Discussion in 'Javascript' started by tgh003@gmail.com, May 4, 2005.

  1. Guest

    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.
    , May 4, 2005
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > 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>



    --
    Rob
    RobG, May 4, 2005
    #2
    1. Advertising

  3. Matt Kruse Guest

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

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    Matt Kruse, May 4, 2005
    #3
  4. RobB Guest

    wrote:
    > 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'));
    RobB, May 4, 2005
    #4
  5. wrote:

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

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, May 4, 2005
    #5
  6. Guest

    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.
    , May 5, 2005
    #6
  7. Guest

    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!
    , May 5, 2005
    #7
  8. Matt Kruse Guest

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

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    Matt Kruse, May 5, 2005
    #8
  9. RobG Guest

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

    --
    Rob
    RobG, May 5, 2005
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Terry
    Replies:
    1
    Views:
    354
    mark | r
    Jan 7, 2004
  2. mark | r
    Replies:
    3
    Views:
    378
  3. Oliver S.

    classname::classname a type ?

    Oliver S., Sep 11, 2003, in forum: C++
    Replies:
    1
    Views:
    493
    White Wolf
    Sep 11, 2003
  4. Hongzheng Wang
    Replies:
    32
    Views:
    858
  5. Ante Perkovic

    CSS: "tagname.classname" or ".classname"

    Ante Perkovic, Dec 22, 2003, in forum: Javascript
    Replies:
    2
    Views:
    97
Loading...

Share This Page