DOM 删除节点学习笔记

在DOM中，可以通过JavaScript删除节点。我们通常需要删除节点的原因有：

在页面上移除多余或无效的元素，以改善性能。
更新页面时，需要删除旧元素并添加新元素。

从父节点中删除子节点

在DOM中，子节点可以被从其父节点中删除。下面是一个例子：

Copy Code
<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

<button onclick="removeElement()">删除第二个元素</button>

<script>
function removeElement() {
  var list = document.getElementById("myList");
  list.removeChild(list.childNodes[1]);
}
</script>

</body>
</html>

在这个例子中，removeChild() 方法被用来删除列表中的第二个元素。

删除指定的元素

除了通过父节点删除子节点之外，我们还可以使用remove()方法直接删除指定的元素。下面是一个例子：

Copy Code
<!DOCTYPE html>
<html>
<body>

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li id="orange">Orange</li>
</ul>

<button onclick="removeElement()">删除橙子</button>

<script>
function removeElement() {
  var orange = document.getElementById("orange");
  orange.remove();
}
</script>

</body>
</html>

在这个例子中，remove()方法被用来直接删除具有id="orange"的元素。

总结：在DOM中，删除节点是通过其父节点或直接指定删除的元素来完成。这是一个很常见的操作，在更新和优化页面时特别有用。