DOM 克隆节点学习笔记

什么是 DOM 克隆节点？

在 JavaScript 中，我们经常需要在文档中动态地创建和删除节点。有时候我们需要复制一个节点或一组节点，这时就需要用到 DOM 克隆节点。

DOM 克隆节点可以复制一个节点及其子节点，并返回复制后的新节点。可以选择是否复制该节点的子孙节点以及属性。

如何使用 DOM 克隆节点？

DOM 克隆节点可以使用 cloneNode 方法来实现。cloneNode 方法可以接受一个布尔值作为参数，表示是否复制该节点的所有子孙节点。如果不传参则默认为 false，只复制该节点本身。

以下是一个简单的例子：

htmlCopy Code
<div id="parent">
  <p>这是要克隆的节点</p>
</div>

javascriptCopy Code
const parent = document.querySelector('#parent');
const clone = parent.cloneNode(true);
console.log(clone);

运行结果：

htmlCopy Code
<div id="parent">
  <p>这是要克隆的节点</p>
</div>

实际应用场景举例

在表格中添加新行时，可以先克隆一行之前的行，然后再修改其中的内容。

htmlCopy Code
<table>
  <tr id="row">
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
  </tr>
</table>
<button onclick="addRow()">添加行</button>

javascriptCopy Code
function addRow() {
  const row = document.querySelector('#row');
  const newRow = row.cloneNode(true);
  newRow.querySelector('td:first-child').textContent = '新一行';
  document.querySelector('table').appendChild(newRow);
}

在多页面应用中，可以使用 DOM 克隆节点复制一个相同的导航菜单，避免重复编写相同的 HTML 结构。

htmlCopy Code
<div id="nav-menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>
<div id="page1">
  <h1>欢迎来到首页</h1>
</div>
<div id="page2">
  <h1>关于我们</h1>
</div>
<div id="page3">
  <h1>联系我们</h1>
</div>

javascriptCopy Code
const navMenu = document.querySelector('#nav-menu');
const cloneNav = navMenu.cloneNode(true);
document.querySelector('#page2').appendChild(cloneNav);

以上是 DOM 克隆节点的简单介绍，希望对你有所帮助。