为什么手动高亮web元素后document.evaluate正常，直接在浏览器控制台执行失败

问题根因 #

报错核心是document.evaluate返回的singleNodeValue为null，即首次执行时未匹配到目标元素。
选中元素后执行成功的原因是Chrome控制台会自动将执行上下文切换到你选中元素所属的文档/iframe环境，默认首次打开控制台时上下文是顶层页面top，如果目标元素在嵌套iframe内就会匹配失败。

调整方案 #

• 方案1：手动指定执行上下文 #

  控制台顶部有默认显示为top的上下文下拉选择框，提前选中目标元素所属的iframe对应的选项即可。
  如果需要代码自动适配iframe，可使用如下写法：

  // 先定位到目标元素所属的iframe，替换选择器为实际iframe的匹配规则
  const targetIframe = document.querySelector('iframe[name=xxx]')
  const res = targetIframe.contentDocument.evaluate(
    '//*[contains(@class,"column-title")]//*[contains(text(),"Cut")]', 
    targetIframe.contentDocument, 
    null, 
    XPathResult.FIRST_ORDERED_NODE_TYPE, 
    null
  ).singleNodeValue?.innerHTML
  console.log(res)
  

• 方案2：优化XPath匹配规则 #

  原contains(text(),"Cut")仅匹配元素第一个直接子文本节点的内容，如果文本前后带空格、或者存在嵌套子文本节点，会匹配失败，可以修改为匹配整个元素的标准化文本内容：

  const res = document.evaluate(
    '//*[contains(@class,"column-title")]//*[contains(normalize-space(),"Cut")]', 
    document, 
    null, 
    XPathResult.FIRST_ORDERED_NODE_TYPE, 
    null
  ).singleNodeValue?.innerHTML
  console.log(res)
  

• 通用优化 #

  所有写法中给singleNodeValue加上可选链操作符?.，匹配不到元素时只会返回undefined，不会抛出类型错误。

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