JavaScript DOM操作之cloneNode文本节点克隆

在JavaScript中，有时需要在DOM操作中克隆一个节点，cloneNode()方法就是帮助我们实现节点克隆的方法。cloneNode()方法可以深克隆节点及其包含的所有子节点，除了子节点的文本内容，但通过cloneNode()方法，我们还可以克隆文本节点。本篇攻略主要讲述cloneNode()克隆文本节点的使用技巧。

cloneNode()方法

cloneNode()方法是浏览器原生提供的Node接口方法，用于深克隆节点，可选参数为Boolean类型，当参数为true时，会克隆当前节点包含的所有子节点及属性，当参数为false（默认值）时，只克隆当前节点本身及属性。cloneNode()方法不会复制事件处理程序，因为事件处理程序会随着文档的状态而发生变化，所以事件处理程序不能被简单地复制。

cloneNode()克隆文本节点示例1

<html>
<body>
    <div id="box">Hello World</div>
    <script>
        var box = document.getElementById("box");
        var box_clone = box.cloneNode(true);
        document.body.appendChild(box_clone);
    </script>
</body>
</html>

上面的示例代码中，我们克隆了一个元素节点，但是克隆出来的新节点内容并没有包含该元素节点的内部文本内容。如果我们想要克隆其内部文本节点，可以在codeNode()方法克隆节点之后，手动将该节点的内部文本节点创建并添加到克隆节点并覆盖原先节点的内容。

cloneNode()克隆文本节点示例2

<html>
<body>
    <div id="box">Hello World</div>
    <script>
        var box = document.getElementById("box");
        var box_clone = box.cloneNode(true);
        var text = document.createTextNode(box.textContent);
        box_clone.replaceChildren(text);
        document.body.appendChild(box_clone);
    </script>
</body>
</html>

在该示例代码中，我们首先克隆了元素节点，并将内部文本节点用textNode创建出来，然后使用replaceChildren()方法将文本节点替换到克隆节点的内部。