使用xpath比较两个DOM元素

Question

.//*[@id='1']/div/ul/li[5]

.tab-header-home

现在我希望从基于id的XPath生成唯一的基于类的XPath。Firepath生成的类XPath可能指向多个元素，而不是唯一的。但是firepath生成的id XPath总是唯一的，即指向单个元素。

所以，我正在尽可能地生成两个之间的映射。但我需要测试以下内容：

 xpath( .//*[@id='1']/div/ul/li[5]) == xpath(.tab-header-home )

以确保我创建的类xpath对应于所需的DOM元素。任何帮助都将得到高度赞赏。我希望生成的xpath示例是：

.//*[@id='29']/descendant::div[@class='template-parent-search-box']

目标是减少xpath的深度，以便DOM结构中的任何更改（如添加Div等）都不会使xpath无效。

Answer 1

您到底是如何使用XPath的？请注意，XPath在IE中可能无法工作，至少在没有shim的情况下是这样的（它的原生支持仅限于XML）。

但是使用适当的polyfill/shim，您应该能够只比较DOM元素（或者在返回多个XPath结果的情况下遍历每个XPath结果并比较每个单独的项）。

if (xPathClassDOM === xPathIDDDOM) {...}

此外，.tab-header-home不是XPath，而是CSS选择器，但如果您抓取了DOM元素，例如通过document.queryselector)将其与从XPath检索的元素进行比较。

例如：

JavaScript：

var classBasedExpression = ".tab-header-home"; // CSS-Selector-based
var idBasedExpression = ".//*[@id='1']/div/ul/li[5]"; // XPath-based


var firstCSSSelection = document.querySelector(classBasedExpression);

var iterator = document.evaluate(idBasedExpression, document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null ); 

try {
  var thisNode = iterator.iterateNext();

  while (thisNode) {
    if (firstCSSSelection === thisNode) {
      alert('found!')
      break;
    }
    thisNode = iterator.iterateNext();
  }
}
catch (e) {
    alert('error:' + e);
}

HTML：

<div id="1">
    <div>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li class="tab-header-home">e</li>
        </ul>
    </div>
</div>