SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigating the IE vs Netscape DOM

    I just made an observationg that troubled me. I guess because IE once again has its own variations this works or Netscape isn't following the dom I don't know which but I was hoping this type of navigation was going to be dom compliant with the newest versions of Netscape

    If you have a table with the id "bob" (I like dumb names sometimes) you should be able to navigate down the table via bob.firstChild.childNodes[1].innerHTML. This does not work in netscape but does work in IE. I find this troubling because of how much easier things would have been if it worked in both. I really just wish the browsers would become equal.

    The dom specification is here (outdated I believe)
    http://www.w3.org/TR/1999/CR-DOM-Lev...roduction.html

    Thats the specification and how it supposedly works. I am going to keep playing and figure out if maybe Netscape 'changed' it. for an example try this

    An example of how it works:
    <table width="75%" border="1" id="bob">
    <tr>
    <td>row 1 col1</td>
    <td>row1col2</td>
    </tr>
    <tr>
    <td>row2col1</td>
    <td>row2col2</td>
    </tr>
    <tr>
    <td>row3col1</td>
    <td>row3col2</td>
    </tr>
    <tr>
    <td>row4col1</td>
    <td>row4col2</td>
    </tr>
    </table>

    To navigate using the dom you should be able to do something like this

    (this part goes in the head with an onload from the body)

    function test(){
    alert(bob.firstChild.innerHTML)
    }

    that will show you the whole table. This nice thing about navigation this way is the removal of the need to id everything. So I could very easily do

    alert(bob.firstChild.childNodes[0].childNodes[0].innerHTML)

    This will show you row1col2. DHTML affects (such as changing background in table elements) would be more convenient (I would think anyways)

    Anyways just ranting sorry to waste anyones time.
    Last edited by Maelstrom; Nov 9, 2001 at 23:15.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  2. #2
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey look responding to my own thread. Well I figured it out. I don't like the fact that they are different but it works in both.

    First off the firstChild node ref doesn't work. However childNodes[i] works. But of course there is still a difference. IE refers to them similarly to array starting with 0 Netscape starts at 1. Oh and of course starting with the ID name it only works in Netscape when referencing with document.getElementById(). So using the id="bob" example above.

    if (document.all){
    alert(document.getElementById('bob').firstChild.childNodes[0].childNodes[0].innerHTML);
    }else{
    alert(document.getElementById('bob').childNodes[1].childNodes[0].childNodes[1].innerHTML);
    }
    }

    This will reference the same node in the table in both browsers. Damn differences in browsers. Anyway that was fun Any comments or useful tips would be welcome.

    HOWEVER (I am adding this about an hour later) for some reason netscape doesn't reference past the second node. So I can't get it to reference at all row2 col1 which should be

    alert(document.getElementById('bob').childNodes[1].childNodes[1].childNodes[2].innerHTML);

    Or anything 'beneath' that.

    Another anomoly to note is that when referencing past the tables reference 'document.getElementById('bob').childNodes[1].childNodes[0] <------ Is suddenly referenced like an array. Unline every other node reference within the dom reference.

    Arg. I am done ranting
    Last edited by Maelstrom; Nov 10, 2001 at 00:16.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  3. #3
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    There are a few problems with your code (I can go into each of them):

    First, row1col1 should be:

    document.getElementById('bob').childNodes[0].childNodes[0]
    or:
    document.getElementById('bob').childNodes[0].firstChild
    or:
    document.getElementById('bob').childNodes[0].firstChild

    and MANY other ways


    As with an array, the first one is accessed by an index of "0" However, Netscape and IE (Netscape more so) inserts "spurious text nodes" into the HTML code. In other words, it thinks there's a text node between your <table> and first <tr>, making that the first child of <table>.

    Secondly, row2col1 should be:

    document.getElementById('bob').childNodes[1].firstChild

    Now, another thing to take into account is that with tables, some times the browser insert a <tbody> in there (I know IE 6 does).

    Anyway, I know it sounds like a lot to deal with, but I have a tutorial covering a lot of this (part 4 deals with W3C DOM, which is what you're interested in, but the whole thing may be worthwhile to use). However, the tutorial is kind of rough and needs polishing and I was hoping to trasnport some of the info (the info is good) into a better form and a more concise tutorial(s) for SitePoint.

    http://www.pageresource.com/dhtml/ryan/

    aDog

  4. #4
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    P.S. - not covered in tutorial, but a way to overcome this is something like:

    alert(document.getElementById('bob').getElementsByTagName("tr")[0].getElementsByTagName("td")[0].innerHTML);

    tedious, yes! But it works!

    aDog

  5. #5
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Secondly, row2col1 should be:

    document.getElementById('bob').childNodes[1].firstChild
    I did realize that was where it should reference. I just couldn't figure out the discrepency between IE and Netscape.

    Now, another thing to take into account is that with tables, some times the browser insert a <tbody> in there (I know IE 6 does).
    That explains the difference. And why document.getElementById('bob').childNodes[1] was the only way to reference the first node. because tbody was implemented when I didn't have it in the table code in the first place.

    It isn't a lot to deal with per se. Just an example of small discrepencies. All of that code I tried actually using within a table and couldn't figure out how to get them to mesh with each other. I will try the tbody and see if that works to make the two pieces of code work together.

    Thanx. As I said in my pm to you I am always looking for advanced tutorials. Expecially when dealing with the newer implementations.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  6. #6
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Arielladog
    P.S. - not covered in tutorial, but a way to overcome this is something like:

    alert(document.getElementById('bob').getElementsByTagName("tr")[0].getElementsByTagName("td")[0].innerHTML);

    tedious, yes! But it works!

    aDog
    haha Very tedious I never though to try it like that. Thanx

    ideas ideas ideas
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  7. #7
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Hopefully I'll get some time to write a good article for SitePoint, but until then, you could just use the other tutorial I wrote.

    I love writing, but it does take a lot of time. I just need someone to help with some graphics for my idea and I might actually start working on in

    aDog

  8. #8
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, in general, sometimes, instead of childNodes[i], you might wanna use:

    getElementsByTagName(*)[i]

    Just making a more generalization form the code I gave you.

    aDog

  9. #9
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Arielladog
    Also, in general, sometimes, instead of childNodes[i], you might wanna use:

    getElementsByTagName(*)[i]

    Just making a more generalization form the code I gave you.

    aDog
    I read the other artical and I am impressed. Another artical for advanced tutorials. First your OOP with Javascript and now the DOM navigation. I never even though to try to use

    getElementByTagName(n)[i] haha But that helps a lot. I always like to know little tricks to navigate around the document. Thanx for you help and I hope you keep writing. At some point I hope to do some writing, I have always enjoyed writing articals , I used to write them for a couple of newletter back home (fitness based though).

    Maybe when I get more experience

    Thanx again
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •