javascript通过子文本获取所有div？答案

【问题标题】：javascript get all divs by child text?javascript通过子文本获取所有div？
【发布时间】：2020-08-16 23:18:23
【问题描述】：

我有如下的 html 格式。我正在尝试获取 Div where attribute foo = 'bar' ，但前提是该 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 文本的子跨度。

我上面的 javascript 将获取所有 3 个，但是在我的循环中，如何在执行操作之前检查子跨度文本是否与 foobar 匹配？

谢谢

【问题讨论】：

可以做到，但会导致糟糕的性能。
目前没有构建选择器可以执行此操作，他们正在考虑使用:contains 选择器，但它不存在（还没有？）。 Selectors Level 3: 6.6.6. Blank。因此，您需要自己使用例如对找到的元素进行过滤。 MDN: Node.innerText

标签： javascript

【解决方案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>

【讨论】：

如果是关于文本，我不会使用innerHTML，因为这也会考虑属性和标签。

【解决方案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')]] 到英文的翻译是：所有<div> 元素（document.body 的子元素），其中包含foo 属性，值为"bar"，并且包含包含"foobar" 的后代文本节点他们的文字。

【讨论】：

【解决方案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。

【讨论】：