CODEWITHSUNDEEP
javascriptxmlxpath
Elist
Elist

Reputation: 5533

Exploit the built in XPath engine to query javaScript objects

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.

Upvotes: 0

Views: 389

Answers (1)

Rhumborl
Rhumborl

Reputation: 16609

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>

Upvotes: 1

Related Questions