Firefox error with getElementsByTagName()

[michellejg]

Hi

I've been getting a "has no properties" error within Firefox for the following code. It's loads an XML document, and then pulls out the data from various nodes and further on, plugs them into some generated DOM elements to appear all pretty on the screen. Woo!

Anyways, here's the code:

    function loadXML()
    {
        // If browser is IE, load XMLDOM - else load for Firefox etc
        if (window.ActiveXObject)
        {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async=false;
            xmlDoc.load("humm2.xml");
            getQuestionData(questionNumber, currentNode);
        }
        else if (document.implementation && document.implementation.createDocument)
        {
            xmlDoc= document.implementation.createDocument("","",null);
            xmlDoc.load("humm2.xml");
            xmlDoc.onload=getQuestionData(questionNumber, currentNode);
        }
        else
        {
            alert('Your browser cannot handle this script');
        }
    }

    // Retrieve the question data from the XML file
    function getQuestionData(qNumber, currNode)
    {   
        doc = xmlDoc.documentElement;
        alert(doc.length);
        var questionData;

        var answerArray = new Array();

        if(doc.getElementsByTagName("question")[currNode].attributes[0].value == qNumber)
        {
            questionData = doc.getElementsByTagName("questioncontent")[currNode].firstChild.nodeValue;
                       
            var numOfAnswers = doc.getElementsByTagName("answercontent")[currNode].childNodes.length;
            for(var j = 0; j < numOfAnswers; j++)
            {
                answerArray[j] = doc.getElementsByTagName("answercontent")[currNode].childNodes[j].childNodes[0].nodeValue;
            }
        }
        
        createPageContent(questionData, answerArray, currNode);
        
        // Increment the question number if it isn't the last question in the XML document
        if(qNumber < doc.childNodes.length)
        {
            questionNumber = qNumber + 1;
            currentNode = currNode + 1;
        }
    }

The bolded line is where Firefox is falling over. I'm not sure why this is happening. Maybe because it's calling from an XML document, and not the actual document object? (I may screw up terminology here - I'm still a noob in the javascript world )

I've searched around and the only examples I can find are code samples for document.getElementsByTagName(), nothing to do with XML.

This script works perfectly in IE, by the way.

Any clues?

Cheers,
Mish

[Kor]

IE and FF count in different ways the childNodes. FF (DOM compliant mode) counts even the possible textNodes (the gaps between tags) while IE counts only some of them.

To avoid this, use one the solutions:
1. use getElementsByTagName() rather than childNodes[]
2. use a while loop and nodeType attribute to check whether a child is a tag or a text
3. use a "gaps cleaner" code onload :

var notWhitespace = /\S/;
function cleanWhitespace(node) {
  for (var x = 0; x < node.childNodes.length; x++) {
    var childNode = node.childNodes[x]
    if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
// that is, if it's a whitespace text node
      node.removeChild(node.childNodes[x])
      x--
    }
    if (childNode.nodeType == 1) {
// elements can have text child nodes of their own
      cleanWhitespace(childNode)
    }
  }
}
}

[nicholasyonko]

You function above saved me tons of headache. Thank you.