JavaScript中的DOM操作：高效操控网页元素的技巧

在 JavaScript 中，DOM（Document Object Model）操作是网页开发的核心技能之一。通过 DOM 操作，开发者可以动态地访问和修改网页内容、结构与样式。掌握高效的 DOM 操作技巧，不仅能提升用户体验，还能优化性能。

以下是一些 高效操控网页元素的技巧和最佳实践：

一、获取 DOM 元素

1. 常用方法

✅ 推荐使用 querySelector 和 querySelectorAll，语法灵活，支持复杂选择器。

const header = document.querySelector('#header');
const items = document.querySelectorAll('.list-item');

二、创建与插入节点

1. 创建新元素

const newDiv = document.createElement('div');
newDiv.textContent = '这是一个新元素';
newDiv.className = 'new-element';

2. 插入到页面中

示例：

const container = document.getElementById('container');
container.appendChild(newDiv);

三、修改元素属性和内容

1. 修改文本内容

• element.textContent: 更安全，防止 XSS。
• element.innerHTML: 可以插入 HTML 内容，但要注意安全性。

element.textContent = '纯文本内容';
element.innerHTML = '<strong>加粗内容</strong>';

2. 属性操作

img.setAttribute('src', 'image.jpg');
a.setAttribute('href', '#top');

3. 类名操作（推荐使用 classList）

element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('highlight'); // true/false

四、样式操作

1. 行内样式设置

element.style.color = 'red';
element.style.fontSize = '16px';

2. 批量设置样式（推荐使用类控制）

element.className = 'highlight'; // 覆盖原有类
element.classList.add('highlight');

3. 获取计算样式

const style = window.getComputedStyle(element);
console.log(style.backgroundColor);

五、事件绑定与解绑

1. 添加事件监听器

button.addEventListener('click', function() {
  alert('按钮被点击了');
});

2. 移除事件监听器

function handleClick() {
  console.log('点击事件');
}
button.addEventListener('click', handleClick);

// 解绑
button.removeEventListener('click', handleClick);

3. 事件委托（推荐用于动态元素）

document.getElementById('list').addEventListener('click', function(e) {
  if (e.target && e.target.matches('.item')) {
    console.log('点击了列表项:', e.target.textContent);
  }
});

六、性能优化技巧

1. 减少 DOM 操作次数

频繁操作 DOM 是昂贵的，应尽量减少访问和修改次数。

✅ 正确做法：

let html = '';
for (let i = 0; i < 100; i++) {
  html += `<li>Item ${i}</li>`;
}
document.getElementById('list').innerHTML = html;

❌ 不推荐：

for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  list.appendChild(li); // 每次都触发重排/重绘
}

2. 使用文档片段（DocumentFragment）

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

3. 避免布局抖动（Layout Thrashing）

不要在循环中交替读写 DOM 属性，会导致浏览器不断重新计算布局。

七、DOM 操作常用场景示例

1. 动态添加元素并绑定事件

const btn = document.createElement('button');
btn.textContent = '点击我';
btn.addEventListener('click', () => {
  alert('按钮被动态添加并绑定了事件');
});
document.body.appendChild(btn);

2. 根据输入筛选列表

input.addEventListener('input', function() {
  const filter = this.value.toLowerCase();
  items.forEach(item => {
    item.style.display = item.textContent.toLowerCase().includes(filter) ? '' : 'none';
  });
});

八、结语：DOM 操作核心原则