Question

我正在通过DOMImplementation.createHTMLDocument()创建一个文档对象，并且要插入带有innerHTML属性的html。之后，我将节点附加到现实中，如下所示：

function appenderController (nodes,target,uid){

    for(let i = 0 ; i < nodes.children.length ; i++) {
        if(nodes.children[i].children.length > 0){
            if(nodes.nodeType === "9"){
                appenderController(nodes.children[i],target);
                continue;
            }

            let realnode = appender(target, nodes.children[i]);
            appenderController(nodes.children[i],realnode);

        }
        if (uid && nodes.children[i].nodeName.toLowerCase() === uid) {
            nodes.children[i].remove();
            return;
        }
        appender(target, nodes.children[i]);
    }




}

在某些情况下，我会向文档中添加更多html，并且因为innerhtml会再次创建整个文档，所以我还向每个节点添加了特殊属性，以跟踪已添加的节点。当我用appenderController递归调用nodes = fakedocument.body时出现问题，但是在另一个函数中，我正在更新我们的fakedocument的innerhtml，在appenderController的下一次迭代中，它将继续在旧的fakedocument.body上进行迭代。，即使我使用innerhtml并再次更新节点，也如何保留对假文档的引用

示例：

var html='
    <html>
    <head>
    </head>
    <body>
    <div id="somediv1"></div>
    </body>
    </html>'
;

var dom = document.implementation.createHTMLDocument();

dom.documentElement.innerHTML = html;

var body = dom.body;

var html2='
    <html>
    <head>
    </head>
    <body>
    <div id="somediv1"></div>
    <div id="somediv2"></div>
    </body>
    </html>'
;

dom.documentElement.innerHTML = html2;

现在，如果我们查看“ body” var，就不会有“ somediv2”，这正是我的函数中发生的事情，在某种程度上，我正在更新我的伪造文档的innerhtml，但是“ appenderController”继续迭代旧节点

Answer 1

为每个元素分配唯一的ID。然后，按ID访问元素，既可以访问真实DOM，也可以访问临时DOM。

请勿存储对元素的引用，而应存储其ID。

—

您还可以从一个import到另一个DOM节点，而不用使用innerHTML替换整个树。这种方法不会干扰父元素的迭代。

https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode

InnerHTML每次都会创建新节点（新引用）

1 个答案: