SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Nov 9, 2001, 23:55 #1
- 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 10, 2001 at 00: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.
-
Nov 10, 2001, 00:35 #2
- 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 funAny 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 rantingLast edited by Maelstrom; Nov 10, 2001 at 01: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.
-
Nov 13, 2001, 20:16 #3
- 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/
aDogModerator at www.javascriptcity.com/forums/
-
Nov 13, 2001, 20:19 #4
- 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!
aDogModerator at www.javascriptcity.com/forums/
-
Nov 13, 2001, 21:13 #5
- 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 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).
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.
-
Nov 13, 2001, 21:17 #6
- 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!
aDogI never though to try it like that. Thanx
ideas ideas ideasMaelstrom 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.
-
Nov 13, 2001, 22:25 #7
- 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
aDogModerator at www.javascriptcity.com/forums/
-
Nov 13, 2001, 22:33 #8
- 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.
aDogModerator at www.javascriptcity.com/forums/
-
Nov 13, 2001, 22:41 #9
- 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
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 againMaelstrom 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