DOM 節點的克隆和匯入

阿新 • • 發佈：2022-02-19

在使用 JS 操作 DOM 節點的時候，我們常常會用到克隆（或匯入）節點的操作，那到底有哪些方法可以實現節點克隆（或匯入）的效果呢？

前言

在使用 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>

效果：