如何通过InnerText或Class在DIV结构中查找DIV

Question

我有一个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，想找到带有文本的标签没有多个循环的第二个标签。

Answer 1

使用Javascript中的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>

Answer 2

您好，您可以使用路径搜索。有关此检查的更多信息，请文档评估

var xPath = "//label[contains(text(),'First Label')]";
console.log(document.evaluate(xPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue);

Answer 3

您可以通过document.querySelectorAll ("label")进行此操作

const len = document.querySelectorAll("label");
for (let i = 1; i < len.length+1; i++) {
var el = document.querySelector("label[classname=text"+i+"]");
console.log(el.innerText);
if(el.innerText == "First Label") {
console.log("Found!");
}
}

Answer 4

var xpathResult = document.evaluate(
"//label[contains(text(),'Second Label')]", // xpathExpression
document.querySelector(".main"), // contextNode
null, // namespaceResolver
XPathResult.ANY_TYPE, // resultType
null // result
).iterateNext();
console.log(xpathResult);

<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>