如何在JavaScript新开的窗口中使用XPath选取并操作元素？

问题根因 #

你代码里的XPath查询上下文节点传错了：
调用w.document.evaluate时传入的第二个参数是当前父页面的document，而非你要查询的新窗口的w.document，导致XPath是在原页面DOM中查找元素，自然找不到新窗口内的目标节点，iterateNext()返回null后读取属性就会触发报错。

修正方案 #

1. 替换XPath查询的上下文节点为新窗口的document
2. 建议替换固定时长的setTimeout为新窗口的load事件监听，避免页面加载速度波动导致的执行时机错误

修正后的代码如下：

const w = window.open('https://example.com', 'Example', 'width=500, height=500');
w.clickElem = () => {
    const xpath = '//span[text()="Click here"]';
    // 第二个参数替换为w.document，指定在新窗口DOM中查询
    const selectedNodeElements = w.document.evaluate(xpath, w.document, null, XPathResult.ANY_TYPE, null);
    let currentNode = selectedNodeElements.iterateNext();
    while (currentNode) {
        currentNode.click();
        currentNode = selectedNodeElements.iterateNext();
    }
}
// 优先用load事件监听，比固定延迟更可靠
w.addEventListener('load', w.clickElem);
// 如果目标元素是异步渲染的，可保留原setTimeout作为兜底，或者额外加DOM变动监听逻辑
// setTimeout(w.clickElem, 8000);

如果目标元素是页面加载完成后才通过JS异步渲染出来的，可在clickElem函数内加递归重试逻辑，查到元素再执行点击操作。

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