获取适当的 DOM 副本

Question

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

如果我 select 最上面的 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>

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

Answer 1

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

新文档上下文显示在树视图中 #document。

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

获取适当的 DOM 副本

Get a proper DOM copy

dom

google-chrome

google-chrome-devtools