乐趣区

关于javascript:DOM-节点的克隆和导入

jiezi

前言

在应用 JS 操作 DOM 节点的时候，咱们经常会用到克隆（或导入）节点的操作，那到底有哪些办法能够实现节点克隆（或导入）的成果呢？

明天，咱们就来总结一下能实现节点克隆（或导入）成果的办法。

node.cloneNode()

提到克隆节点，咱们最先能想到的必定是 node.cloneNode() 办法。

语法

其语法如下：

let cloneNode = targetNode.cloneNode(deep);
  • cloneNode 最终克隆生成的节点正本。
  • targetNode 将要被克隆的指标节点。
  • deep 可选参数，示意是否须要进行深度克隆，即是否须要克隆 targetNode 下的子节点，默认为 false。

举例：

<body>
    <div id="container">
        <div class="header"> 这是头部 </div>
        <div class="body">
            <div class="content"> 内容一 </div>
            <div class="content"> 内容二 </div>
        </div>
    </div>

    <script>
        const target = document.querySelector(".body");
        const cloneNode1 = target.cloneNode();
        console.log("cloneNode1.outerHTML\n\n",cloneNode1.outerHTML);
        const cloneNode2 = target.cloneNode(true);
        console.log("cloneNode2.outerHTML\n\n", cloneNode2.outerHTML);
    </script>
</body>

运行后果如下：

document.importNode()

将内部文档的一个节点拷贝一份，而后能够把这个拷贝的节点插入到以后文档中。语法如下：

let node = document.importNode(externalNode, deep);
  • node 从内部导入到以后文档的节点对象。
  • externalNode 内部文档中将要被导入的指标节点。
  • deep 是否深拷贝，默认为 false。

举例：

<!--iframe.html-->
<body>
    <h1> 这是 Iframe 页面 </h1>
    <div id="container">
        <div class="header"> 这是 Iframe 内容头部 </div>
        <div class="body"> 这是 Iframe 内容主体 </div>
    </div>
</body>

<!--index.html-->
<body>
    <div id="container">
        <div class="header"> 内容头部 </div>
        <div class="body"> 内容主体 </div>
    </div>
    <iframe id="iframe_ele" src="./iframe.html"></iframe>

    <script>
        window.onload = function () {const iframeEle = document.getElementById('iframe_ele');
            const iframeContainer = iframeEle.contentDocument.getElementById("container");
            const importedNode = document.importNode(iframeContainer, true);
            document.body.appendChild(importedNode);
        }
    </script>
</body>

最终成果如下：

document.adoptNode()

从其余的 document 文档中获取一个节点。该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的 ownerDocument 属性会变成以后的 document 文档。之后你能够把这个节点插入到以后文档中。语法：

let node = document.adoptNode(externalNode);
  • node 从内部文档中获取到的节点对象。
  • externalNode 将要被导入的内部文档中的节点对象。

举例：

<!--iframe.html-->
<body>
    <h1> 这是 Iframe 页面 </h1>
    <div id="container">
        <div class="header"> 这是 Iframe 内容头部 </div>
        <div class="body"> 这是 Iframe 内容主体 </div>
    </div>
</body>

<!--index.html-->
<body>
    <div id="container">
        <div class="header"> 内容头部 </div>
        <div class="body"> 内容主体 </div>
    </div>
    <iframe id="iframe_ele" src="./iframe.html"></iframe>

    <script>
        window.onload = function () {const iframeEle = document.getElementById('iframe_ele');
            const iframeContainer = iframeEle.contentDocument.getElementById("container");
            const node = document.adoptNode(iframeContainer);
            document.body.appendChild(node);
        }
    </script>
</body>

成果：

总结

以上就是应用 JS 克隆（或导入）DOM 节点的办法总结。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

退出移动版