如何用JavaScript获取包含动态注入内容的HTML文档完整代码？

完全可行。浏览器的DOM会实时同步所有通过JavaScript动态注入的HTML元素、脚本、样式等内容，我们可以直接从当前DOM状态中提取完整的文档代码。以下是不同场景的代码示例：

1. 获取包含所有动态HTML的完整文档代码 #

这个方法会返回当前页面中<html>标签的完整代码，包括所有动态插入的元素、内联脚本和样式：

// 获取完整的HTML文档代码（含所有动态注入内容）
const fullDocumentHTML = document.documentElement.outerHTML;
console.log(fullDocumentHTML);

注意：外部引入的CSS（<link>标签）和脚本（带src的<script>）只会保留标签本身，不会自动内联其外部内容。

2. 获取所有动态注入的内联样式 #

如果需要提取所有生效的内联样式（包括动态插入的<style>标签和元素的style属性）：

// 提取所有内联<style>标签的完整代码
const inlineStyleTags = Array.from(document.querySelectorAll('style'))
  .map(styleTag => styleTag.outerHTML)
  .join('\n');

// 可选：提取所有元素的内联style属性内容
const elementInlineStyles = Array.from(document.querySelectorAll('*'))
  .map(el => `${el.tagName.toLowerCase()} { ${el.style.cssText} }`)
  .join('\n');

// 合并所有内联样式
const fullInlineCSS = `${inlineStyleTags}\n\n${elementInlineStyles}`;
console.log(fullInlineCSS);

如果要获取外部CSS文件的内容，需通过fetch请求对应URL，但要注意跨域限制——只有目标资源设置了CORS响应头时才能成功获取。

3. 获取所有动态注入的脚本 #

提取页面中所有脚本标签（含动态插入的内联和外部脚本）：

// 提取所有<script>标签的完整代码
const allScripts = Array.from(document.querySelectorAll('script'))
  .map(scriptTag => scriptTag.outerHTML)
  .join('\n');
console.log(allScripts);

// 可选：获取外部脚本的内容（需处理跨域）
async function fetchExternalScript(scriptUrl) {
  try {
    const res = await fetch(scriptUrl);
    return await res.text();
  } catch (err) {
    console.error('无法获取外部脚本:', err);
    return null;
  }
}

// 示例：获取第一个外部脚本的内容
const firstExternalScript = document.querySelector('script[src]');
if (firstExternalScript) {
  fetchExternalScript(firstExternalScript.src).then(content => {
    console.log('外部脚本内容:', content);
  });
}

4. 处理影子DOM（Shadow DOM） #

如果页面使用了影子DOM，需要额外遍历影子DOM树来获取其中的动态内容：

function extractShadowDOMContent(element) {
  let content = '';
  if (element.shadowRoot) {
    content += element.shadowRoot.innerHTML;
    // 递归遍历子元素的影子DOM
    element.shadowRoot.querySelectorAll('*').forEach(child => {
      content += extractShadowDOMContent(child);
    });
  }
  return content;
}

// 获取页面所有影子DOM的内容
const shadowDOMContent = extractShadowDOMContent(document.body);
console.log(shadowDOMContent);

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