如何在HTML元素下通过XPath查询？menu下input查询结果不符

问题出在XPath表达式的写法上：//input会从整个文档的根节点开始搜索所有<input>元素——哪怕你传入了.menu元素作为查询上下文，//的特性依然会忽略当前上下文，遍历整个DOM树，所以会把外部的第三个input也包含进来。

正确的XPath写法 #

要限定在指定元素的后代中搜索，必须使用相对路径，有两种常用方案：

• .//input：从当前上下文节点（即.menu）开始，查找其所有后代中的<input>元素（包含直接子节点和嵌套子节点），兼容性最强，适合大多数场景
• input 或 ./input：仅查找当前上下文节点的直接子节点中的<input>，如果目标input都是直接子元素，这种写法更高效

修改后的代码示例 #

var menu = document.querySelector('.menu')
var xpath = ".//input" // 替换为相对路径表达式
var arr =[]
var result = document.evaluate(xpath, menu , null, XPathResult.ANY_TYPE, null);
var nodes = result.iterateNext();
while (nodes){
    arr.push(nodes)
    nodes=result.iterateNext();
}
console.assert(arr.length === 2) // 断言成功

补充说明 #

如果你的业务场景中，.menu下的<input>始终是直接子元素（不会嵌套在其他标签内），也可以用更简洁的xpath = "input"，效果和.//input在当前案例中一致；但如果后续DOM结构发生变化（比如input被嵌套进<span>等容器），.//input依然能正确匹配目标节点，适用性更强。

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