view-source与document.querySelector获取内容为何存在差异？

问题描述 #

使用选择器 document.querySelector('script[data-target="react-app.embeddedData"]') 能匹配到唯一的script标签，但执行后该标签的innerText为空。但用view-source查看时，这个script标签的内容是存在的。已知该元素内容是动态生成的，无论先执行选择器还是先查看源文件，结果都是view-source显示正常，querySelector获取为空。

软件版本 #

• Google Chrome 版本 125.0.6422.141（正式版本）（64位）

原因分析及解决办法 #

1. 页面JS动态清空了script内容 #

很多动态渲染的网站会在页面加载完成后，用JS将初始化用的script标签内容清空（避免重复执行或缩减DOM体积）。view-source展示的是服务器返回的原始HTML响应，而querySelector获取的是当前实时DOM状态，两者自然出现差异。

解决办法：
直接抓取页面原始HTML文本，用正则匹配目标内容：

fetch('目标页面URL')
  .then(res => res.text())
  .then(html => {
    const regex = /<script[^>]+data-target="react-app\.embeddedData"[^>]*>([\s\S]*?)<\/script>/i;
    const match = html.match(regex);
    if (match) {
      const scriptContent = match[1];
      console.log(scriptContent);
    }
  });

2. 脚本类型导致内容访问方式不同 #

如果该script标签的type为非JS类型（比如application/json），部分浏览器可能不会将内容暴露在innerText中，但原始HTML里依然保留内容。

解决办法：
尝试读取innerHTML或textContent属性：

const script = document.querySelector('script[data-target="react-app.embeddedData"]');
console.log(script.innerHTML); // 或 script.textContent

3. 页面渲染时机问题 #

可尝试在脚本内容被修改前执行代码，或追踪修改动作：

• 用DOMContentLoaded事件提前监听：

  document.addEventListener('DOMContentLoaded', () => {
    const script = document.querySelector('script[data-target="react-app.embeddedData"]');
    console.log(script.textContent);
  });
  

• 在浏览器控制台Sources面板中，给目标script标签设置DOM断点（右键标签→Break on→Subtree modifications），查看具体是哪段代码清空了内容。

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