Javascript：在元素内查找 xpath答案

【问题标题】：Javascript: look for xpath inside elementJavascript：在元素内查找 xpath
【发布时间】：2014-08-23 01:32:58
【问题描述】：

我通过下面的 xpath 获取所有元素。我想查看每个 TD 内部，并在每个 TD 内部搜索另一个 xpath。我不确定以下方法是否有效，但这是我想要实现的。我知道你可以这样做 //td//a 但我想知道如何以编程方式搜索每个元素以获取更多 xpath。

 var tds = document.evaluate('//td', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

 for (++index < tds.snapshotLength){
  //this link may or may not exist
  var link = document.evaluate('//a', tds[index].document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);
 }

【问题讨论】：

标签： javascript dom

【解决方案1】：

定义两个辅助函数来完成繁重的工作并返回易于使用的结果是明智的：

function selectNodes(path, contextNode) {
    var result, item, nodes = [];

    result = document.evaluate(path, contextNode || document, null, 
      XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

    while ( item = result.iterateNext() ) nodes.push(item);

    return nodes;
}

function selectSingleNode(path, contextNode) {
    return selectNodes(path, contextNode)[0];
}

现在使用 XPath 变得简单了：

var tds = selectNodes('//td'), i, a;

for (i = 0; i < tds.length; i++) {
    a = selectSingleNode('.//a', tds[i]);
    console.log(a.href);
}

注意相对路径 ('.//a')。当你想要一个上下文节点的正确结果时，你需要使用相对路径 - 一个普通的 // 总是从文档根开始。

【讨论】：

是的，我发现在 xpath 之前添加了 .，否则它不会在正确的 contextNode 中查找。

【解决方案2】：

您的方法看起来不错，但是您的for 语法不正确，您需要使用snapshotItem 来访问tds 的结果：

var tds = document.evaluate('//td', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

var i;
for (i=0; i < tds.snapshotLength; i++) {
     var link = document.evaluate('//a', tds.snapshotItem(i), null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
     if(link.snapshotLength) {
         console.log(link.snapshotItem(0));
     }
}

jsFiddle

【讨论】：