基于文本内容查找DOM元素时XPath查询返回null问题求助

嘿，我来帮你搞定这个头疼的问题！你明明页面上有<a href="#">Foobar</a>这个元素，但用那两段XPath代码都返回null，大概率是这几个小细节没注意到，我给你逐个拆解并修正：

最容易踩的坑：XPath路径没写对 #

你原来写的a[text()='Foobar']是相对路径，它只会从当前上下文节点的子节点里找，而不是整个文档。必须加上//变成全局查找的绝对路径：

var xpath = "//a[text()='Foobar']";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
console.log(matchingElement);

文本有隐藏空格/换行？用normalize-space处理 #

有时候页面里的文本看起来是Foobar，但实际前后有空格、换行或者制表符，这时候精确匹配就会失效。用normalize-space()可以自动清理这些多余的空白字符：

xpath = "//a[normalize-space(text())='Foobar']";
matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
console.log(matchingElement);

文本被拆成多个节点？用.代替text() #

浏览器有时候会把元素内的文本拆成多个文本节点（比如中间插了空标签、换行），这时候text()只能匹配第一个文本节点，而.代表元素的所有文本内容的合并，用它来匹配就稳了：

xpath = "//a[contains(., 'Foobar')]";
matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
console.log(matchingElement);

你可以逐个试试这几个方案，基本能解决大部分找不到元素的情况～

内容的提问来源于stack exchange，提问作者user1077220