Error with XPath. Node cannot be used in a documen

Question

I am trying to parse an xml document with XPath.

The script works just fine on chrome, but gives me the following error:

WrongDocumentError: Node cannot be used in a document other than the one in which it was created

The code in question is the following:

function StringToXML(oString) {
    //code for IE
    if (window.ActiveXObject) {
        var oXML = new ActiveXObject("Microsoft.XMLDOM"); oXML.loadXML(oString);
        return oXML;
    }
    // code for Chrome, Safari, Firefox, Opera, etc.
    else {
        return (new DOMParser()).parseFromString(oString, "text/xml");
    }
}

function parseGpx(xmlText){
    var pointArray = new Array();
    var $xml = StringToXML(xmlText);
    var path = "//*[local-name()='trkpt']";
    var paragraphCount = document.evaluate(path, $xml, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null );
    //this last line is what is causing the problems.

I am wondering what could be the problem, this are the results of my console.logs:

console.log(xmlText):

<?xml version="1.0" encoding="iso-8859-1"?>
<gpx version="1.0" creator="http://www.bikecityguide.org"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://www.topografix.com/GPX/1/0"
    xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd">
    <name></name>
    <desc></desc>
    <time>2013-10-10T17:54:09Z</time>
    <bounds minlat="47.068677710511" minlon="15.423460100401" maxlat="47.074318908518" maxlon="15.431141947021"/>
    <trk>
        <trkseg>
            <trkpt lon= "15.429682825318" lat="47.074318908518" />
            <trkpt lon= "15.428824518436" lat="47.071922203043" />
            <trkpt lon= "15.424404237975" lat="47.071366853467" />
            <trkpt lon= "15.423460100401" lat="47.068677710511" />
            <trkpt lon= "15.427107904664" lat="47.068970015231" />
            <trkpt lon= "15.428781603085" lat="47.070957644813" />
            <trkpt lon= "15.430755708927" lat="47.071016103385" />
            <trkpt lon= "15.430326555481" lat="47.072068346707" />
            <trkpt lon= "15.431141947021" lat="47.072068346707" />
            <trkpt lon= "15.430884454953" lat="47.074114315917" />
        </trkseg>
    </trk>
<wpt lon="15.429682825318" lat="47.074318908518"></wpt>
<wpt lon="15.428824518436" lat="47.071922203043"></wpt>
<wpt lon="15.424404237975" lat="47.071366853467"></wpt>
<wpt lon="15.423460100401" lat="47.068677710511"></wpt>
<wpt lon="15.427107904664" lat="47.068970015231"></wpt>
<wpt lon="15.428781603085" lat="47.070957644813"></wpt>
<wpt lon="15.430755708927" lat="47.071016103385"></wpt>
<wpt lon="15.430326555481" lat="47.072068346707"></wpt>
<wpt lon="15.431141947021" lat="47.072068346707"></wpt>
<wpt lon="15.430884454953" lat="47.074114315917"></wpt>

</gpx>

console.log($xml):

URL
    "http://localhost/trackeditor/"

activeElement
    gpx

async
    true

baseURI
    "http://localhost/trackeditor/"

characterSet
    "UTF-8"

childNodes
    NodeList[gpx]

compatMode
    "CSS1Compat"

contentType
    "text/xml"

currentScript
    null

defaultView
    null

dir
    ""

doctype
    null

documentElement
    gpx

documentURI
    "http://localhost/trackeditor/"

firstChild
    gpx

hidden
    true

implementation
    DOMImplementation { hasFeature=hasFeature(), createDocumentType=createDocumentType(), createDocument=createDocument(), more...}

inputEncoding
    "UTF-8"

lastChild
    gpx

lastModified
    "10/16/2013 13:15:31"

lastStyleSheetSet
    null

localName
    null

location
    null

mozFullScreen
    false

mozFullScreenElement
    null

mozFullScreenEnabled
    false

mozHidden
    true

mozPointerLockElement
    null

mozVisibilityState
    "hidden"

namespaceURI
    null

nextSibling
    null

nodeName
    "#document"

nodeType
    9

nodeValue
    null

ownerDocument
    null

parentElement
    null

parentNode
    null

preferredStyleSheetSet
    ""

prefix
    null

previousSibling
    null

readyState
    "complete"

referrer
    ""

selectedStyleSheetSet
    ""

styleSheetSets
    Object { length=0, item=item(), contains=contains()}

styleSheets
    Object { length=0, item=item()}

textContent
    null

title
    ""

visibilityState
    "hidden"

__proto__
    XMLDocumentPrototype { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}

I am wondering why could this happen, almost all the results googling this problem are TinyMCE related and not very helpful.

Answer 1

Instead of this:

var paragraphCount = document.evaluate(path, $xml, null,
                         XPathResult.ORDERED_NODE_ITERATOR_TYPE, null );

You should use:

var paragraphCount = $xml.evaluate(path, $xml, null, 
                         XPathResult.ORDERED_NODE_ITERATOR_TYPE, null );

Answer 2

The easier and cross browser way,

instead of

var paragraphCount = document.evaluate(path, $xml, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null ); 

use the ownerDocument

var paragraphCount =  $xml.ownerDocument.evaluate(path, $xml, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null );