如何通过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>
相关文章