JavaScript 中的 CloneNode() 方法?

front end technologyjavascriptweb development

顾名思义，它会克隆节点。JavaScript 中的 cloneNode() 方法会复制传入的节点对象并传递克隆节点对象。对于要复制的元素，只需调用 cloneNode() 方法即可。如果您还想复制元素的嵌套元素，请传递 true 作为选项。

如果参数为 true，它会连续克隆节点的所有子节点。如果不是，它只会复制节点本身，而不复制其任何子节点。传递的节点的 parentNode 属性为 null，并且它不是文档树的一部分。复制节点时，每个 Element 节点的特征都会被复制。但请记住，不会复制节点注册的事件侦听器函数。需要注意的是，空组件(如 <input> 和 <img>)元素不受 deep 的影响。

语法

let clonedNode = originalNode.cloneNode(deep);

参数

true - 如果值为 true，则复制可能包含在任何子文本节点以及整个子树中的文本。
false - 如果为 false，则仅复制节点。不会复制子树，这包括节点可能具有的任何文本。

返回值

新节点已克隆。除非使用 Node.appendChild() 之类的方法将克隆节点附加到已是文档一部分的另一个节点，否则它没有父节点，也不能成为文档的一部分。

有用的说明

CloneNode() 除了 DOM 结构之外，还仅从原始节点复制那些属性和内联侦听器。此外，它不会复制通过 addEventListener() 方法添加的任何事件侦听器，也不会复制通过 originalNode.with onclick = eventHandler() 等元素属性添加的事件侦听器。

当复制具有 id 属性的节点并将其放置在同一个页面中时，id 将被复制。在此示例中，您必须在将其包含在 DOM 树中之前修改 id。

示例 1

以下示例中使用 cloneNode() 方法复制 ul> 元素并将其插入到同一个文档中。


<!DOCTYPE html>
<html>
<title>CloneNode() method in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <ul id="main_menu">
      <li>Home</li>
      <li>Facilities</li>
      <li>Activities</li>
      <li>Admissions</li>
      <li>Contact</li>
   </ul>
   <script>
      let menuItem = document.querySelector('#main_menu');
      let clonedMenu = menuItem.cloneNode(true);
      clonedMenu.id = 'mobile_menu';
      document.body.appendChild(clonedMenu);
   </script>
</body>
</html>

如何运作 −

首先，使用 querySelector() 函数选择带有 id 菜单的 ul。
其次，使用 cloneNode() 方法创建 ul 元素的深度克隆。
接下来，为了防止重复，修改克隆元素的 id。
之后，使用 appendChild() 函数将克隆元素附加到 document.body 的子节点。

示例 2

在下面的示例中，最初形成了两个列表。然后通过使用 javascript 方法"cloneNode()"，将第二个列表中的元素之一不加更改地复制到第一个列表中，并且结果也如输出中所示。


<!DOCTYPE html>
<html>
<title>CloneNode() method in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <ul id="menu1">
      <li>Home</li>
      <li>Facilities</li>
   </ul>
   <ul id="menu2">
      <li>Activities</li>
      <li>Admissions</li>
   </ul>
   <script>
      let menu_item = document.getElementById("menu2").firstChild;
      let clonedItem = menu_item.cloneNode(true);
      document.getElementById("menu1").appendChild(clonedItem);
   </script>
</body>
</html>

示例 3

在此示例中，让我们了解如何使用 JavaScript 克隆 Div 并更改其 ID

JavaScript 的 cloneNode 方法可用于克隆 div 并修改其 id。然后可以通过设置 id 属性来配置克隆元素的 ID。包含文档的 div 显示并将 getElementById 分配给 div。

然后我们克隆 div 并通过调用 div.cloneNode 并将其分配给 clone。要执行深度克隆，我们诚实地输入。最后，我们将 clone.id 设置为复制的 div 的 ID。之后，我们使用 clone 调用 document.body.appendChild 来增加主体。


<!DOCTYPE html>
<html>
<title>CloneNode() method in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <div id='tutpoint'>
      Learn coding with tutorialspoint by sitting everywhere
   </div>
   <script>
      const div = document.getElementById('tutpoint')
      const cloneDiv = div.cloneNode(true);
      cloneDiv.id = "tutpoint1";
      document.body.appendChild(cloneDiv);
   </script>
</body>
</html>