javascript - 当嵌套<img>标签时，find元素包含文本

我需要找到包含单词“ Integrations”的a（最近的）元素

const htmlStr = `
<ul class="yy">
   <li>
      <a href="/organisations/xx/team">
      <img src="xx.png" alt="Team">
      Team
      </a>
   </li>
   <li>
      <a href="/organisations/xx/connections">
      <img src="xx.png" alt="Integrations">
      Integrations
      </a>
   </li>
</ul>
`

以下是我在Devtool中的代码

const htmlObj = document.createElement('div')
htmlObj.innerHTML = htmlStr
const elements = document.evaluate('.//*[contains(text(), "Integrations")]', htmlObj, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
console.log(elements.snapshotItem(0))

我找不到elements.snapshotItem(0) is null的任何内容

但是，当我删除<img>标记时，便可以找到<a>。说代码适用于以下字符串。

const htmlStr = `
<ul class="yy">
   <li>
      <a href="/organisations/xx/team">
      Team
      </a>
   </li>
   <li>
      <a href="/organisations/xx/connections">
      Integrations
      </a>
   </li>
</ul>
`

有任何想法吗？谢谢！

最佳答案

当您具有html元素（img）时，代码将忽略a标记，因为它没有Integrations字符串作为直接子代。 （如果字符串Integrations停留在img标签上方，则该代码有效）

参见以下代码：

const htmlObj = document.createElement('div')
htmlObj.innerHTML = htmlStr
const elements = document.evaluate('.//a[contains(., "Integrations")]', htmlObj, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
console.log(elements.snapshotItem(0))

如您所见，我确实将'.//* [contains（text（），“ Integrations”）]]'更改为'.// a [contains（。，“ Integrations））]'

当您使用text（）时，意味着您正在寻找的直接子文本节点等于'Integrations'。

但是，如果您使用的是。，则意味着您正在任何位置寻找字符串Integration，这就是为什么即使Integration字符串位于img（或任何）html标记下方的情况，上面的代码仍可以工作的原因。