技术指南：精通 DOM 节点的增删查改和替换复制

2024-01-13 20:06:05

在现代 Web 开发中，掌握文档对象模型 (DOM) 节点的操作至关重要。DOM 节点是组成网页文档的基本构建块，了解如何管理这些节点对于创建动态和交互式用户界面至关重要。本文将深入探讨 DOM 节点的增删查改和替换复制，提供详细的分步指南和示例代码。

创建节点

// 创建一个新的 HTML 元素
const newElement = document.createElement('p');
// 设置元素的 innerText
newElement.innerText = 'This is a new paragraph.';

插入节点

// 将新元素插入到文档中
const containerElement = document.getElementById('container');
containerElement.appendChild(newElement);

删除节点

// 删除一个存在的元素
const elementToRemove = document.getElementById('element-to-remove');
elementToRemove.parentNode.removeChild(elementToRemove);

更新节点

// 更新元素的 innerText
const elementToUpdate = document.getElementById('element-to-update');
elementToUpdate.innerText = 'This is the updated text.';

替换节点

// 替换一个元素
const oldElement = document.getElementById('old-element');
const newElement = document.createElement('span');
newElement.innerText = 'This is the new element.';
oldElement.parentNode.replaceChild(newElement, oldElement);

克隆节点

// 复制一个元素
const originalElement = document.getElementById('original-element');
const clonedElement = originalElement.cloneNode(true);
// 将克隆的元素插入到文档中
containerElement.appendChild(clonedElement);