View Full Version : DOM Difference

08-09-2004, 07:07 PM
Hey everybody,
I am having a problem here - I get two different result from NS and IE ( to be exptected I guess ). I am using DOM so I expect to work on both browsers but I am wrong. Below is a sample - What I am trying to do is get the next row of a table when an item in the the previous row was clicked in one of the cells - yeah... Anyway, IE works as I anticipated but NS is tripping on it. Is there a problem with NS DOM nextSibling? The problem part is in red and NS returns an "undefined."

Thanks in advanced.

<title>Master Shake</title>
<table id="table1" border=1>
<tr id="TR1">
<td id="TD1">bla1</td>
<td id="TD2">bla2<img id="IMG1" src="chevrondown.jpg"></td>
<td id="TD3">bla3</td>
<tr id="TR2">

obj= document.getElementById("IMG1");
objParent = obj.parentNode.parentNode
objParSibling = objParent.nextSibling;

08-09-2004, 08:10 PM
Whitespace nodes are included in Mozilla's DOM. Perhaps nextSibling is a whitespace node instead of an element.

08-09-2004, 08:48 PM
Ok - but why would it return an "undefined" value? As if it is returning null. Is TR considered a whitespace node.

Is there a better way of tranversing through the DOM.

08-09-2004, 09:39 PM
The "id" property is not defined on a whitespace node, therefore it is "undefined".

08-13-2004, 04:14 AM
You can go two ways - well three ways, but the third is ugly:

1 - don't rely on sibling relationships - look for elements using getElementsByTagName - this is very simple and effective, although slightly less efficient overall

2 - clean the whitespace before you start - Alex Vincent wrote a function for that: http://www.codingforums.com/showthread.php?t=7028 This works admirably to normalise any DOM, but don't allow it to run in Mac/IE5, because in that browser HTML structures become unstable when stripped of whitespace (weird rendering bugs start happening)

3 - every time you look for a sibling node you can check if it's a text node using "nodeName" - a text node returns "#text" - if it is then you can deem the node you want to be either the next or previous sibling, depending on which way you're going. This is tedious and will drive you insane ...

08-13-2004, 05:31 AM
You could always prototype your own navigation properties:

Node.prototype.__defineGetter__("previousElementSibling", function() {
if (!this.previousSibling) // firstChild
return null;
if (this.previousSibling.nodeType == Node.ELEMENT_NODE)
return this.previousSibling;
return this.previousSibling.previousElementSibling;

Node.prototype.__defineGetter__("nextElementSibling", function() {
if (!this.nextSibling) // lastChild
return null;
if (this.nextSibling.nodeType == Node.ELEMENT_NODE)
return this.nextSibling;
return this.nextSibling.nextElementSibling;

Node.prototype.__defineGetter__("firstElementChild", function() {
if (!this.hasChildNodes()) // empty node
return null;
return (this.firstChild.nodeType == Node.ELEMENT_NODE) ? this.firstChild : this.firstChild.nextElementSibling;

Node.prototype.__defineGetter__("lastElementChild", function() {
if (!this.hasChildNodes()) // empty node
return null;
return (this.lastChild.nodeType == Node.ELEMENT_NODE) ? this.lastChild : this.lastChild.previousElementSibling;

These aren't tested, but they should provide a "more-expected" traversal in Mozilla.

08-16-2004, 08:11 PM
Thanks for all your help-
But I don't understand how whitespace nodes are created or how I have a whitespace node? Can someone help me get an understanding of this?


08-16-2004, 10:04 PM
Whitespace nodes are caused by whitespace in your source code... go figure. For instance:

<p>hello world</p>

The indentation before the <p> is actually a node of it's own.

08-24-2004, 11:10 PM
... as is the newline after the </p>.

I don't see why you simply don't check the node type. It's a rather simple process:

08-25-2004, 01:02 AM
I have had quite a few problems with mozilla's white space.

Mozilla creates lots of white space while the user is editing an editable document. Like everytime they press return . . . . :p

You could just check the node name as suggested, that works well in most cases. Removing white space is an option if you are wanting to avoid some errors that mozilla 1.7+ has with its editor.

I ended up removing white space on the fly as it enters my editable document.