Question

嘿所有人，
我有一个JavaScript问题困扰我好几个小时了。既然我似乎无法想出任何有用的东西，我会问你的意见。这是目标：

JS在页面加载时执行，克隆了文档结构（我不相信你只能窃取文档元素的子节点，所以我可能只需要遍历所有对象并复制它们的所有属性）到一个隐藏的IFrame，它位于页面外。
克隆完成后，事件侦听器将附加到等待击键和其他操作发生的大多数元素（不包括IFrame和其他隐藏元素，如脚本标记）。这些操作将转换为对原始文档的更改，即对所执行元素的属性的修改。
当发生这些变化时，需要将它们镜像到IFrame中的相应元素（如果在文档中对元素＃abc进行了更改，则IFrame中的元素#abc也应该更新）。这里的问题是，不能保证有一种独特的方式来引用IFrame中的镜像元素，而不是将所有元素分配为数字步进ID，我希望尽可能避免这种情况。

演示：

文档

<html>
<body>
    <iframe></iframe>
    <div>a</div>
    <div>b</div>
    <div>a</div>
</body>
</html>

的IFrame

<html>
<body>
    <div>a</div>
    <div>b</div>
    <div>a</div>
</body>
</html>

如果实际文档的第一个div中的“a”更改为“c”（通过element.innerHTML，让我们说），此更改必须反映在IFrame中的相应div（第一个）中。

你们和男士们能想出一种方法来实现这一目标吗？

谢谢＆amp;干杯，
PhpMyCoder

如果这有点含糊，我道歉。我试图不要太具体，以便其他人可以从给出的任何答案中受益。如果您想要更简洁的解释，我可以编辑一个。此外，抱歉没有在这里提供代码。这更像是一个理论问题，所以我不认为具体的代码是必要的。同样，如果你需要它，我可以将它附加到这个问题上。

Answer 1

您的递增密钥不必分配给克隆元素的ID，它可以是任意属性（我注意到jQuery会这样做，但不确定是什么触发它）。但是，我不确定再找到克隆元素的最佳方法是什么，没有迭代每一个（或使用类似jQuery的库，这听起来在这种情况下可能不是一个糟糕的建议）。 / p>

另一种选择是在创建克隆时将克隆元素保存在原始元素中。由于DOM节点只是Javascript对象，因此您可以添加任何您喜欢的属性。所以你可以这样做：

var clone = node.cloneNode(true);
node.clonedNode = clone;
// Add clone to iframe document

（不确定cloneNode是否适用于整个文档，看起来您可能需要importNode，因为您要将其添加到其他文档中）

然后在事件监听器中：

var clone = event.target.clonedNode;

有兴趣知道这是否可以在浏览器中可靠地运行！

另外，请查看this answer类似的问题，其中解决方案是使用原始元素作为键的字典，将克隆元素作为值。