JavaScript DOM 操作：动态页面交互

进阶 · 第 5 篇 ·

什么是 DOM

DOM（Document Object Model，文档对象模型）是浏览器将 HTML 文档解析后生成的树形结构。JavaScript 通过 DOM API 可以查询、修改、创建和删除页面元素，实现动态交互。

查询元素

// 单个元素
const el = document.getElementById('myId');
const el = document.querySelector('.myClass');

// 多个元素
const items = document.querySelectorAll('.item');
items.forEach(item => console.log(item));

推荐：优先使用 querySelector 和 querySelectorAll，它们使用 CSS 选择器语法，更灵活。

修改内容

// 文本内容
el.textContent = '新文本';      // 纯文本（安全）
el.innerHTML = '<b>加粗</b>'; // HTML 内容（慎用）

// 属性
el.setAttribute('href', 'https://example.com');
el.getAttribute('href');

// 速写属性
el.id = 'newId';
el.checked = true;

警告：永远不要用 innerHTML 插入用户输入的内容，会导致 XSS 攻击。

修改样式

// 内联样式
el.style.color = 'red';
el.style.fontSize = '16px';

// 操作 class
el.classList.add('active');
el.classList.remove('hidden');
el.classList.toggle('open');
el.classList.contains('active'); // true/false

创建与插入元素

// 创建
const div = document.createElement('div');
div.textContent = '新元素';

// 插入
parent.appendChild(div);           // 末尾追加
parent.append(div, '文本');        // 追加多个
parent.prepend(div);               // 开头插入

// 删除
el.remove();

事件监听

btn.addEventListener('click', function(e) {
  console.log('点击了', e.target);
});

// 常见事件：click, input, submit, focus, blur, keydown, scroll

事件委托

将事件绑定在父元素上，利用冒泡机制处理子元素事件：

document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('点击了:', e.target.textContent);
  }
});

实战：Tab 切换

document.querySelector('.tabs').addEventListener('click', (e) => {
  const tab = e.target.closest('.tab');
  if (!tab) return;

  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
  tab.classList.add('active');

  const id = tab.dataset.tab;
  document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
  document.querySelector(`[data-content="${id}"]`).classList.add('active');
});

小结

本篇介绍了 DOM 的查询、修改、创建、删除操作，以及事件监听和事件委托。DOM 操作是前端交互的核心，掌握了它就能让静态页面「活」起来。

下一篇：JavaScript 异步编程：回调、Promise 与 Async/Await