获取正确的 DOM 副本答案

【问题标题】：Get a proper DOM copy获取正确的 DOM 副本
【发布时间】：2015-09-16 02:07:58
【问题描述】：

为了调试 Chrome 或 Firefox 上不存在的 IE9 样式问题，我想我可以将 IE9 上的“计算”DOM 与这两个浏览器进行比较（我说计算 DOM，因为我的大部分页面都是通过DOM 操作，因为它使用 GWT）。但是，我无法使用 Google Chrome 获得正确的 DOM 副本。我去“检查元素”，然后单击我想要的元素，右键单击>复制，然后将其粘贴到文本文件中。

如果我选择顶部的 html 元素，我最终会得到那个！

<html><head>
        <title>title</title>
        </head><frameset>
            <frame src="ezaeza.jsp" name="sqdsqdsq" id="sqdsqdsq" scrolling="no" noresize="noresize">
            <frameset cols="210,20,*" border="0" name="retract" id="retract">
                <frame src="one.jsp" noresize="noresize" name="jiojiji" id="jiojiji">
                <frame src="two.jsp" noresize="noresize" name="jiojiji" id="jiojiji" scrolling="no">
                <frame src="three.jsp" noresize="noresize" name="main" id="main">
            </frameset>
        </frameset>     


</html>

我最终可能会得到一个比父树副本更大的子树副本。这毫无意义，知道我做错了什么吗？

【问题讨论】：

标签： google-chrome dom google-chrome-devtools

【解决方案1】：

这似乎按预期工作。这里的复制命令是复制主文档上下文的 DOM。例如，框架和 iframe 在主页中创建新的文档上下文。 DevTools 只会复制给定的上下文。要创建完整的结构，您还需要打开每个框架并复制它们的 HTML 元素。如果它们中有框架/iframe，这也是递归的。

一个新的文档上下文在树视图中显示为#document。

对于任何想要对此进行试验的人，可以找到使用框架的示例网站at quackit。

【讨论】：