如何通过JavaScript获取浏览器Elements标签中显示的当前渲染DOM？

完全可行，分两种场景处理：

常规前端框架渲染的DOM（React/Vue等） #

直接用原生JS就能拿到和Elements面板完全一致的内容，试试这两个命令：

• document.documentElement.outerHTML：获取包含<html>标签在内的整个文档完整代码
• document.body.parentNode.innerHTML：获取<html>标签内部的全部渲染内容

你之前觉得这个方法无效，大概率是混淆了「页面原始源码（view-source）」和「客户端渲染后的真实DOM」——框架最终会把渲染好的节点挂载到真实DOM树上，所以这两个命令拿到的就是Elements面板里显示的最终结果，和服务器返回的原始HTML完全不同。

Web Components的Shadow DOM #

如果页面用到Web Components，Elements面板会展开Shadow Root的内容，但上面的命令默认不会包含这部分。可以写个递归函数遍历所有元素，把Shadow DOM的内容也整合进去：

function getFullRenderedHTML() {
  function traverse(el) {
    let html = el.outerHTML;
    // 检查当前元素是否存在Shadow Root
    if (el.shadowRoot) {
      const shadowContent = Array.from(el.shadowRoot.children)
        .map(child => traverse(child))
        .join('');
      // 将Shadow内容插入到原标签内部
      html = html.replace(new RegExp(`></${el.tagName.toLowerCase()}>$`), `>${shadowContent}</${el.tagName.toLowerCase()}>`);
    }
    return html;
  }
  return traverse(document.documentElement);
}

// 在控制台执行即可输出完整渲染内容
console.log(getFullRenderedHTML());

搜索关键词推荐 #

如果需要找更多相关方案，可以用这些关键词：

• 中文：「渲染后DOM提取」「Shadow DOM 序列化」「Web Components DOM 捕获」
• 英文：「extract rendered browser DOM」「shadow DOM serialize」「capture web components HTML」

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