JavaScript第十二讲：DOM编程“创建，删除，替换，插入节点”

目录

1. 创建节点

2. 删除节点

3. 替换节点

4. 插入节点

使用appendChild()

使用insertBefore()

深入解析与注意事项

1. 创建节点

在HTML DOM中，我们通常使用JavaScript的document.createElement()方法来创建元素节点，使用document.createTextNode()方法来创建文本节点。

示例代码：

// 创建一个新的<p>元素节点  
var newElement = document.createElement("p");  
  
// 创建一个文本节点  
var textNode = document.createTextNode("这是一个新的段落。");  
  
// 将文本节点添加到<p>元素节点中  
newElement.appendChild(textNode);  
  
// 将<p>元素节点添加到文档的body中  
document.body.appendChild(newElement);

2. 删除节点

要从DOM中删除一个节点，我们可以使用removeChild()方法。这个方法需要一个参数，即要删除的节点。

示例代码：

// 假设我们有一个id为"myElement"的元素要删除  
var elementToRemove = document.getElementById("myElement");  
  
// 获取其父元素  
var parentElement = elementToRemove.parentNode;  
  
// 从父元素中删除该元素  
parentElement.removeChild(elementToRemove);

3. 替换节点

在DOM中，我们通常不直接“替换”一个节点，而是先删除要替换的节点，然后在同一位置插入新的节点。但为了方便，我们可以将这两个步骤封装在一个函数中。

示例代码：

function replaceNode(oldNode, newNode) {  
    var parent = oldNode.parentNode;  
    if (parent) {  
        parent.replaceChild(newNode, oldNode);  
    }  
}  
  
// 创建一个新的<p>元素节点和文本节点  
var newElement = document.createElement("p");  
var newTextNode = document.createTextNode("这是替换后的段落。");  
newElement.appendChild(newTextNode);  
  
// 假设我们有一个id为"myElement"的元素要替换  
var oldElement = document.getElementById("myElement");  
  
// 调用函数替换节点  
replaceNode(oldElement, newElement);

4. 插入节点

在DOM中，插入节点通常涉及以下几个方法：

• appendChild(): 将节点添加到父节点的子节点列表的末尾。
• insertBefore(): 将节点插入到参考节点之前。

示例代码：

使用appendChild()

// 创建一个新的<p>元素节点和文本节点  
var newElement = document.createElement("p");  
var newTextNode = document.createTextNode("这是通过appendChild()添加的段落。");  
newElement.appendChild(newTextNode);  
  
// 将新元素添加到文档的body末尾  
document.body.appendChild(newElement);

使用insertBefore()

// 假设我们有一个id为"referenceElement"的参考元素  
var referenceElement = document.getElementById("referenceElement");  
  
// 创建一个新的<p>元素节点和文本节点  
var newElement = document.createElement("p");  
var newTextNode = document.createTextNode("这是通过insertBefore()添加的段落，位于参考元素之前。");  
newElement.appendChild(newTextNode);  
  
// 将新元素插入到参考元素之前  
referenceElement.parentNode.insertBefore(newElement, referenceElement);

深入解析与注意事项

• 在进行DOM操作时，要特别注意节点之间的关系，特别是父子关系和兄弟关系。
• 在删除或替换节点之前，最好先检查该节点是否存在，以避免因尝试操作不存在的节点而引发错误。
• 插入节点时，要注意插入的位置和参考节点的选择，以确保新节点被放置在正确的位置。
• DOM操作可能会对页面的性能和用户体验产生影响，特别是在处理大量数据时。因此，在可能的情况下，应尽量减少不必要的DOM操作，或使用更高效的方法来更新页面内容。

希望今天的讲解对您有所帮助！终会与你重逢sj！

respect！