Exploit the built in XPath engine to query javaScript objects

Question

NOTE: I am not looking for a way to query the HTML document itself. I want to create my own document from my javaScript object and pass it as root argument to the evaluate function.

Say I have the following script:

function Attribute(name, value) {
    this.name;
    this.value;
}

function Node(nodeName) {
    this.nodeName = nodeName;
    this.textContent = "";
    this.childrenNodes = [];
    this.attributes = [];
}

var root = new Node("root");
root.attributes.push(new Attribute("name", "treeRoot"));

var c1 = new Node("child");
c1.attributes.push(new Attribute("name", "child1"));
c1.textContent = "I'm the first child!";

var c2 = new Node("child");
c2.attributes.push(new Attribute("name", "child2"));

root.childrenNodes.push(c1);
root.childrenNodes.push(c2);

That represents the following simple XML:

<root name="treeRoot">
    <child name="child1">
        I'm the first child!
    </child>
    <child name="child2"/>
</root>

I would like to use the build in XPath engine to query this XML-like structure. Somthing like:

myDocument = createDocument(root);
myDocument.evaluate("/root/child[@name='child2']", myDocument, null, XPathResult.ANY_TYPE, null);

That would return an XPathResult of Node collection containing c1 Node .

How do I implement the createDocument function?

EDIT:

My goal is to be able to query javaScript objects. In Java I can create a Document object and use XPath to query it. I'm looking for something similar in javaScript.

Answer 1

You need a couple of functions here to convert your "DOM" implementation to a standard XML DOM - one to create the document and another to recursively create elements:

// create a document based on a Node instance
function toXmlDom(node) {
    // create a document
    var doc = document.implementation.createDocument('', '');

    // convert the root node
    var e = toXmlElement(doc, node);

    // add root to document
    doc.appendChild(e);
    return doc;
}

// convert a Node and its children to an XML element
function toXmlElement(doc, node) {
    // create an element
    var e = doc.createElement(node.nodeName);

    // set its attributes
    for(var i = 0; i < node.attributes.length; i++) {
        var attr = node.attributes[i];
        e.setAttribute(attr.name, attr.value);
    }

    // set its text content
    e.textContent = node.textContent;

    // convert and add its child nodes
    for(var i = 0; i < node.childrenNodes.length; i++) {
        var childrenNode = node.childrenNodes[i];
        var childNode = toXmlElement(doc, childrenNode);
        e.appendChild(childNode);
    }

    return e;
}

// do the conversion
var myDocument = toXmlDom(root);

Working Example

 console.clear(); function Attribute(name, value) { this.name = name; this.value = value; } function Node(nodeName) { this.nodeName = nodeName; this.textContent = ""; this.childrenNodes = []; this.attributes = []; } function toXmlDom(node) { // create a document var doc = document.implementation.createDocument('', ''); // convert the root node var e = toXmlElement(doc, node); // add root to document doc.appendChild(e); return doc; } function toXmlElement(doc, node) { // create an element var e = doc.createElement(node.nodeName); // set its attributes for(var i = 0; i < node.attributes.length; i++) { var attr = node.attributes[i]; e.setAttribute(attr.name, attr.value); } // set its text content e.textContent = node.textContent; // convert and add its child nodes for(var i = 0; i < node.childrenNodes.length; i++) { var childrenNode = node.childrenNodes[i]; var childNode = toXmlElement(doc, childrenNode); e.appendChild(childNode); } return e; } var root = new Node("root"); root.attributes.push(new Attribute("name", "treeRoot")); var c1 = new Node("child"); c1.attributes.push(new Attribute("name", "child1")); c1.textContent = "I'm the first child!"; var c2 = new Node("child"); c2.attributes.push(new Attribute("name", "child2")); root.childrenNodes.push(c1); root.childrenNodes.push(c2); var myDocument = toXmlDom(root); // get the text of the first child - "I'm the first child!" var result = myDocument.evaluate("/root/child[@name='child1']", myDocument, null, XPathResult.ANY_TYPE, null); var thisNode = result.iterateNext(); while (thisNode) { document.getElementById('result').innerHTML += thisNode.textContent + "<br/>"; thisNode = result.iterateNext(); } document.getElementById('doctext').value = myDocument.documentElement.outerHTML; 

 <p><b>/root/child[@name='child1'].textContent:</b> <span id="result"></span></p> <b>Document XML</b><br/> <textarea id="doctext" cols="50" rows="10"></textarea>