Navigating the IE vs Netscape DOM

[Maelstrom]

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.

[Maelstrom]

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

[Arielladog]

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

[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

[Maelstrom]

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]

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

[Arielladog]

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

[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

[Maelstrom]

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