对于像chrome命令行api中的$x(选择多个元素)尝试:

var xpath = function(xpathToExecute){
  var result = [];
  var nodesSnapshot = document.evaluate(xpathToExecute, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
  for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ){
    result.push( nodesSnapshot.snapshotItem(i) );
  }
  return result;
}

MDN概述有帮助:https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

你可以使用document.evaluate:

方法的结果 如果可能，请指定类型。

它是w3标准化的，并且有完整的文档:https://developer.mozilla.org/en-US/docs/Web/API/Document.evaluate

函数getElementByXpath(path) { 返回文档。(path, document, null, XPathResult.).singleNodeValue FIRST_ORDERED_NODE_TYPE, null); ｝ console.log(getElementByXpath("//html[1]/body[1]/div[1]")); < div > foo < / div >

https://gist.github.com/yckart/6351935

在mozilla开发者网络上也有一个很好的介绍:https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript#document.evaluate

替代版本，使用XPathEvaluator:

函数getElementByXPath(xpath) 返回新的XPathEvaluator() .createExpression (xpath) XPathResult.FIRST_ORDERED_NODE_TYPE .evaluate(文档) .singleNodeValue ｝ console.log(getElementByXPath("//html[1]/body[1]/div[1]")); < div > foo / bar < / div >

对于像chrome命令行api中的$x(选择多个元素)尝试:

var xpath = function(xpathToExecute){
  var result = [];
  var nodesSnapshot = document.evaluate(xpathToExecute, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
  for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ){
    result.push( nodesSnapshot.snapshotItem(i) );
  }
  return result;
}

MDN概述有帮助:https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

假设您的目标是开发和测试用于屏幕映射的xpath查询。然后使用Chrome的开发工具。这允许您运行xpath查询来显示匹配。或者在Firefox >9中，你可以用Web开发人员工具控制台做同样的事情。在早期版本中使用x- pathfinder或Firebug。

尽管许多浏览器都内置了$x(xPath)作为控制台，但以下是《JavaScript中使用xPath的入门》中一些有用但硬编码的代码片段的聚合，可以在脚本中使用:

快照

这给出了xpath结果集的一次性快照。DOM突变后，数据可能会过时。

Const $x = xp => { Const快照= document.evaluate( Xp，文档，null， XPathResult。ORDERED_NODE_SNAPSHOT_TYPE,零 ）; 返回数组(snapshot.snapshotLength)[…] .map((_， i) => snapshot.snapshotItem(i)) ； }; console.log ($ x (' / / h2(包含(。、“foo”)])); < h2 > foo < / h2 > < h2 > foobar < / h2 > 酒吧< h2 > < / h2 >

一阶节点

const $xOne = xp => document.evaluate ( Xp，文档，null， XPathResult。FIRST_ORDERED_NODE_TYPE,零 ) .singleNodeValue ； console.log ($ xOne (' / / h2(包含(。、“foo”)])); < h2 > foo < / h2 > < h2 > foobar < / h2 > 酒吧< h2 > < / h2 >

迭代器

但是请注意，如果文档在迭代之间发生突变(文档树被修改)，将使迭代失效，XPathResult的invalidIteratorState属性被设置为true，并且抛出NS_ERROR_DOM_INVALID_STATE_ERR异常。

函数*$xIter(xp) { 常量iter = document.evaluate( Xp，文档，null， XPathResult。ORDERED_NODE_ITERATOR_TYPE,零 ); For (;;) { const node = iter.iterateNext(); If (!node) { 打破; ｝ 收益率节点; ｝ ｝ //转储到数组 console.log([…——xit美元(' / / h2(包含(。“foo”))))); //从生成器返回下一个项目 const xpGen = $xIter('//h2[text()="foo"]'); console.log (xpGen.next () value); < h2 > foo < / h2 > < h2 > foobar < / h2 > 酒吧< h2 > < / h2 >

你可以使用javascript的文档。求值在DOM上运行XPath表达式。我认为它在IE 6的浏览器中以某种方式得到了支持。

MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate

IE支持selectNodes。

MSDN: https://msdn.microsoft.com/en-us/library/ms754523 (v = vs.85) . aspx