javascript - 利用内置的 XPath 引擎来查询 javaScript 对象

Question

注意:我并不是在寻找查询 HTML 文档本身的方法。我想从 javaScript 对象创建自己的文档，并将其作为根参数传递给 evaluate 函数。

假设我有以下脚本:

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);

这代表以下简单的 XML:

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

我想使用内置的 XPath 引擎来查询这个类似 XML 的结构。类似于:

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

这将返回包含 c1 Node 的 Node 集合的 XPathResult。

如何实现createDocument函数？

编辑:

我的目标是能够查询 javaScript 对象。在 Java 中，我可以创建一个 Document 对象并使用 XPath 来查询它。我正在寻找 javaScript 中类似的东西。

Answer 1

这里需要几个函数来将“DOM”实现转换为标准 XML DOM - 一个用于创建文档，另一个用于递归创建元素:

// 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);

工作示例

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>