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

文章目录

- - [🧭 一、查询/获取元素 (Selecting Elements)](#🧭 一、查询/获取元素 (Selecting Elements))
  - [✏️ 二、修改元素内容与属性 (Modifying Content & Attributes)](#✏️ 二、修改元素内容与属性 (Modifying Content & Attributes))
  - [🧬 三、创建与插入元素 (Creating & Inserting Elements)](#🧬 三、创建与插入元素 (Creating & Inserting Elements))
  - [🗑️ 四、删除与替换元素 (Removing & Replacing)](#🗑️ 四、删除与替换元素 (Removing & Replacing))
  - [🎛️ 五、操作 CSS 类与样式 (CSS Classes & Styles)](#🎛️ 五、操作 CSS 类与样式 (CSS Classes & Styles))
  - [🖱️ 六、事件处理 (Event Handling)](#🖱️ 六、事件处理 (Event Handling))
  - [🧮 七、遍历 DOM 树 (Traversing the DOM)](#🧮 七、遍历 DOM 树 (Traversing the DOM))
  - [🧪 八、数据属性 (Data Attributes)](#🧪 八、数据属性 (Data Attributes))
  - [⚙️ 九、其他重要操作](#⚙️ 九、其他重要操作)
  - [💡 关键实践建议](#💡 关键实践建议)

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

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

getElementById(id)

通过元素的唯一 id 获取单个元素：
javascript 复制代码
```
const el = document.getElementById('header');
```
querySelector(selector)

使用 CSS 选择器获取第一个匹配的元素：
javascript 复制代码
```
const el = document.querySelector('.menu-item');
```
querySelectorAll(selector)

获取所有匹配的元素集合（返回 NodeList）：
javascript 复制代码
```
const items = document.querySelectorAll('li');
```
getElementsByClassName(className)

通过类名获取元素集合：
javascript 复制代码
```
const buttons = document.getElementsByClassName('btn');
```
getElementsByTagName(tagName)

通过标签名获取元素集合：
javascript 复制代码
```
const divs = document.getElementsByTagName('div');
```

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

textContent

安全设置纯文本内容（避免 XSS）：
javascript 复制代码
```
el.textContent = '新文本内容';
```
innerHTML

设置 HTML 内容（注意 XSS 风险⚠️）：
javascript 复制代码
```
el.innerHTML = '<strong>加粗文本</strong>';
```

修改属性

javascript 复制代码

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

直接属性访问

javascript 复制代码

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

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

创建元素

javascript 复制代码

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

插入到 DOM 中

javascript 复制代码

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

insertAdjacentHTML()

灵活插入 HTML 片段：
javascript 复制代码
```
el.insertAdjacentHTML('beforeend', '<p>追加内容</p>');
```
- 位置可选：beforebegin、afterbegin、beforeend、afterend

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

删除元素

javascript 复制代码

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

替换元素

javascript 复制代码

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

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

classList API

javascript 复制代码

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

直接修改行内样式

javascript 复制代码

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

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

添加事件监听

javascript 复制代码

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

移除事件监听

javascript 复制代码

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

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

javascript 复制代码

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

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

父子关系

javascript 复制代码

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

兄弟关系

javascript 复制代码

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

🧪 八、数据属性 (Data Attributes)

使用 dataset 访问 data-* 属性：

javascript 复制代码

// 操作 <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

⚙️ 九、其他重要操作

克隆元素

javascript 复制代码

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

比较节点位置

javascript 复制代码

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

获取元素位置尺寸

javascript 复制代码

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

💡 关键实践建议

性能优化 ：避免频繁操作 DOM，批量修改时可用 DocumentFragment 减少重排重绘。
javascript 复制代码
```
const fragment = document.createDocumentFragment();
// 多次在 fragment 中添加元素
parent.appendChild(fragment);
```
事件委托：对动态元素利用事件委托减少监听器数量。
框架优势：React/Vue 等框架通过虚拟 DOM 提升性能，减少直接手动操作需求。

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