学习日记-JS+DOM-day57-9.17
1.失去焦点事件
知识点 | 核心内容 | 重点 |
失去焦点事件(blur) | 当鼠标离开输入框时触发的事件，常用于表单验证场景 | 区分静态注册和动态注册的实现方式 |
静态注册实现 | 1. 通过HTML标签的onblur属性直接绑定方法 2. 在方法中获取DOM对象并转换值为大写 | fname.value.toUpperCase()方法链式调用 |
动态注册实现 | 1. 页面加载后获取DOM对象 2. 通过domObj.onblur绑定事件处理函数 | 注意要在window.onload中执行绑定 |
DOM操作要点 | 1. document.getElementById()获取DOM对象 2. 通过.value属性获取/设置输入值 | DOM对象与HTML元素的映射关系 |
字符串转换方法 | toUpperCase()将字符串转为大写形式 | 注意该方法返回新字符串而不修改原字符串 |
2.内容发生改变事件
知识点 | 核心内容 | 重点 |
on change事件 | 监听内容变化的DOM事件，常用于下拉框联动（如国家-省-市三级菜单） | 触发条件： 仅当选项值实际改变时触发（重复选择相同值不触发） |
静态注册 | 通过HTML标签属性直接绑定事件（如<select onchange="myFunction()">） | 需注意函数作用域和代码复用性 |
动态注册 | 通过JavaScript获取DOM对象后绑定事件（如document.getElementById().onchange=function{}） | 必须确保DOM加载完成（常用window.onload） |
联动逻辑 | 通过Ajax请求动态加载数据（如选择国家后请求对应省份数据） | 易混淆点： 事件触发与数据请求的异步处理时序 |
浏览器机制 | 浏览器自动跟踪选项值变化（内部通过索引号比对），开发者无需手动判断 | 需理解隐式判定逻辑与显式事件触发的关系 |
3.表单提交事件-静态注册
知识点 | 核心内容 | 重点 |
on submit事件 | 表单提交前进行前端数据校验（如用户名/密码非空校验），通过return false阻止非法提交 | 必须显式返回校验结果（return register()），否则默认提交 |
表单数据获取 | 通过document.getElementById()获取输入框DOM对象，用.value提取内容 | 直接使用DOM对象未取值的常见错误（需username.value） |
正则表达式应用 | 前端校验通用（如邮箱格式），语法与Java正则一致 | 原理通用性（非语言特定），需掌握元字符/定界符等基础 |
静态注册事件 | 通过<form onsubmit="return register()">绑定校验函数 | 动态注册与静态注册的优先级差异 |
基础校验逻辑 | `if(username=='' |
4.表单提交事件-动态注册
知识点 | 核心内容 | 易混淆点/难点 |
动态注册表单 | 通过表单DOM对象获取输入值（form.username.value） | 获取方式与静态注册（getElementById）的区别 |
表单验证逻辑 | 空值检查（username/password非空验证） | return true/false的传递机制 |
调试技巧 | 折半调试法与页面缓存问题排查 | 代码更新与页面刷新的同步确认 |
事件绑定 | 动态绑定onsubmit事件 | window.onload与事件绑定的时序关系 |
开发经验 | 表单元素必须设置ID的实践意义 | 通过tagName获取表单的局限性 |
5.dom介绍
知识点 | 核心内容 | 重点 |
DOM基本概念 | 文档对象模型（Document Object Model），将HTML文档解析为层级化的对象结构，便于通过JS操作元素 | 文档、对象、模型三者的关系 |
DOM类型 | 主要分为HTML DOM（内容控制）、CSS DOM（样式控制）、XML DOM（较少使用） | 区分HTML DOM与CSS DOM的应用场景 |
DOM工作机制 | 浏览器加载HTML文档后解析为内存中的对象树，标签映射为对象，通过属性和方法操作 | 标签如何映射为对象及层级关系 |
DOM学习资源 | 在线文档（W3C）、离线文档（资料包中的DOM参考章节） | 文档查找路径与核心章节定位 |
DOM实操演示 | 通过浏览器开发者工具查看DOM结构，演示文档位置与元素对象关系 | 开发者工具的使用技巧 |
6.html-dom介绍
知识点 | 核心内容 | 重点 |
HTML DOM概念 | 浏览器加载网页时创建文档对象模型树结构 | 根元素与子元素的层级关系 |
DOM树结构 | HTML元素映射为树状结构，包含head/body等节点 | head与body为同级子元素 |
节点类型 | 元素节点/属性节点/文本节点的区分 | 属性节点与文本节点的从属关系 |
对象操作原理 | 通过属性和方法操作DOM对象影响页面展示 | 对象机制与语言无关性 |
DOM可视化案例 | HTML文件案例演示树形结构 | 标签嵌套关系的可视化理解 |
7.document介绍
知识点 | 核心内容 | 重点 |
document对象 | 管理所有HTML文档内容的树状结构对象，是DOM操作的核心入口 | document与DOM的关系（D代表document） |
DOM操作核心 | 1. 获取标签对象 2. 操作对象属性/方法 | 标签对象化原理（底层由浏览器解析器实现，无需深究） |
document方法 | getElementById、getElementsByTagName、getElementsByClassName | ID与Class获取方法的单复数区别 |
动态操作能力 | 修改HTML内容（innerHTML）、属性、样式；动态增删元素/事件绑定 | innerHTML与文本安全的潜在风险 |
DOM树结构 | 层级化标签对象映射，通过案例理解实际应用 | 树形结构遍历效率优化 |
8.应用实例1
知识点 | 核心内容 | 重点 |
DOM对象获取 | 使用document.getElementById()方法获取DOM对象 | 执行时机问题：需确保DOM加载完成后再执行JS代码 |
静态事件绑定 | 通过HTML元素的onclick属性直接绑定函数 | 函数定义需在绑定前完成 |
动态事件绑定 | 使用window.onload确保DOM加载后通过JS代码绑定事件 | 需理解事件委托机制 |
innerText vs innerHTML | innerText获取纯文本内容，innerHTML获取包含标签的完整内容 | 关键区别：处理HTML标签时的不同表现 |
DOM操作基本原理 | 先获取DOM对象再操作其属性和方法 | API查找是重点，理解原理是关键 |
9.应用实例2
知识点 | 核心内容 | 重点 |
DOM编程核心思路 | 1. 获取DOM元素; 2. 操作DOM元素 | 获取方式差异：getElementById(单个) vs getElementsByName(集合) |
复选框全选功能实现 | 1. 获取同名复选框集合; 2. 遍历设置checked=true | 集合类型：NodeList的遍历方法 |
复选框反选功能实现 | 1. 遍历时取反checked值; 2. 利用JS自动类型转换特性 | 简洁写法：element.checked = !element.checked |
架构思维培养 | 1. 关注流程而非API细节; 2. 建立可迁移的学习方法论 | 工程师vs泥瓦匠：思维层级差异 |
Spring MVC原理 | 1. 请求处理流程图示; 2. 手写模拟实现 | 核心问题：请求如何被框架接收 |
Java知识体系 | 1. Web全栈技术链; 2. 前后端交互技术(AJAX/JSON) | 技术组合：Vue+Promise+Spring |
案例法 | 1. 多选框经典案例; 2. 从功能分析到代码实现 | DOM操作四要素：获取→遍历→判断→修改 |
10.应用实例3
知识点 | 核心内容 | 重点 |
图片切换功能实现 | 通过JavaScript修改<img>标签的src属性实现猫狗图片切换 | 动态路径拼接逻辑（i+4偏移量计算） |
DOM元素批量操作 | 使用getElementsByTagName("img")获取图片集合并遍历修改 | HTMLCollection与数组操作区别 |
交互状态扩展 | 根据按钮value值动态切换猫/狗图片及按钮文本 | 状态判断逻辑（if-else条件分支） |
调试技巧 | 通过console.log输出对象结构辅助理解API返回值 | HTMLCollection具体属性识别 |
编程思维训练 | "拿到操作→修改属性"的通用问题解决范式 | 代码复用性（路径拼接与状态维护） |
11.应用实例4
知识点 | 核心内容 | 重点 |
DOM动态添加元素 | 通过createElement创建图片元素，设置src属性后使用appendChild挂载到DOM树 | 创建与挂载的分离逻辑（需先创建再挂载） |
HTML元素命名规则 | 创建元素时标签名需与HTML标准一致（如image而非img） | 标签名大小写敏感性 |
DOM操作原理 | 程序修改DOM树影响浏览器渲染，但原始文档（HTML文件）不变 | 内存DOM与静态文档的差异 |
动态案例：添加小猫 | 点击按钮创建并追加图片元素，通过width调整显示大小 | 属性赋值格式（如100px需完整书写） |
12.猫狗切换案例
知识点 | 核心内容 | 重点 |
DOM元素操作 | 通过getElementById获取按钮元素并修改value属性 | innerText与value属性的区别 |
条件逻辑控制 | 根据按钮文字状态判断切换猫狗图片的逻辑 | 字符串精确匹配的注意事项 |
图片切换实现 | 通过修改img标签的src属性实现图片切换 | 路径拼接时的索引计算 |
代码重构技巧 | 将公共代码段(获取图片元素)提取到条件判断外部 | 代码执行顺序的优化 |
调试方法 | 使用控制台检查元素属性值验证代码效果 | ID命名一致性检查 |
13.html-dom文档说明
知识点 | 核心内容 | 重点 |
HTML DOM概念 | 文档对象模型的核心部分，所有内容都可视为节点 | 节点类型区分（元素节点/属性节点/文本节点/注释节点） |
节点类型详解 | - 文档本身是节点; - HTML元素是元素节点; - 属性是属性节点; - 文本是文本节点; - 注释也是节点 | 文本节点特殊性（如<h1>hello</h1>中"hello"的节点属性） |
DOM文档查询方法 | 可通过在线文档(W3C)或离线手册查询： - HTML DOM Element对象; - Document对象方法 | document对象的顶级特性（包含所有其他节点） |
常用资源路径 | - 在线：DOM Element对象文档; - 离线：JavaScript → HTML DOM → DOM参考 | 离线文档分类（DOM Document/DOM Element/DOM Attribute/DOM Event） |
DOM事件类型 | 包含： - onClick; - onDoubleClick; - onKeyDown; - onKeyPress等 | 键盘事件与鼠标事件分类 |
14.获取option节点
知识点 | 核心内容 | 重点 |
DOM节点常用方法 | getElementsByTagName、appendChild等方法的使用 | 方法调用方式（通过具体元素调用） |
DOM节点常用属性 | childNodes、firstChild、lastChild、parentNode、nextSibling、previousSibling、className、innerHTML、innerText | 属性区别（innerHTML获取HTML内容 vs innerText获取文本内容） |
元素查找方法 | getElementById、getElementsByName、getElementsByTagName三种主要方法 | 方法适用场景区分（ID/name/tagName查找） |
动态事件绑定 | window.onload和onclick事件绑定实现 | 执行时机（页面加载完成后绑定） |
集合对象操作 | HTMLCollection对象的遍历和属性访问 | 集合访问方式（下标访问和length属性） |
开发工具技巧 | Ctrl+Home/End快速导航、代码结构保持一致性 | 快捷键使用场景（长文件快速定位） |