FireFox – elem.nextSibling.tagName = ‘Undefined’

WOW, usually my preference for the way things work in a browser is the “Way of FireFox“. Like the boxModel, I prefer the box to stay the same size. If I set it to 100px wide, and then add 10px of padding, I don’t like that IE makes the actual size of the box 120px wide. But now in FireFox, I have found that the JavaScript function nextSibling to include “whitespace” as a TextNode.

This means, if you have code like this:
<div id=’first’>Text here</div>
<div id=’second’>More Text</div>

In FireFox: document.getElementById(”first”).nextSibling.tagName would return ‘undefined’. This is because FireFox sees the whitespace as a TextNode, but IE will see the nextSibling and return ‘div’.

Here is a little work around for the FireFox “WAY”:

function myFunction() {
vSibling = document.getElementById("first").nextSibling
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode vSibling = vSibling.nextSibling;
};


Node Type Chart:

Value	Node Type
1	ELEMENT_NODE
2	ATTRIBUTE_NODE
3	TEXT_NODE

NodeType chart Complete List -> javascriptkit.com