在 javascript 中，精确地在指定 dom 节点下使用 xpath 查找元素，需要巧妙地运用 xpath 表达式。本文将演示如何利用 document.evaluate 函数结合 xpath 表达式，在给定 dom 节点的子树中进行精准查找，避免全局搜索带来的误差。
问题： 许多开发者在使用 document.evaluate 函数时，容易犯一个错误：使用 //element 这样的表达式，这会在整个 DOM 树中查找元素，而非仅限于目标节点的子树。
解决方案： 关键在于 XPath 表达式的起始点。为了限制搜索范围，我们需要在 XPath 表达式前添加一个点 (. )。 . 代表当前节点。因此，.//element 表示从当前节点开始，向下递归搜索所有 element 元素。
示例： 假设我们想在名为 menu 的 div 节点下查找所有 input 元素。错误的代码如下：
var menu = document.querySelector('.menu');
var xpath = '//input'; // 错误：全局搜索
// ... (其余代码)
正确的代码应该这样写：
立即学习“Java免费学习笔记（深入）”；
var menu = document.querySelector('.menu');
var xpath = './/input'; // 正确：从 menu 节点开始搜索
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); // 断言应该通过
通过将 XPath 表达式修改为 .//input，我们确保了搜索只在 menu 节点及其子节点内进行。
更复杂的查询： 对于更复杂的场景，例如查找 class 为 "tInput" 且 value 为 "100" 的 input 元素，可以使用更精细的 XPath 表达式：
var xpath = './/input[@class="tInput" and @value="100"]';
记住，. 是限制 XPath 搜索范围的关键。 它明确指定了搜索的起始节点，避免了在整个 DOM 树中进行不必要的全局搜索，从而提高了查找效率和准确性。
