为什么JavaScript中document.evaluate循环查询总返回相同DOM对象？

问题原因 #

你使用的XPath表达式存在定位范围错误：

• 开头的//是全局定位语法，代表从整个文档的根节点开始检索所有符合规则的节点，不会受到你传入document.evaluate的第二个参数（上下文节点result[i]）的限制，所以每次查询都会返回全页面第一个匹配到的h3元素，和你当前遍历的result[i]没有关联。

修复方法 #

把XPath开头增加.符号，修改为.//h3[contains(text(),'wrong')]，这里的.代表当前传入的上下文节点，含义为仅在当前result[i]的后代节点中检索符合条件的h3。

另外你原有代码逻辑存在问题：无论是否匹配到关键词，都会隐藏所有g类节点，需要增加判断逻辑，只有匹配到节点时才执行隐藏操作。

修正后完整代码如下：

var result = document.getElementsByClassName('g')
// 注意XPath开头加.限定在上下文节点内查询
var xpath = ".//h3[contains(text(),'wrong')]";

for (let i = 0; i < result.length; i++) {
    var r = document.evaluate(xpath, result[i], null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
    console.log(i);
    console.log(r.singleNodeValue);
    // 只有匹配到对应节点时才隐藏当前搜索结果项
    if (r.singleNodeValue) {
        result[i].style.display = 'none';
    }
}

修改后运行就会只隐藏包含指定关键词的搜索结果项，不会再出现全局匹配的问题。

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