javascript - 使用 xpath 比较两个 DOM 元素

Question

同一个 DOM 元素可以有多个 xpath，Firepath 使用 id 和类生成 xpath。以下是同一元素的两个 xpath:

.//*[@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 中工作，至少在没有填充程序的情况下(其 native 支持仅针对 XML)。

但是使用适当的 polyfill/shim，您应该能够比较 DOM 元素(或者如果返回多个元素，则迭代每个 XPath 结果并比较每个单独的项目)。

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

此外，.tab-header-home 不是 XPath，而是 CSS 选择器，但如果您已获取 DOM 元素，您仍然可以将其与 XPath 检索的元素进行比较，例如，通过document.querySelector)。

例如:

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>

JSFiddle