Question

I’m trying to write javascript to find page elements relative to a given element by using parentNode, firstChild, nextSibling, childNodes[], and so on. Firefox messes this up by inserting text nodes between each html element. I’ve read that I can defeat this by removing all whitespace between elements but I’ve tried that and it doesn’t doesn’t work. Is there a way to write code that works on all modern browsers?

For example:

<div id='parent'><p id='child'>Hello world</p></div> 

In IE parent.firstChild is child but in Firefix it’s a phantom Text element.

Answer 1

I have a workaround. You can insert the two methods below:

Element.prototype.fChild = function(){     var firstChild = this.firstChild;     while(firstChild != null && firstChild.nodeType === 3){         firstChild = firstChild.nextSibling;     }     return firstChild;  }  Element.prototype.nSibling = function(){     var nextSibling = this.nextSibling;     while(nextSibling != null && nextSibling.nodeType === 3){         nextSibling = nextSibling.nextSibling;     }     return nextSibling;  } 

and you can now use:

document.getElementById('parent').fChild(); document.getElementById('parent').nSibling(); 

instead of:

 document.getElementById('parent').firstChild;  document.getElementById('parent').nextSibling;