JavaScript 超详细整理（下篇）

本文承接上篇基础语法内容完整讲解 DOM 文档对象模型、表格隔行变色实战、事件监听全套语法、各类常用鼠标 / 键盘 / 表单事件、JS 模块化开发配套完整代码案例适合巩固网页交互开发、期末复习、前端入门面试。一、DOM 文档对象模型1.1 DOM 基础概念DOM 全称 Document Object Model文档对象模型浏览器会自动将整个 HTML 页面解析为一棵树形对象树页面中 html、head、body、标签、文本、注释全部封装成对应对象JS 可以通过 DOM 读取、修改页面内容、样式、增删元素。DOM 树层级结构顶级 document 对象 → 根标签html→head、body→ 内部各类元素、文本节点。DOM 可实现四大操作修改 HTML 文字内容修改标签 CSS 样式监听页面交互事件动态新增、删除页面元素。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 通用操作步骤通过选择器获取目标 DOM 元素对象操作对象属性文本、style 样式、元素属性。1.4 实战案例表格静态隔行换色需求员工表格奇数行背景#f2e2e2偶数行#e6f7ff实现思路获取所有 tr 行伪数组循环遍历判断下标奇偶给对应行 style.backgroundColor 赋值。1.5 小节小结DOM 是 JS 操作页面唯一标准querySelector/querySelectorAll兼容 id、class、标签所有 CSS 选择器是开发首选。二、事件监听完整体系2.1 事件基础定义事件是页面发生的各类动作鼠标点击、移入移出、键盘按下、输入框输入、表单提交事件监听事件绑定提前给元素绑定动作触发时自动执行自定义 JS 代码。事件三大核心要素事件源触发动作的 DOM 元素按钮、表格行、输入框事件类型click、mouseenter、keydown 等处理函数事件触发后执行的业务代码。2.2 两种事件绑定方式对比方式 1on 老式绑定不推荐特点同一个元素同一事件只能绑定一个函数后写代码会覆盖前面逻辑let btn document.querySelector(#btn); btn.onclick function(){ alert(按钮点击); }方式 2addEventListener官方推荐特点同一元素可绑定多个相同事件互不覆盖支持更多高级事件特性btn.addEventListener(click, (){ alert(点击触发); })2.3 四大类高频事件大全1鼠标事件click鼠标单击mouseenter鼠标移入元素mouseleave鼠标移出元素2键盘事件keydown按键按下瞬间keyup按键抬起3焦点事件输入框专用focus输入框获得光标blur输入框失去光标4表单事件input输入框内容发生变化实时触发submit表单提交时触发2.4 实战案例表格鼠标悬浮变色需求鼠标移动到表格行时背景 #f2e2e2离开恢复白色实现逻辑获取全部 tr循环遍历每一行分别绑定 mouseenter、mouseleave 事件修改背景色。2.5 小节小结开发统一使用 addEventListener 绑定事件鼠标、键盘、焦点、表单事件覆盖绝大多数页面交互场景。三、JS 模块化开发3.1 模块化作用项目代码量庞大后拆分通用工具函数、业务逻辑到多个独立 JS 文件降低代码耦合方便复用、维护、团队协作。3.2 两个核心关键字export导出变量、函数供其他 JS 文件引入使用import导入其他模块导出的函数、变量。3. 3 使用规范引入模块化 JS 文件时script 标签必须添加typemodule属性script srcjs/utils.js typemodule/script工具文件 utils.js 示例// 导出打印工具函数 export function printLog(msg){ console.log(msg); }业务 js 引入使用import { printLog } from ./utils.js; print(鼠标移入事件触发);3.4 小节小结模块化分离工具与业务代码避免单文件代码臃肿大型前端项目必备开发规范。四、下篇全文总结DOM浏览器将页面转为树形对象querySelector获取单个元素querySelectorAll批量获取返回伪数组DOM 实战表格静态隔行变色通过循环下标控制奇偶行背景事件三要素事件源、事件类型、处理函数两种绑定方式on 会覆盖addEventListener 推荐使用常用事件鼠标、键盘、焦点、表单四类覆盖页面全部交互鼠标悬浮表格案例给每行绑定移入、移出事件动态切换背景模块化export 导出、import 导入script 加 typemodule 开启模块模式。下篇拓展练习独立完成员工表格静态隔行换色、鼠标悬浮变色两套案例给登录输入框绑定 focus、blur、input 键盘事件做简单输入长度校验封装打印日志工具函数抽为独立模块页面引入调用。下篇入门面试高频考点querySelector 与 querySelectorAll 区别、返回值类型on 绑定和 addEventListener 优缺点鼠标移入 mouseenter、移出 mouseleave 使用场景JS 模块化 export、import 使用规则DOM 操作标准实现流程。