JavaScript 超详细整理（下篇）

本文承接上篇基础语法内容，完整讲解 DOM 文档对象模型、表格隔行变色实战、事件监听全套语法、各类常用鼠标 / 键盘 / 表单事件、JS 模块化开发，配套完整代码案例，适合巩固网页交互开发、期末复习、前端入门面试。

一、DOM 文档对象模型

1.1 DOM 基础概念

DOM 全称 Document Object Model（文档对象模型），浏览器会自动将整个 HTML 页面解析为一棵树形对象树，页面中 html、head、body、标签、文本、注释全部封装成对应对象，JS 可以通过 DOM 读取、修改页面内容、样式、增删元素。DOM 树层级结构：顶级 document 对象 → 根标签<html>→<head>、<body>→ 内部各类元素、文本节点。DOM 可实现四大操作：

  1. 修改 HTML 文字内容；
  2. 修改标签 CSS 样式；
  3. 监听页面交互事件；
  4. 动态新增、删除页面元素。

1.2 获取 DOM 元素两套核心 API

方法作用适用场景
document.querySelector ("选择器")获取匹配的第一个元素只需要单个标签（按钮、单行）
document.querySelectorAll ("选择器")获取全部匹配元素，返回伪数组 NodeList批量获取表格行、多个同类标签

补充老式方法（了解即可，不推荐）：getElementById、getElementsByTagName。代码示例：

// 根据id获取按钮 let btn = document.querySelector("#btn"); // 获取页面所有表格tr行 let trArr = document.querySelectorAll("tr");

伪数组说明：拥有 length 长度、数字下标，但是不能直接使用数组 push、sort 等方法。

1.3 DOM 通用操作步骤

  1. 通过选择器获取目标 DOM 元素对象；
  2. 操作对象属性（文本、style 样式、元素属性）。

1.4 实战案例：表格静态隔行换色

需求：员工表格奇数行背景#f2e2e2，偶数行#e6f7ff实现思路：

  1. 获取所有 tr 行伪数组；
  2. 循环遍历，判断下标奇偶；
  3. 给对应行 style.backgroundColor 赋值。

1.5 小节小结

DOM 是 JS 操作页面唯一标准，querySelector/querySelectorAll兼容 id、class、标签所有 CSS 选择器，是开发首选。

二、事件监听完整体系

2.1 事件基础定义

事件是页面发生的各类动作：鼠标点击、移入移出、键盘按下、输入框输入、表单提交；事件监听（事件绑定）：提前给元素绑定动作，触发时自动执行自定义 JS 代码。事件三大核心要素：

  1. 事件源：触发动作的 DOM 元素（按钮、表格行、输入框）；
  2. 事件类型：click、mouseenter、keydown 等；
  3. 处理函数：事件触发后执行的业务代码。

2.2 两种事件绑定方式对比

方式 1：on 老式绑定（不推荐）

特点：同一个元素同一事件只能绑定一个函数，后写代码会覆盖前面逻辑

let btn = document.querySelector("#btn"); btn.onclick = function(){ alert("按钮点击"); }
方式 2：addEventListener（官方推荐）

特点：同一元素可绑定多个相同事件，互不覆盖，支持更多高级事件特性

btn.addEventListener("click", ()=>{ alert("点击触发"); })

2.3 四大类高频事件大全

1）鼠标事件
  • click：鼠标单击
  • mouseenter：鼠标移入元素
  • mouseleave：鼠标移出元素
2）键盘事件
  • keydown：按键按下瞬间
  • keyup：按键抬起
3）焦点事件（输入框专用）
  • focus：输入框获得光标
  • blur：输入框失去光标
4）表单事件
  • input：输入框内容发生变化实时触发
  • submit：表单提交时触发

2.4 实战案例：表格鼠标悬浮变色

需求：鼠标移动到表格行时背景 #f2e2e2，离开恢复白色；实现逻辑：

  1. 获取全部 tr；
  2. 循环遍历每一行；
  3. 分别绑定 mouseenter、mouseleave 事件，修改背景色。

2.5 小节小结

开发统一使用 addEventListener 绑定事件，鼠标、键盘、焦点、表单事件覆盖绝大多数页面交互场景。

三、JS 模块化开发

3.1 模块化作用

项目代码量庞大后，拆分通用工具函数、业务逻辑到多个独立 JS 文件，降低代码耦合，方便复用、维护、团队协作。

3.2 两个核心关键字

  1. export：导出变量、函数，供其他 JS 文件引入使用；
  2. import：导入其他模块导出的函数、变量。

3. 3 使用规范

引入模块化 JS 文件时，script 标签必须添加type="module"属性：

<script src="js/utils.js" type="module"></script>

工具文件 utils.js 示例：

// 导出打印工具函数 export function printLog(msg){ console.log(msg); }

业务 js 引入使用：

import { printLog } from "./utils.js"; print("鼠标移入事件触发");

3.4 小节小结

模块化分离工具与业务代码，避免单文件代码臃肿，大型前端项目必备开发规范。

四、下篇全文总结

  1. DOM：浏览器将页面转为树形对象，querySelector获取单个元素，querySelectorAll批量获取返回伪数组；
  2. DOM 实战：表格静态隔行变色，通过循环下标控制奇偶行背景；
  3. 事件三要素：事件源、事件类型、处理函数；
  4. 两种绑定方式：on 会覆盖，addEventListener 推荐使用；
  5. 常用事件：鼠标、键盘、焦点、表单四类，覆盖页面全部交互；
  6. 鼠标悬浮表格案例：给每行绑定移入、移出事件动态切换背景；
  7. 模块化：export 导出、import 导入，script 加 type="module" 开启模块模式。

下篇拓展练习

  1. 独立完成员工表格静态隔行换色、鼠标悬浮变色两套案例；
  2. 给登录输入框绑定 focus、blur、input 键盘事件，做简单输入长度校验；
  3. 封装打印日志工具函数抽为独立模块，页面引入调用。

下篇入门面试高频考点

  1. querySelector 与 querySelectorAll 区别、返回值类型；
  2. on 绑定和 addEventListener 优缺点；
  3. 鼠标移入 mouseenter、移出 mouseleave 使用场景；
  4. JS 模块化 export、import 使用规则；
  5. DOM 操作标准实现流程。