如何使用document.evaluate()和XPath获取元素列表？

Question

我使用document.evaluate() JavaScript方法获取XPath表达式指向的元素：

var element = document.evaluate(
  path,
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
).singleNodeValue;

但是，如果XPath表达式指向页面上的多个元素，我如何获得元素列表？

我尝试了以下代码，但它不起作用：

var element = document.evaluate(
  path,
  document,
  null,
  XPathResult.ORDERED_NODE_ITERATOR_TYPE,
  null
);

Answer 1

我在当前阅读的书中找到了以下解决方案。它说代码来自原型库。

function getElementsByXPath(xpath, parent)
{
    let results = [];
    let query = document.evaluate(xpath, parent || document,
        null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for (let i = 0, length = query.snapshotLength; i < length; ++i) {
        results.push(query.snapshotItem(i));
    }
    return results;
}

像这样使用它：

let items = getElementsByXPath("//*"); // return all elements on the page

Answer 2

从文件中

var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );

try {
  var thisNode = iterator.iterateNext();

  while (thisNode) {
    alert( thisNode.textContent );
    thisNode = iterator.iterateNext();
  } 
}
catch (e) {
  dump( 'Error: Document tree modified during iteration ' + e );
}

Answer 3

试试这个：

function getListOfElementsByXPath(xpath) {
    var result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
    return result;
}

那就叫它：

var results = getListOfElementsByXPath("//YOUR_XPATH");
while (node = results.iterateNext()) {
     console.log(node);
}