请举例说明动态操作DOM的方法有哪些？

动态操作DOM是前端开发中常见的任务，它允许开发者在运行时改变页面的结构、内容和样式。以下是一些动态操作DOM的主要方法，并附有简要的例子说明：

1. 创建元素：

   • 使用document.createElement(tagName)创建一个新的DOM元素。例如，var newElement = document.createElement('div');会创建一个新的<div>元素。

2. 添加元素：

   • appendChild(newNode)：将一个节点添加到指定父节点的子节点列表的末尾。例如，parentElement.appendChild(newElement);会将新创建的元素添加到parentElement中。
   • insertBefore(newNode, referenceNode)：将一个节点插入到参考节点之前。如果参考节点为null，则新节点会被添加到子节点列表的末尾。

3. 删除元素：

   • removeChild(oldNode)：从DOM中删除一个子节点。例如，parentElement.removeChild(childElement);会从parentElement中删除childElement。
   • remove()：删除当前节点。这是一个更简洁的方法，相当于parentNode.removeChild(thisNode)。

4. 替换元素：

   • replaceChild(newNode, oldNode)：替换一个子节点。例如，parentElement.replaceChild(newElement, oldElement);会将oldElement替换为newElement。

5. 克隆元素：

   • cloneNode(deep)：创建一个节点的精确副本。如果deep参数为true，则复制该节点及其整个子树；如果为false，则只复制该节点本身。

6. 设置/获取属性：

   • setAttribute(name, value)：设置节点的属性值。例如，element.setAttribute('class', 'myClass');会给元素设置一个类名。
   • getAttribute(name)：获取节点的属性值。例如，var value = element.getAttribute('data-custom');会获取元素的自定义数据属性值。
   • removeAttribute(name)：删除节点的属性。例如，element.removeAttribute('disabled');会移除元素的disabled属性。

7. 修改样式：

   • 直接通过元素的style属性修改样式，如element.style.color = 'red';会将元素文本颜色设置为红色。

8. 查询元素：

   • 使用querySelector(selector)和querySelectorAll(selector)根据CSS选择器查找元素。前者返回第一个匹配的元素，后者返回所有匹配的元素列表。

这些方法是前端开发中动态操作DOM的基础，它们允许开发者根据用户交互、数据变化等实时更新页面内容和布局。在实际应用中，这些操作通常会结合事件处理、异步请求等技术一起使用，以创建丰富、动态的网页应用。