CloneNode()？ 你是不是想复制粘贴？
老铁们，今天咱们聊聊这个“CloneNode()” — JS 里用来复制节点的大杀器！
你可能会问：
1. CloneNode() 是干啥的？
简单来说，它就像一个“复印机”，能把一个节点连同它的所有属性和子节点，统统复制一遍，给你一个一模一样的副本！
举个栗子：
假设你有一个 HTML 结构，里面有一个
标签，还放了一些图片和文字。
html
这是第一段文字
这是第二段文字
你想要复制整个
javascript
const myDiv = document.getElementById('myDiv');
const newDiv = myDiv.cloneNode(true); // 创建副本
这样，newDiv 就变成了一个跟 myDiv 完全一样的副本，包括所有
标签、图片和文字。
2. CloneNode(true) 和 CloneNode(false) 有啥区别？
别看它们只差一个参数，但效果可是天差地别！
1. cloneNode(true)：深复制，不仅复制节点本身，还会复制所有子节点，就像把一个模型整个复制出来，连细节都一模一样。
2. cloneNode(false)：浅复制，只复制节点本身，不复制子节点。就像把一个模型的轮廓复制出来，里面没有细节。
举个栗子：
1. cloneNode(true) 就像把一个完整的模型复制出来，你可以把它拆开，看到每个零件的细节。
2. cloneNode(false) 就像把模型的轮廓画下来，你只能看到外形，看不到内部结构。
3. CloneNode() 可以复制哪些节点？
CloneNode() 可以复制各种节点，包括：
1.
2.
3.
4.
5.
6.
7. 等等等等
只要是 DOM 节点，CloneNode() 都可以复制。
4. 除了复制节点，CloneNode() 还能干啥？
CloneNode() 除了复制节点，还可以用来：
1. 创建新的节点：比如你想在网页上动态添加一个
2. 复用代码：比如你想在一个网页上创建多个相同的按钮，就可以用 cloneNode() 复制一个按钮，然后修改它的内容和样式，创建多个相同的按钮。
3. 创建动态内容：比如你想根据用户的输入动态生成一些内容，就可以用 cloneNode() 复制一个模板，然后修改它的内容和样式，创建动态内容。
5. CloneNode() 有什么限制？
CloneNode() 也有自己的限制：
1. 无法复制事件：cloneNode() 只复制节点本身和它的属性，不复制事件。如果你需要复制事件，需要手动绑定事件。
2. 无法复制对象：cloneNode() 只复制节点本身和它的属性，不复制对象。如果你需要复制对象，需要手动复制对象。
举个例子，你就懂了！
假设你想要创建一个并且每个单元格都包含一个可编辑的文本框，并且当用户点击按钮时，可以添加新的一行，使用 cloneNode() 可以很方便地实现：
html
| 姓名 | 年龄 | 性别 |
|---|---|---|
javascript
const addBtn = document.getElementById('addBtn');
const tableBody = document.querySelector('tbody');
const rowTemplate = tableBody.querySelector('tr');
addBtn.addEventListener('click', () => {
const newRow = rowTemplate.cloneNode(true); // 复制模板
const inputElements = newRow.querySelectorAll('input'); // 获取所有 input 元素
inputElements.forEach(input => {
input.value = ''; // 清空文本框内容
tableBody.appendChild(newRow); // 添加新行
这段代码中，我们先获取了表格的 tbody 和模板行 tr，然后监听了按钮的点击事件。当用户点击按钮时，我们用 cloneNode(true) 复制了模板行，清空了文本框的内容，并将新行添加到表格中。
你觉得如何？
CloneNode() 是不是很厉害？ 你有没有觉得 cloneNode() 很方便？ 你还有什么其他关于 cloneNode() 的问题吗？ 欢迎留言分享你的想法！