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

问题描述

我有一个包含多个子目录的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()查询元素中的文本。

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>