<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
hello world
<span>你好世界</span>
<span>你好世界</span>
</div>
</body>
</html>
执行下面的代码
const xPathEvaluator = new XPathEvaluator()
const expression = xPathEvaluator.createExpression('/html/body')
console.log(expression.evaluate(document.querySelector('div')).iterateNext())
console.log(expression.evaluate(document).iterateNext())
evaluate 方法中第一个参数是上下文节点,以上执行的结果是相同的,都是 body 元素,请问一下这个上下文节点参数的作用是什么?
evaluate 方法的第一个参数传递给了该表达式。这个上下文节点参数指定了 XPath 表达式执行的 起始点 或者搜索的范围。
只不过在题主这个例子中，刚好 不会 体现出变化
如果将上下文节点设置为 document.querySelector('div')，则表示从 div 元素开始执行 XPath 表达式。因此，在这种情况下，expression.evaluate(document.querySelector(‘div’)).iterateNext() 的结果是 body 元素。
- 首先，document.querySelector(‘div’) 选择了文档中的 div 元素作为上下文节点
- 然后，由于 div 内部没有 html 元素，因此无法匹配到
/html/body这个路径。但是，在这种情况下，XPath 解析器会 自动向外 扩展搜索范围，并从整个文档的 根元素 开始进行搜索。因此，在最终结果中可以找到匹配/html/body的第一个符合条件的节点，也就是 body 元素
如果将上下文节点设置为 document，则表示从整个文档开始执行 XPath 表达式。所以 expression.evaluate(document).iterateNext() 的结果也是 body 元素。
可以看到，在题主的例子中，无论上下文节点是哪个元素（ div 或 document），XPath 表达式都会返回相同的结果 body 元素。因为/html/body 这个表达式本身就选择了 body 元素作为目标。
比如 ../span 是根据你的 evaluate() 的节点作为初始入口来判断的。
