I have a div with multiple children which have a large div structure in them. Now I want to find an element with an specific innerText. How can I do this? I have heard something from document.evaluate but is this the right thing?
<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>
I have main and want to find the Label with the text Second Label without multiple Loops.
Using an XPath expression in Javascript you can query for the specific element and use text() to query the text within the element.
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>Hello you can use path search. For more information on this check Document evaluate
var xPath = "//label[contains(text(),'First Label')]";
console.log(document.evaluate(xPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue);
You can do this via a 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!");
}
}