今天我们继续来去复习DOM操作的三个API，分别为replaceChild、cloneNode、removeChild，替换节点、克隆节点、删除节点，下面一个个来看它们的语法以及使用案例。

replaceChild()

replaceChild()用来替换DOM中的节点

语法：

parentNode.replaceChild(newChild, oldChild);

例子

<ul id="menu">
  <li>首页</li>
  <li>服务</li>   
  <li>关于我</li>
  <li>联系我</li>
</ul>

<script>
let menu = document.getElementById('menu');
// 创建一个新节点
let li = document.createElement('li');
li.textContent = '小帅';
// 替换第一个元素
menu.replaceChild(li, menu.firstElementChild);
</script>

cloneNode()

cloneNode()用来克隆一个元素

语法：

let clonedNode = originalNode.cloneNode(deep);

参数说明：

如果deep为true，会克隆元素下的所有子元素
如果deep为false，会只克隆原始节点，不会克隆子元素
originalNode为要克隆的目标元素
最后返回克隆的元素

注意：

除了克隆DOM结构，cloneNode()还会复制原始节点的所有属性和内联事件监听器。但是，它不会复制通过 addEventListener() 添加的事件监听器或 originalNode.onclick = eventHandler()的事件监听器。如果克隆具有 id 属性的节点并将克隆的节点放在同一个页面中，则 id 将是重复的。在这种情况下，需要在添加到 DOM 树之前更改 id。

例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript cloneNode() Demo</title>
</head>
<body>
  <ul id="menu">
    <li>首页</li>
    <li>服务</li>   
    <li>关于我</li>
    <li>联系我</li>
  </ul>
  <script>
    let menu = document.querySelector('#menu');
    let clonedMenu = menu.cloneNode(true);
    clonedMenu.id = 'menu-mobile';
    document.body.appendChild(clonedMenu);
  </script>
</body>
</html>

先找到#menu元素
然后通过cloneNode()克隆它
修改它的ID
最后将其插入到body中

最终HTML结构为

removeChild()

使用removeChild()可以用来删除DOM元素

语法：

let childNode = parentNode.removeChild(childNode);

childNode 是要删除的 parentNode 的子节点。如果 childNode 不是 parentNode 的子节点，则该方法抛出异常。removeChild() 返回从 DOM 树中移除的子节点，但将其保留在内存中，以便以后使用。如果不想将移除的子节点保留在内存中，则使用以下语法：

parentNode.removeChild(childNode);

例子

删除ul下的最后一个子元素

<ul id="menu">
  <li>首页</li>
  <li>产品</li>
  <li>关于我们</li>
</ul>

<script>
let menu = document.getElementById('menu');
menu.removeChild(menu.lastElementChild);
</script>

删除所有节点，使用removeChild()方法

<ul id="menu">
  <li>首页</li>
  <li>产品</li>
  <li>关于我们</li>
</ul>

<script>
let menu = document.getElementById('menu');
while (menu.firstChild) {
      
      
  menu.removeChild(menu.firstChild);
}
</script>

使用innerHTML也可以进行删除所有节点

<ul id="menu">
  <li>首页</li>
  <li>产品</li>
  <li>关于我们</li>
</ul>

<script>
let menu = document.getElementById('menu');
menu.innerHTML = '';
</script>

最后

今天我们复习了replaceChild()，cloneNode()和removeChild()方法，你觉得它们和jQuery和方法有什么区别呢？

如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新

JS DOM 编程复习笔记 -- replaceChild、cloneNode、removeChild（八）

replaceChild()

例子

cloneNode()

例子

removeChild()

例子

最后

猜你喜欢