Javascript:在jQuery中使用xpath

您可以将现有XPath评估的结果添加到jQuery选择中，我将这个jQuery扩展组合在一起，它似乎可以为您完成所有任务。

示例用法：

$(document).xpathEvaluate('//body/div').remove()

这是加载项。

$.fn.xpathEvaluate = function (xpathExpression) {
   // NOTE: vars not declared local for debug purposes
   $this = this.first(); // Don't make me deal with multiples before coffee
   // Evaluate xpath and retrieve matching nodes
   xpathResult = this[0].evaluate(xpathExpression, this[0], null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
   result = [];
   while (elem = xpathResult.iterateNext()) {
      result.push(elem);
   }
   $result = jQuery([]).pushStack( result );
   return $result;
}

您可以将xpath查询重写为CSS选择器：

$('div:has(> div > span:contains(something)) > div.someClass');

使用:has pseduo选择器根据元素的子元素选择元素，可以获得与parent::相同的效果：div.foo:has(> div.bar)将选择所有具有foo类的div元素，这些元素具有bar类的子元素div。这相当于div[@class="bar"]/parent::div[@class="foo"]。

参见：

• jQuery API：选择器
• Sizzle文档

您可能可以使用jQuery的DOM遍历方法的各种组合，以其他几种方式来处理此问题。例如，这将是您的xpath查询的一个非常直接的翻译：

$('div:has(> span:contains(something))')  // //div[span="something"]
    .parent('div')                        // /parent::div
    .children('div.someClass');           // /child::div[@class="someClass"]

值得注意的是，CSS中的div.someClass并不是xpath中div[@class="someClass"]的完全等价物。CSS将匹配<div class='foo someClass bar'>，但xpath不会。有关更多详细信息，请参阅Brian Suda关于使用XSLT解析微格式的文章。

作为Wicked Good XPath的合著者，我当然推荐它支持跨浏览器XPath（在HTML文档中，您可以尝试将它与XML文档一起使用，但支持不完整）。

我们欢迎在我们的库中进行任何类型的正确性测试/性能基准测试。在开发过程中，该库已经在IE 7到10以及不支持本机XPath的Android 2.2浏览器上进行了测试。

如果您想从父窗口中选择iframe中的元素，您应该将evaulate（）函数的第二个参数更改为iframe的文档元素，如：

var iFrameDocument = $('iframe#myPage').get(0).contentWindow.document;
xpathResult = this[0].evaluate(xpathExpression, iFrameDocument, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

据我所知，还没有跨浏览器实现。有一个jQuery的xpath插件，说它还在开发中。

除此之外，还有一个由谷歌编写的DOM Level 3 XPath规范的纯JavaScript实现，称为wicke-good-XPath，这很好。

我不确定parent::div子句，但如果没有它，它应该是这样的：

$('div[span="something"] div.someClass');

从这里了解evaluate方法：https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );