举例说明DOM常用的操作方法有哪些？

DOM（文档对象模型）是前端开发中用于操作HTML和XML文档的关键接口。通过DOM，开发者可以编程地访问和修改文档的结构、样式和内容。以下是一些DOM常用的操作方法，我将它们分类并举例说明：

一、查找元素

1. getElementById(id): 通过元素的ID获取元素。

   const element = document.getElementById('myId');
   

2. querySelector(selector): 根据CSS选择器获取单个元素。

   const element = document.querySelector('.myClass'); // 获取第一个具有myClass类的元素
   

3. querySelectorAll(selector): 根据CSS选择器获取一组元素。

   const elements = document.querySelectorAll('p'); // 获取所有的<p>元素
   

4. getElementsByClassName(className): 根据类名获取一组元素。

5. getElementsByTagName(tagName): 根据标签名获取一组元素。

二、创建和插入元素

1. createElement(tagName): 创建一个新的HTML元素。

   const newElement = document.createElement('div'); // 创建一个新的<div>元素
   

2. createTextNode(text): 创建一个新的文本节点。

3. appendChild(child): 将子节点添加到父节点的最后一个子节点。

   const parent = document.getElementById('parent');
   parent.appendChild(newElement); // 将新元素添加到父元素内
   

4. insertBefore(newChild, referenceChild): 将子节点插入到指定位置的前面。

三、删除和替换元素

1. removeChild(child): 从父节点中移除子节点。

   const child = document.getElementById('child');
   parent.removeChild(child); // 从父元素中移除子元素
   

2. replaceChild(newChild, oldChild): 替换父节点中的一个子节点。

四、修改元素内容和属性

1. innerHTML: 获取或设置元素内部的HTML内容。

   element.innerHTML = '<span>新内容</span>'; // 设置元素的HTML内容
   

2. textContent: 获取或设置元素内部的文本内容。

3. setAttribute(name, value): 设置元素属性。

   element.setAttribute('class', 'newClass'); // 设置元素的类名属性
   

4. getAttribute(name): 获取元素的属性值。

5. removeAttribute(name): 删除元素的属性。

五、修改元素样式

1. style: 访问元素的内联样式。

   element.style.color = 'red'; // 设置元素文本颜色为红色
   

六、事件处理

1. addEventListener(event, function): 为元素添加事件监听器。

   element.addEventListener('click', function() { alert('元素被点击！'); }); // 添加点击事件监听器
   

2. removeEventListener(event, function): 移除元素的事件监听器。

这些DOM操作方法在前端开发中非常常用，它们允许开发者动态地改变网页内容、结构以及响应用户交互。