JavaScript入门：DOM操作与事件处理

JavaScript是现代网页交互的核心技术，而DOM操作和事件处理则是JavaScript与网页交互的基础。本文将带你深入了解如何使用JavaScript操作网页元素并响应用户交互。

DOM基础概念

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它将网页表示为一个树状结构，其中每个节点都是文档的一部分，如元素、属性或文本。

选择元素

在JavaScript中，我们可以通过多种方式选择DOM元素：

// 通过ID选择
const header = document.getElementById('header');

// 通过类名选择
const buttons = document.getElementsByClassName('btn');

// 通过标签名选择
const paragraphs = document.getElementsByTagName('p');

// 使用CSS选择器（现代方法）
const container = document.querySelector('.container');
const allLinks = document.querySelectorAll('a');

修改元素

一旦选择了元素，我们就可以修改它们：

// 修改内容
element.textContent = '新文本内容';
element.innerHTML = '<span>HTML内容</span>';

// 修改属性
element.setAttribute('href', 'https://example.com');
element.id = 'newId';

// 修改样式
element.style.color = 'blue';
element.style.fontSize = '20px';
element.classList.add('highlight');
element.classList.remove('hidden');
element.classList.toggle('active');

创建和删除元素

// 创建新元素
const newDiv = document.createElement('div');
newDiv.textContent = '这是一个新的div元素';
document.body.appendChild(newDiv);

// 删除元素
const elementToRemove = document.getElementById('oldElement');
elementToRemove.parentNode.removeChild(elementToRemove);

// 现代方法
elementToRemove.remove();

事件处理

事件是用户或浏览器自身执行的某种动作，如点击、加载或鼠标移动。JavaScript可以”监听”这些事件并作出响应。

添加事件监听器

const button = document.querySelector('button');

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

// 使用箭头函数
button.addEventListener('mouseover', () => {
  button.style.backgroundColor = 'red';
});

button.addEventListener('mouseout', () => {
  button.style.backgroundColor = '';
});

事件对象

当事件触发时，浏览器会创建一个事件对象，其中包含有关事件的信息：

document.addEventListener('keydown', (event) => {
  console.log(`按下的键是: ${event.key}`);
  
  if (event.key === 'Escape') {
    closeModal();
  }
});

document.querySelector('form').addEventListener('submit', (event) => {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 自定义表单提交逻辑
  validateAndSubmit();
});

事件冒泡与捕获

事件在DOM树中的传播有两个阶段：捕获和冒泡。

// 冒泡阶段（默认）
element.addEventListener('click', handleClick);

// 捕获阶段
element.addEventListener('click', handleClick, true);

// 阻止事件冒泡
function handleClick(event) {
  event.stopPropagation();
  // 处理点击事件
}

实际应用：创建一个简单的待办事项列表

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('todo-form');
  const input = document.getElementById('todo-input');
  const list = document.getElementById('todo-list');
  
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    
    if (input.value.trim() === '') return;
    
    const li = document.createElement('li');
    li.textContent = input.value;
    
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.classList.add('delete-btn');
    
    deleteBtn.addEventListener('click', () => {
      li.remove();
    });
    
    li.appendChild(deleteBtn);
    list.appendChild(li);
    
    input.value = '';
  });
});

总结

DOM操作和事件处理是JavaScript前端开发的基础，掌握这些技能将使你能够创建交互丰富的网页应用。随着你的学习深入，可以进一步探索更高级的DOM API和事件处理技术，如事件委托、自定义事件等。

下一篇文章中，我们将探讨如何使用现代JavaScript框架（如React或Vue）来更高效地管理DOM和处理事件。