前端操作 DOM 的常见操作主要分为以下几类：

---

🧭 一、查询/获取元素 (Selecting Elements)

1. getElementById(id)
   通过元素的唯一 id 获取单个元素：

   const el = document.getElementById('header');
   

2. querySelector(selector)
   使用 CSS 选择器获取第一个匹配的元素：

   const el = document.querySelector('.menu-item');
   

3. querySelectorAll(selector)
   获取所有匹配的元素集合（返回 NodeList）：

   const items = document.querySelectorAll('li');
   

4. getElementsByClassName(className)
   通过类名获取元素集合：

   const buttons = document.getElementsByClassName('btn');
   

5. getElementsByTagName(tagName)
   通过标签名获取元素集合：

   const divs = document.getElementsByTagName('div');
   

---

✏️ 二、修改元素内容与属性 (Modifying Content & Attributes)

1. textContent
   安全设置纯文本内容（避免 XSS）：

   el.textContent = '新文本内容';
   

2. innerHTML
   设置 HTML 内容（注意 XSS 风险⚠️）：

   el.innerHTML = '<strong>加粗文本</strong>';
   

3. 修改属性

   img.setAttribute('src', 'new-image.jpg'); // 设置属性
   const link = anchor.getAttribute('href'); // 获取属性
   checkbox.removeAttribute('disabled');     // 移除属性
   

4. 直接属性访问

   input.value = '新值';
   input.disabled = true;
   

---

🧬 三、创建与插入元素 (Creating & Inserting Elements)

1. 创建元素

   const newDiv = document.createElement('div');
   

2. 插入到 DOM 中

   parent.appendChild(newDiv);                // 插入到末尾
   parent.insertBefore(newDiv, referenceEl);  // 插入到指定元素前
   

3. insertAdjacentHTML()
   灵活插入 HTML 片段：

   el.insertAdjacentHTML('beforeend', '<p>追加内容</p>');
   

   • 位置可选：beforebegin、afterbegin、beforeend、afterend

---

🗑️ 四、删除与替换元素 (Removing & Replacing)

1. 删除元素

   const oldEl = document.querySelector('.old');
   oldEl.parentNode.removeChild(oldEl); // 传统方式
   oldEl.remove();                      // 现代方式（推荐）
   

2. 替换元素

   parent.replaceChild(newEl, oldEl);  // 用 newEl 替换 oldEl
   

---

🎛️ 五、操作 CSS 类与样式 (CSS Classes & Styles)

1. classList API

   el.classList.add('active');          // 添加类
   el.classList.remove('inactive');     // 移除类
   el.classList.toggle('visible');      // 切换类
   el.classList.contains('hidden');    // 检查类
   

2. 直接修改行内样式

   el.style.color = 'blue';
   el.style.backgroundColor = '#f0f0f0';
   el.style.setProperty('--primary-color', 'red'); // 修改CSS变量
   

---

🖱️ 六、事件处理 (Event Handling)

1. 添加事件监听

   button.addEventListener('click', function(e) {console.log('点击事件触发', e.target);
   });
   

2. 移除事件监听

   const handler = () => { /* ... */ };
   button.addEventListener('click', handler);
   button.removeEventListener('click', handler);  // 移除指定监听
   

3. 事件委托（常用优化技术）

   document.body.addEventListener('click', (e) => {if(e.target.matches('.delete-btn')) {deleteItem(e.target.dataset.id);  // 统一处理子元素点击}
   });
   

---

🧮 七、遍历 DOM 树 (Traversing the DOM)

1. 父子关系

   const parent = el.parentNode;
   const firstChild = parent.firstChild;
   const children = parent.children; // 只包含元素节点 (HTMLCollection)
   

2. 兄弟关系

   const nextSibling = el.nextElementSibling; // 下一个元素节点
   const prevSibling = el.previousElementSibling; // 上一个元素节点
   

---

🧪 八、数据属性 (Data Attributes)

使用 dataset 访问 data-* 属性：

// 操作 <div data-id="123" data-status="active"></div>
const id = div.dataset.id;                // "123"
div.dataset.status = 'inactive';          // 修改值
div.dataset.customValue = 'hello';        // 新增 data-custom-value

---

⚙️ 九、其他重要操作

1. 克隆元素

   const clone = el.cloneNode(true); // true 表示深克隆（包含子元素）
   

2. 比较节点位置

   const isBefore = node1.compareDocumentPosition(node2) === Node.DOCUMENT_POSITION_FOLLOWING;
   

3. 获取元素位置尺寸

   const rect = el.getBoundingClientRect(); // 包含 left, top, width, height
   

---

💡 关键实践建议

1. 性能优化：避免频繁操作 DOM，批量修改时可用 DocumentFragment 减少重排重绘。

   const fragment = document.createDocumentFragment();
   // 多次在 fragment 中添加元素
   parent.appendChild(fragment);
   

2. 事件委托：对动态元素利用事件委托减少监听器数量。

3. 框架优势：React/Vue 等框架通过虚拟 DOM 提升性能，减少直接手动操作需求。

---

总结：DOM 操作是前端基础能力，重点在于灵活选择 API 并结合性能优化实践。熟练后建议通过现代框架（如 React, Vue）减少原生操作复杂度，提升开发效率。