Question

我需要找到包含单词“ 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>
`

有什么想法吗？谢谢！

Answer 1

当您拥有html元素（img）时，代码将忽略标签，因为它没有 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))

如您所见，我确实将'更改为。//*[包含（ text（），“集成”））'更改为'。/ / a [包含（。，“集成”））'

当您使用 text（）时，表示您正在寻找与'Integrations'相等的立即子级文本节点。

但是，如果您使用的是。，则意味着您正在任意位置处查找字符串 Integration ，这就是为什么即使 Integration 字符串位于 img （或任意） html标签下面，上述代码也可以正常工作。

p.s：我的英语课正在进行中。如果您听不懂我说的话，请问我，我将尝试再次解释。

Answer 2

请更改您的图片标记，使其不结束，从而造成此问题.. !!

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

嵌套<img/>标签

2 个答案: