JavaScript根据子元素文本获取所有div？

Question

我有以下 HTML 格式的内容。我正在尝试获取具有属性 foo='bar' 的 Div，但仅当该 div 具有某些文本子元素时才能获取。

```html

我有以下 HTML 格式的内容。我正在尝试获取具有属性 foo='bar' 的 Div，但仅当该 div 具有某些文本子元素时才能获取。

```

   var loop = document.querySelectorAll('[foo="bar"]');
        for(var i = 0; i <= loop.length; i++)  
       //perform action

<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> barfoo </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>

在上面的示例html中，我想获取foo=bar的第一个和第三个div，并忽略第二个，因为它没有一个带有文本foobar的子span。

我的javascript将获取所有3个，但在循环中，如何检查子span文本是否匹配foobar，然后再执行操作？

谢谢。

- Imogen Johnson

---

可以做到，但会导致性能极差。 - D. Pardal

目前还没有可以做到这一点的构建选择器，他们正在考虑一个:contains选择器，但它不存在（还？）。选择器级别3：6.6.6.空白。因此，您需要自己对找到的元素进行过滤，例如使用MDN：Node.innerText。 - t.niese

Answer 1

var loop = document.querySelectorAll('[foo="bar"]');
loop.forEach((element, index)=>{
  if(element.innerText.match(/foobar/)){
    //Do something with element
  }
})

<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> barfoo </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>

- acbay

---

如果只是涉及文本，我不会使用 innerHTML，因为它还会考虑属性和标签。 - t.niese

Answer 2

最简单的解决方案是使用XPath:

// Replace document.body with the common ancestor
const xpResult = document.evaluate("div[@foo='bar'][descendant::text()[contains(., 'foobar')]]", document.body);

const elems = [];
{
  let elem = xpResult.iterateNext();
  while (elem) {
    elems.push(elem);
    elem = xpResult.iterateNext();
  }
}
console.log(elems);

for (const elem of elems) {
  elem.style.color = "red";
}

<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> barfoo </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>

div[@foo='bar'][descendant::text()[contains(., 'foobar')]] 的翻译是：所有包含属性 foo 值为 "bar" 并且包含后代文本节点的 <div> 元素（作为 document.body 的子元素）中，这些文本节点包含文本 "foobar"。

- D. Pardal

Answer 3

抱歉，我知道你在问题标签中打了“javascript”（所以可能是纯JavaScript），但使用jQuery查询怎么样：

$(document).ready(function() {
    $("[foo=bar]").find( ":contains('foobar')").css('color', 'red');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> barfoo </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>

它能够运行在非常旧的jQuery版本上。

- Rene