Question

我们可以为同一个DOM元素提供多个xpath，Firepath使用id和类生成xpath。以下是同一元素的两个xpath：

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

.tab-header-home

现在我希望从基于id的xpaths生成基于类的唯一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中运行，至少没有垫片（其本机支持仅适用于XML）。

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

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

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

例如：

<强> 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

使用xpath比较两个DOM元素

1 个答案: