JavaScript DOM（Document Object Model）是用于处理HTML和XML文档的标准编程接口。DOM将网页视为一个树形结构，其中每个部分都是一个节点，包括元素、属性、文本等。通过DOM，我们可以使用JavaScript动态地修改网页内容，例如新建或删除HTML元素。
在给定的实例中，我们看到两个关键的操作：新建元素和删除元素。
（一）新建元素：
在JavaScript中，新建HTML元素主要通过`document.createElement()`方法。以下是一个创建新`<p>`元素的例子：
```javascript
var newEle = document.createElement("p");
```
接下来，我们可以创建一个文本节点，并将其附加到新创建的元素中，使用`document.createTextNode()`方法：
```javascript
var node = document.createTextNode("这是使用Javascript创建的新段落。");
newEle.appendChild(node);
```
我们需要将这个新元素插入到已有元素中，这里使用`appendChild()`方法：
```javascript
var div1_ele = document.getElementById("div1");
div1_ele.appendChild(newEle);
```
这个过程展示了如何通过DOM动态生成HTML内容并将其添加到网页的指定位置。
（二）删除元素：
删除HTML元素则需要用到`removeChild()`方法。在删除元素之前，我们需要先找到元素的父节点，然后调用`removeChild()`方法删除该元素。以下是两个删除元素的示例：
1. 显式获取父元素：
```javascript
function deleteEle() {
var parent = document.getElementById("div_02");
var child = document.getElementById("div_02_p2");
parent.removeChild(child);
}
```
在这个例子中，我们首先通过`getElementById()`找到父元素`div_02`，然后获取要删除的子元素`div_02_p2`，最后调用`removeChild()`方法删除它。
2. 自动获取父元素：
```javascript
function deleteEle3() {
var child = document.getElementById("div_02_p3");
child.parentNode.removeChild(child);
}
```
这个方法更简洁，直接通过`child.parentNode`获取父元素，然后删除指定的子元素。
在实际应用中，这些DOM操作非常常见，它们使JavaScript成为动态网页开发中的强大工具。通过理解并熟练掌握这些基本的DOM操作，开发者能够实现丰富的用户交互，如动态更新内容、响应用户操作等。
JavaScript DOM节点操作是Web开发中不可或缺的一部分，无论是新建元素来增加页面内容，还是删除元素来实现动态更新，都体现了JavaScript在网页动态化方面的强大能力。在实际项目中，开发者还需要注意性能优化，避免频繁操作DOM导致的性能下降。通过使用DOM片段（DocumentFragment）、事件委托等技术，可以在保持页面互动性的同时，提高程序效率。
