javascript - 是否有一个 JS 库来为 IE 提供 xpath 能力

Question

我正在使用“普通和现代”浏览器(FF、Chrome、Opera、Safari...)做很多 XPath，但我正在寻找一个允许 IE 支持 document.evaluate( ) 方法。

它存在吗？我知道 StackOverflow 中有一些类似的问题，但很多年前就有人提出并回答过这些问题。

想法是:分解读取 xpath 的代码并生成(相同的)xpath。

---

更新，2011 年 8 月 8 日:

我在这里找到@ExtremeCoder 提出的库:http://sourceforge.net/projects/html-xpath/

这确实是我所需要的(它“覆盖”document.evaluate 仅适用于 IE)...但它会在 chrome 上产生错误并且在 IE 上不起作用:/

---

更新 2012 年 8 月 29 日(是的，一年后)。

我测试了各种各样的库。很多覆盖 document.evaluate 的方法不是很强大，或者因不同的错误而受到影响。我终于使用了没有 XSLT 部分的好旧的 Google Ajax XSLT ;)

http://goog-ajaxslt.sourceforge.net/

(所以我验证你的回答@Cheeso)

顺便说一下，很多(或所有)这些库都不再维护了。

---

再次更新，2012 年 9 月 28 日:

Google 启动 另一个 XPath 库项目。我还没有测试它，但它看起来很有前途并且更新了。 http://code.google.com/p/wicked-good-xpath/

像往常一样，感谢 Microsoft(浏览器 8/9/10)(原文如此!)，请学习支持基本标准和其他浏览器行为。

Answer 1

这是我用的:

// xpath.js
// ------------------------------------------------------------------
//
// a cross-browser xpath class.
// Derived form code at http://jmvidal.cse.sc.edu/talks/javascriptxml/xpathexample.html.
//
// Tested in Chrome, IE9, and FF6.0.2
//
// Author     : Dino
// Created    : Sun Sep 18 18:39:58 2011
// Last-saved : <2011-September-19 15:07:20>
//
// ------------------------------------------------------------------

/*jshint browser:true */

