JavaScript DOM Child Node navigator to fix FireFox childNodes problem.

While working on DOM tree navigation using JavaScript, I realized that FireFox browser has a nasty problem of treating empty white spaces as text nodes. If your page size is very big, it makes physically impossible for you to track down a particular type of DOM Node using the childNodes function in JavaScript.

DOM Level 1 provides functions to navigate through the DOM Node tree such as, parentNode, childNodes, firstChild, lastChild etc. All these functions works fine in all the the browsers but sometime childNodes function gives inconsistent results in FireFox because it treats empty spaces as Text Nodes. For that reason I have created an easy to use Child Nodes navigation function which allows you to choose the type of nodes you want to select directly without navigating through rest of the Child Nodes.

This function getChildNode() comes in handy for navigating to a particular type of child node under an element. It takes three arguments, first is an object to the HTML DOM Element, second is the DOM Node Type under that Element and the third one is the index of the Node type in the child nodes list. You can call the getChildNode() function from your JavaScript code to access the DOM Nodes. For example if you want only the DOM Element Node, you can use this function to get the first (index starts at 0) DOM Element Node as follows:

var myNode = getChildNode(element, Nodes.ELEMENT_NODE, 0)

The getChildNodeCount() function can be used to count any particular type of DOM Nodes under any element and can be used as shown in example below to navigate through all the DOM Element Nodes under the HTML Body element:

var myBody = document.body;
for (i = 0; i < getChildNodeCount(myBody, Nodes.ELEMENT_NODE); i++) {
    var ElementNode = getChildNode(myBody, Nodes.ELEMENT_NODE, i)
    alert(ElementNode.innerText);
}

JavaScript Code:
<script type="text/javascript">
function getChildNode(node, childType, index) {
    var childnode;
    var childnode_index = 0;
    var children = node.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeType == childType) {
            childnode = children[i];
            if (childnode_index == index) break;
            else childnode_index++;
        }
    }
    return childnode;
}
function getChildNodeCount(node, childType) {
    var count = 0;
    var children = node.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeType == childType)
            count++;
    }
    return count;
}
var Nodes =
{
      ELEMENT_NODE                :  1,
      ATTRIBUTE_NODE              :  2,
      TEXT_NODE                   :  3,
      CDATA_SECTION_NODE          :  4,
      ENTITY_REFERENCE_NODE       :  5,
      ENTITY_NODE                 :  6,
      PROCESSING_INSTRUCTION_NODE :  7,
      COMMENT_NODE                :  8,
      DOCUMENT_NODE               :  9,
      DOCUMENT_TYPE_NODE          : 10,
      DOCUMENT_FRAGMENT_NODE      : 11,
      NOTATION_NODE               : 12
};
</script>

Technorati Tags: JavaScript