纯前端JavaScript网站开发：DOM操作与事件绑定基础教程

一、理解 DOM：网页在 JavaScript 眼中的树形结构

当浏览器加载一段 HTML 代码时，并不会直接将其作为单纯的文本展示给脚本，而是会解析标签之间的嵌套关系，在内存中构建出一棵由对象构成的倒置层级树，这就是文档对象模型（Document Object Model，简称 DOM）。

在 DOM 的视角下，网页中的一切皆为节点（Node）：整个文档是一个 document 根节点，HTML 标签对应元素节点（Element Node），标签内部的文字是文本节点（Text Node），而标签上的属性则是属性节点（Attribute Node）。JavaScript 并不直接“改写 HTML 源文件”，而是通过修改这棵内存中的对象树，由浏览器实时将最新状态渲染到屏幕上。

二、定位目标：DOM 节点的查询与获取

要改变网页上的某个部分，第一步必须先“拿到”对应的 DOM 对象。现代前端开发中，推荐优先使用基于 CSS 选择器语法的检索 API。

1. 核心选择器 API

• document.querySelector(selector)：返回文档中匹配指定 CSS 选择器的第一个元素节点；若未匹配到则返回 null。
• document.querySelectorAll(selector)：返回匹配指定选择器的所有元素集合，类型为静态的 NodeList。
• document.getElementById(id)：基于唯一 ID 快速查询，执行效率最高，但仅支持单个 ID 字符串。

// 1. 获取 ID 为 submit-btn 的按钮
const submitBtn = document.querySelector('#submit-btn');

// 2. 获取 class 包含 item 的所有列表项
const items = document.querySelectorAll('.todo-list .item');

// 3. 遍历获取到的元素集合
items.forEach((item, index) => {
  console.log(`第 ${index + 1} 个节点文本为: ${item.textContent}`);
});

三、动态修改：内容、属性、样式与节点构造

成功获取 DOM 引用后，即可使用 JavaScript 对象属性对其进行动态更新。操作主要分为四类：读写文本内容、修改 HTML 结构、变更属性与类名、动态增删节点。

四、驱动交互：addEventListener 与事件绑定

静态页面变为动态应用的关键在于监听用户动作。在现代前端规范中，统一使用 addEventListener 为 DOM 节点注册事件监听器。

1. 为什么不用 HTML 行内事件属性？

早期前端常在 HTML 中写 <button onclick="doSomething()">，这种做法会导致 HTML 与 JavaScript 深度耦合，且同一个事件无法方便地注册多个独立的回调函数。通过 addEventListener，可以实现职责分离与多次解耦绑定。

// 语法结构：target.addEventListener(type, listener, options);
const myButton = document.querySelector('#action-button');

function handleClick(event) {
  // event 对象包含事件发生时的所有关键信息
  console.log('点击目标元素:', event.target);
  console.log('鼠标点击视口坐标:', event.clientX, event.clientY);
}

// 绑定监听器
myButton.addEventListener('click', handleClick);

// 在必要时（如组件销毁或弹窗关闭）解绑监听器，防止内存泄漏
// myButton.removeEventListener('click', handleClick);

五、深入机制：事件流模型与事件委托

理解事件在 DOM 树中如何传递，是编写健壮交互逻辑的核心分水岭。当用户在深层子元素上触发事件（如点击列表项中的删除图标）时，事件并非仅在目标元素上瞬间触发，而是经历完整的三个阶段：捕获阶段、目标阶段和冒泡阶段。

2. 事件委托的实现方式

由于大多数事件（如 click、keydown）在触发后会自然向上冒泡到父级元素，因此我们可以将监听器绑定在公共父容器上，再借助 event.target 识别用户实际点击的子元素：

// 获取列表父容器
const todoList = document.querySelector('#todo-list');

// 统一由父节点托管子节点行为
todoList.addEventListener('click', (event) => {
  // 借助 matches() 判断是否命中了带有特定选择器的目标
  if (event.target.matches('.delete-btn')) {
    const item = event.target.closest('li');
    if (item) {
      item.remove(); // 直接移除对应行
    }
  } else if (event.target.matches('.toggle-checkbox')) {
    const item = event.target.closest('li');
    if (item) {
      item.classList.toggle('completed');
    }
  }
});

六、综合实战演练：交互式待办清单应用

将上述所有知识点综合起来，我们通过一个完整的纯前端待办清单（Todo List）案例，体会从输入提取、节点组装到事件委托处理的全流程：

<!-- HTML 骨架部分 -->
<div class="todo-app">
  <input type="text" id="task-input" placeholder="输入待办事项后回车...">
  <button id="add-btn">添加任务</button>
  <ul id="task-list"></ul>
</div>

<script>
// 1. 获取核心要素
const taskInput = document.querySelector('#task-input');
const addBtn = document.querySelector('#add-btn');
const taskList = document.querySelector('#task-list');

// 2. 封装新建任务函数
function addTask() {
  const content = taskInput.value.trim();
  if (!content) {
    alert('请输入任务内容');
    return;
  }

  // 动态创建 li 元素
  const li = document.createElement('li');
  li.className = 'task-item';

  // 使用 textContent 填入文本，规避 XSS 注入
  const textSpan = document.createElement('span');
  textSpan.className = 'task-text';
  textSpan.textContent = content;

  // 创建删除按钮
  const delBtn = document.createElement('button');
  delBtn.className = 'btn-delete';
  delBtn.textContent = '删除';

  // 装配节点
  li.append(textSpan, delBtn);
  taskList.appendChild(li);

  // 清空输入框并聚焦
  taskInput.value = '';
  taskInput.focus();
}

// 3. 绑定添加事件（按钮点击与输入框回车）
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    addTask();
  }
});

// 4. 利用事件委托集中管理列表内的点击（标记完成与删除）
taskList.addEventListener('click', (e) => {
  const target = e.target;

  // 点击删除按钮
  if (target.matches('.btn-delete')) {
    const item = target.closest('.task-item');
    if (item) item.remove();
  }
  // 点击文字切换完成状态
  else if (target.matches('.task-text')) {
    target.closest('.task-item').classList.toggle('done');
  }
});
</script>

七、总结与最佳开发实践

在纯前端 JavaScript 网页开发中，优雅的 DOM 操作与事件管理遵循以下工程准则：

掌握了 DOM 的查询、更新机制与事件流的传播规律，就奠定了现代前端开发最核心的底层基石。无论后续学习任何流行前端框架，其底层的响应式视图更新与组件交互模型，本质上依然运行在这套机制之上。