Question

使用MooTools，当DOM准备就绪时，我在变量中缓存一些DOM元素，如下所示：

var mc = $('main-content'),
    bg = $('bg'),
    arrows = $$('arrows');

bg和arrows都位于mc DOM元素中。我想克隆mc节点，对其执行一些操作，然后将克隆插入DOM：

function updateDOM (parent) {
    var parentID = parent.id,
        oldNode = document.getElementById(parentID),
        clone = oldNode.cloneNode(true);

    // work with clone

    oldNode.parentNode.replaceChild(clone, oldNode);

}

当我运行updateDOM(mc)时，我发现任何其他可能会更改mc，bg或arrows的后续功能都无效。当我执行console.log（）时，它们会显示出来，但它们并不反映自初始化以来所做的任何更改。

考虑到我正在克隆元素，我mc不再引用div#main-content是有道理的。 updateDOM()是一个可供任何元素使用的函数。我是否真的需要硬编码一种方法来重新实例化我缓存的每个变量，或者是否有更动态的方法来实现这一点？

Answer 1

> function updateDOM (parent) {
>     var parentID = parent.id,
>         oldNode = document.getElementById(parentID),
>         clone = oldNode.cloneNode(true);

也许我很厚，但在我看来，上面的函数传递了一个分配给 parent 的元素引用。然后使用getElementById(parent.id)获取对同一元素的引用，然后克隆它。这有什么不同：

function updateDOM (parent) {
    var clone = parent.cloneNode(true);

Answer 2

更改updateDOM以返回新的克隆节点，只需将您的呼叫更改为updateDOM以重新分配变量。

mc = updateDOM(mc);

克隆它们后丢失对DOM元素的引用

2 个答案: