【前端八股文面试题】DOM常⻅的操作有哪些？

前端操作 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'