如何通过InnerText或类查找div结构中的DIV

2022-04-14 00:00:00 find selector javascript html evaluate

我有一个包含多个子目录的div,其中有一个很大的div结构。现在,我要查找具有特定innerText的元素。 我怎么才能做到这一点呢? 我从文档中听说了一些事情。评估,但这是正确的事情吗?

<div className="main">
  <div className="child1">
    <div>
      <div><label className="text1">First Label</label></div>
    </div>
  </div>
  <div className="child2">
    <div>
      <div><label className="text2">Second Label</label></div>
    </div>
  </div>
  <div className="child3">
    <div>
      <div><label className="text3">Third Label</label></div>
    </div>
  </div>
</div>

我有Main,希望找到文本为Second Label Without Multiple Loop的标签。


解决方案

在Java脚本中使用XPath表达式可以查询特定元素,并使用text()查询元素中的文本。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
const getnodes = function(expr, parent) {
  let results = [];
  let contextNode = parent || document;
  let query = document.evaluate(expr, contextNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  for (let i = 0, length = query.snapshotLength; i < length; ++i) {
    results.push(query.snapshotItem(i));
  }
  return results;
};


let col = getnodes('//div[@class="main"]//label/text()[ contains(.,"Second Label") ]');
col.forEach(n => {
  console.log(n.textContent)
});


let ref=document.querySelector('div.main > div.child3');

col=getnodes('div/div/label',ref);
col.forEach(n => {
  console.log('Using explicit reference node:',n.textContent)
});
<div class="main">
  <div class="child1">
    <div>
      <div><label class="text1">First Label</label></div>
    </div>
  </div>
  <div class="child2">
    <div>
      <div><label class="text2">Second Label</label></div>
    </div>
  </div>
  <div class="child3">
    <div>
      <div><label class="text3">Third Label</label></div>
    </div>
  </div>
</div>

相关文章