使用document.evaluate的xpathResult作为contextNode无效，求排查问题

嘿，我瞅了下你遇到的问题和贴的代码片段，很快就发现症结所在啦——你把XPathResult对象直接当作contextNode传给document.evaluate()了，但这个参数根本不接受XPath查询结果集，它要求的是一个合法的DOM元素节点，这就是为啥你一直失败的核心原因。

先明确核心要求 #

document.evaluate()的第二个参数（也就是contextNode）必须是单个DOM节点（比如你用querySelector拿到的元素，或者从XPathResult里提取出来的某一个节点），而不是整个XPathResult快照/结果对象。你之前的写法相当于把“查询结果的集合”当成了“查询的上下文节点”，这完全不符合API的设计逻辑。

给你一个修正后的示例 #

假设你原本想先获取顶层的<li>节点，再基于每个<li>去查询内部的内容，正确的做法是先从XPathResult里取出具体的DOM节点，再把这个节点作为contextNode传入下一次查询：

const getAllLiButton = document.querySelector("#get-all-li");
const getTitleAndTextButton = document.querySelector("#get-title-text");

getAllLiButton.addEventListener("click", getAllLi);
getTitleAndTextButton.addEventListener("click", getTitleAndText);

function getAllLi() {
  var records = [];
  // 第一步：获取顶层li的快照结果
  let topLevelResults = document.evaluate(
    "/html/body/ul/li", 
    document, 
    null, 
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, 
    null
  );

  // 遍历快照，取出每个具体的DOM节点作为contextNode
  for (let i = 0; i < topLevelResults.snapshotLength; i++) {
    const liNode = topLevelResults.snapshotItem(i);
    // 第二步：用取出的liNode作为上下文，查询它内部的子元素
    const titleResult = document.evaluate(
      "./h3", // 注意这里要用相对路径，基于contextNode
      liNode, // 这里传入的是DOM节点，不是XPathResult！
      null,
      XPathResult.FIRST_ORDERED_NODE_TYPE,
      null
    );
    const textResult = document.evaluate(
      "./p",
      liNode,
      null,
      XPathResult.FIRST_ORDERED_NODE_TYPE,
      null
    );

    // 安全获取文本内容，避免null报错
    const title = titleResult.singleNodeValue?.textContent.trim();
    const text = textResult.singleNodeValue?.textContent.trim();
    
    records.push({ title, text });
  }
  console.log("提取的内容：", records);
}

function getTitleAndText() {
  // 这里也可以用类似的逻辑，先拿到上下文节点再查询
}

额外几个要注意的点 #

• 当使用contextNode时，XPath表达式要写成相对路径（比如用./开头），不然表达式会从文档根节点重新查询，完全失去了上下文节点的作用。
• 如果你的XPathResult是UNORDERED_NODE_ITERATOR_TYPE类型，需要用iterateNext()方法逐个取出DOM节点，而不是snapshotItem()。
• 每次取出节点后，最好用可选链?.判断节点是否存在，避免出现Cannot read property 'textContent' of null这类报错。

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