在前端开发中，克隆节点是一项非常常见和重要的技术。克隆节点被广泛应用于替换、移动、重用和扩展HTML文档中的节点，并在JS代码中经常被使用。

其中，clonenode()方法是克隆节点的一种基本方式，让我们深入了解如何使用clonenode()方法克隆HTML节点。

1. 什么是clonenode()？

clonenode()是DOM标准规范中定义的Node接口中的方法，用于创建当前节点的副本。通过这个方法，我们可以克隆一个节点，以便在文档中创建一个完全相同的副本或者进行其它处理。

该方法是Node接口下的一个原生方法，因此不需要额外的导入或者安装依赖，可以在JavaScript中直接调用使用。

2. 如何使用clonenode()方法

要克隆一个节点,我们需要先选中需要克隆的节点,然后调用clonenode()方法，如下所示：

var newNode = node.cloneNode(deep);

其中, node是要克隆的节点，newNode是克隆出来的新节点，deep为一个布尔值，表示是否克隆深度，即是克隆深度还是浅度。

· 深度克隆

当我们把deep设置为true时，就会进行深度克隆。深度克隆会将整个节点及其子孙节点完整地复制并插入文档树中。

例如，如果我们要克隆一个含有多个子节点的div节点：

var originNode = document.querySelector('.origin-node');

var cloneNodeDeep = originNode.cloneNode(true);

上述代码中，我们利用querySelector函数获取class为“origin-node”的div节点的引用，然后利用cloneNode方法深度克隆出一个新的节点cloneNodeDeep。当第二个参数设置为true时，即克隆子孙节点，那么这个新的节点会克隆所有的后代节点，包括文本节点、元素节点和属性节点，如图所示：