(function(globalScope) {
    'use strict';

    /**
     * The first argument to this constructor is the text of the XPath expression.
     *
     * If the expression uses any XML namespaces, the second argument must
     * be a JavaScript object that maps namespace prefixes to the URLs that define
     * those namespaces.  The properties of this object are taken as prefixes, and
     * the values associated to those properties are the URLs.
     *
     * There's no way to specify a non-null default XML namespace. You need to use
     * prefixes in order to reference a non-null namespace in a query.
     *
     */

    var expr = function(xpathText, namespaces) {
        var prefix;
        this.xpathText = xpathText;    // Save the text of the expression
        this.namespaces = namespaces || null;  // And the namespace mapping

        if (document.createExpression) {
            this.xpathExpr = true;
            // I tried using a compiled xpath expression, it worked on Chrome,
            // but it did not work on FF6.0.2.  Threw various exceptions.
            // So I punt on "compiling" the xpath and just evaluate it.
            //
            // This flag serves only to store the result of the check.
            //

                // document.createExpression(xpathText,
                // // This function is passed a
                // // namespace prefix and returns the URL.
                // function(prefix) {
                //     return namespaces[prefix];
                // });
        }
        else {
            // assume IE and convert the namespaces object into the
            // textual form that IE requires.
            this.namespaceString = "";
            if (namespaces !== null) {
                for(prefix in namespaces) {
                    // Add a space if there is already something there
                    if (this.namespaceString.length>1) this.namespaceString += ' ';
                    // And add the namespace
                    this.namespaceString += 'xmlns:' + prefix + '="' +
                        namespaces[prefix] + '"';
                }
            }
        }
    };

    /**
     * This is the getNodes() method of XPath.Expression.  It evaluates the
     * XPath expression in the specified context.  The context argument should
     * be a Document or Element object.  The return value is an array
     * or array-like object containing the nodes that match the expression.
     */
    expr.prototype.getNodes = function(xmlDomCtx) {
        var self = this, a, i,
            doc = xmlDomCtx.ownerDocument;

        // If the context doesn't have ownerDocument, it is the Document
        if (doc === null) doc = xmlDomCtx;

        if (this.xpathExpr) {
            // could not get a compiled XPathExpression to work in FF6
            // var result = this.xpathExpr.evaluate(xmlDomCtx,
            //     // This is the result type we want
            //     XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
            //     null);

            var result = doc.evaluate(this.xpathText,
                xmlDomCtx,
                function(prefix) {
                    return self.namespaces[prefix];
                },
                XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
                null);

            // Copy the results into an array.
            a = [];
            for(i = 0; i < result.snapshotLength; i++) {
                a.push(result.snapshotItem(i));
            }
            return a;
        }
        else {
            // evaluate the expression using the IE API.
            try {
                // This is IE-specific magic to specify prefix-to-URL mapping
                doc.setProperty("SelectionLanguage", "XPath");
                doc.setProperty("SelectionNamespaces", this.namespaceString);

                // In IE, the context must be an Element not a Document,
                // so if context is a document, use documentElement instead
                if (xmlDomCtx === doc) xmlDomCtx = doc.documentElement;
                // Now use the IE method selectNodes() to evaluate the expression
                return xmlDomCtx.selectNodes(this.xpathText);
            }
            catch(e2) {
                throw "XPath is not supported by this browser.";
            }
        }
    };


    /**
     * This is the getNode() method of XPath.Expression.  It evaluates the
     * XPath expression in the specified context and returns a single matching
     * node (or null if no node matches).  If more than one node matches,
     * this method returns the first one in the document.
     * The implementation differs from getNodes() only in the return type.
     */
    expr.prototype.getNode = function(xmlDomCtx) {
        var self = this,
                doc = xmlDomCtx.ownerDocument;
        if (doc === null) doc = xmlDomCtx;
        if (this.xpathExpr) {

            // could not get compiled "XPathExpression" to work in FF4
            // var result =
            //     this.xpathExpr.evaluate(xmlDomCtx,
            //     // We just want the first match
            //     XPathResult.FIRST_ORDERED_NODE_TYPE,
            //     null);

            var result = doc.evaluate(this.xpathText,
                xmlDomCtx,
                function(prefix) {
                    return self.namespaces[prefix];
                },
                XPathResult.FIRST_ORDERED_NODE_TYPE,
                null);
            return result.singleNodeValue;
        }
        else {
            try {
                doc.setProperty("SelectionLanguage", "XPath");
                doc.setProperty("SelectionNamespaces", this.namespaceString);
                if (xmlDomCtx == doc) xmlDomCtx = doc.documentElement;
                return xmlDomCtx.selectSingleNode(this.xpathText);
            }
            catch(e) {
                throw "XPath is not supported by this browser.";
            }
        }
    };


    var getNodes = function(context, xpathExpr, namespaces) {
        return (new globalScope.XPath.Expression(xpathExpr, namespaces)).getNodes(context);
    };

    var getNode  = function(context, xpathExpr, namespaces) {
        return (new globalScope.XPath.Expression(xpathExpr, namespaces)).getNode(context);
    };


    /**
     * XPath is a global object, containing three members.  The
     * Expression member is a class modelling an Xpath expression.  Use
     * it like this:
     *
     *   var xpath1 = new XPath.Expression("/kml/Document/Folder");
     *   var nodeList = xpath1.getNodes(xmldoc);
     *
     *   var xpath2 = new XPath.Expression("/a:kml/a:Document",
     *                                   { a : 'http://www.opengis.net/kml/2.2' });
     *   var node = xpath2.getNode(xmldoc);
     *
     * The getNodes() and getNode() methods are just utility methods for
     * one-time use. Example:
     *
     *   var oneNode = XPath.getNode(xmldoc, '/root/favorites');
     *
     *   var nodeList = XPath.getNodes(xmldoc, '/x:derp/x:twap', { x: 'urn:0190djksj-xx'} );
     *
     */

    // place XPath into the global scope.
    globalScope.XPath = {
        Expression : expr,
        getNodes   : getNodes,
        getNode    : getNode
    };

}(this));

您可以在所有浏览器中使用相同的代码，尽管它不是 document.evaluate()，不是直接的。相反，你可以这样使用它:

      var xpath = new XPath.Expression("/a:kml/a:Document",
                                      { a : 'http://www.opengis.net/kml/2.2' });
      var node = xpath.getNode(xmldoc);