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

我在目前正在阅读的book中找到了以下解决方案。它说代码来自Prototype library。

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

Answer 4

几周前，我正在努力解决同样的问题。我发现，结果已经代表了一个元素列表（如果有的话），并且可以通过它迭代。我需要构建一个jQuery插件来实现对部分或全文本字符串的搜索，这意味着任何DOM元素的内部文本，如LI或H2。我在他的页面上得到了初步的了解：Document.evaluate() | MDN

几个小时后我运行了插件：仅在“p”元素中搜索“architecture”一词，找到部分匹配的字符串（<p>todays architecture in Europe</p>的“true”）而不是整个文本的匹配（{{ 1}}）。

<h2>architecture</h2>

找到的结果是常规的jQuery对象，可以照常使用。

var found = $('div#pagecontent').findtext('architecture','p',true);

上面的用法示例可能会像这样进行更改，以便搜索整个文档和所有类似的节点类型（部分结果）

found.css({ backgroundColor: 'tomato'});

或仅完全匹配

var found = $('body').findtext('architecture','',true);

插件本身显示变量“es”，它是“元素”的单个“e”的复数形式。你可以看到，结果如何被迭代，并被收集到一堆具有var found = $('div#pagecontent').findtext('architecture');的对象中（其中“f”代表“找到”）。函数的开头处理不同的条件，如完全或部分搜索（条件为“c”）和搜索文档范围（“d”）。

它可以根据需要进行优化，可能不代表最大可能性，但它代表了我目前最好的知识，运行没有错误，它可能会回答你的问题，希望如此。这就是它：

f = f.add($(e))

Answer 5

在 Chrome 中，有一个更简单的解决方案，在 this document 中描述，至少在控制台中：

p.size { ... }

它的作用与上面的 $x(path) 函数相同，但更易于调试。

如何使用document.evaluate（）和XPath来获取元素列表？

5 个答案: