学习日记-JS+DOM-day58-9.18
1.获取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快速导航、代码结构保持一致性 | 快捷键使用场景（长文件快速定位） |
2.按照name获取节点
知识点 | 核心内容 | 重点 |
DOM元素获取方法 | 使用getElementsByName()获取同名节点集合 | 返回值是NodeList而非单个元素 |
表单元素取值 | 通过.value属性获取input元素的值 | 与innerText的区别（value获取表单值） |
复选框处理 | 遍历NodeList并检查checked属性 | 只显示被选中项的逻辑实现 |
事件绑定 | onclick事件处理函数的基本写法 | 匿名函数与回调函数的应用场景 |
循环遍历 | 使用for循环处理NodeList集合 | 集合下标访问方式（类数组操作） |
3.获取指定dom对象下的子节点(1)
知识点 | 核心内容 | 重点 |
DOM元素范围限定查询 | 通过getElementById先获取父元素，再用getElementsByTagName获取子元素集合 | 范围限定与全局查询的区别 |
节点内容获取方式 | 根据标签类型选择value或innerText属性（input用value，li用innerText） | 属性选择逻辑 |
集合对象遍历 | 使用length属性和下标访问集合元素 | 集合与数组操作差异 |
事件绑定机制 | onclick事件处理函数中执行DOM操作 | 事件触发时序控制 |
多层DOM操作 | 通过链式调用实现层级访问（如document.getElementById().getElementsByTagName()） | 作用域链理解 |
4.获取指定dom对象下的子节点(2)
知识点 | 核心内容 | 重点 |
DOM节点获取方法 | 三种获取子节点的方法： 1) getElementsByTagName 2) childNodes属性 3) 直接遍历select元素 | childNodes会包含文本节点 vs getElementsByTagName仅获取元素节点 |
文本节点处理 | 换行符会被识别为文本节点，导致childNodes返回数量异常 | 实际子节点数量(11个) vs 视觉元素数量(5个) |
集合类型差异 | HTMLCollection与NodeList的特性对比 | 动态集合特性 vs 静态集合特性 |
元素过滤技巧 | 使用selected属性筛选已选中的option元素 | undefined判断 vs 属性存在性验证 |
历史编程实践 | 早期DOM编程需手动处理空白文本节点 | 现代框架自动处理 vs 原生DOM需显式过滤 |
特殊集合访问 | SelectElement直接支持options集合索引访问 | 隐式集合特性 vs 显式查询 |
5.获取第一个节点
知识点 | 核心内容 | 重点 |
获取DOM子节点方法 | 使用firstChild属性获取第一个子节点 | firstChild与childNodes[0]的区别：前者可能返回文本节点，后者直接返回元素节点 |
DOM节点类型识别 | 通过nodeType区分文本节点(3)和元素节点(1) | 空文本节点在childNodes中的存在容易被忽略 |
方法链式调用 | firstChild和lastChild可连续调用获取嵌套节点 | 需注意中间节点是否为元素节点 |
事件绑定验证 | 通过onclick事件测试节点获取结果 | 函数体位置错误会导致事件失效 |
节点过滤特性 | children集合自动过滤非元素节点 | 与childNodes包含所有节点的差异 |
6.获取父节点
知识点 | 核心内容 | 重点 |
DOM树结构 | 通过a→b/c→d/e的层级示例讲解DOM树形结构 | 父节点与子节点的双向获取逻辑 |
获取父节点方法 | 使用parentNode属性获取指定元素的父节点 | parentNode与parentElement的区别 |
节点遍历技术 | 通过父节点反向遍历所有子节点（含文本节点） | childNodes包含文本节点导致长度计算差异 |
元素集合特性 | ul元素默认包含li集合（类比select-option结构） | 集合类元素的通用操作方法 |
动态调试技巧 | 通过innerHTML验证节点获取准确性 | 格式化代码对文本节点数量的影响 |
节点操作实战 | 使用for循环遍历父节点下的所有语言项 | 处理undefined值的边界情况 |
7.获取兄弟节点
知识点 | 核心内容 | 重点 |
DOM节点操作 | 讲解如何通过JavaScript获取DOM节点的前后兄弟节点 | 文本节点与元素节点的区别（换行符也会生成文本节点） |
previousSibling属性 | 获取当前节点的前一个兄弟节点（可能是文本节点） | 需要连续调用两次才能获取真正的元素节点 |
nextSibling属性 | 获取当前节点的后一个兄弟节点（可能是文本节点） | 需要连续调用两次才能获取真正的元素节点 |
DOM与MVVM关系 | 解释Vue等框架底层仍依赖DOM操作 | 数据驱动视图的实现原理 |
节点关系类型 | 完整节点操作体系：子节点、父节点、兄弟节点 | 上下左右全方向节点获取方法 |
8.设置文本域内容
知识点 | 核心内容 | 关键细节 |
读取CT的values属性 | 使用getElementById获取元素后通过.value属性读取 | 与innerText属性的区别 |
修改DOM元素内容 | 通过innerText属性修改标签间文本内容 | 文本域与普通元素的处理差异 |
DOM编程核心模式 | 1. 获取DOM对象; 2. 操作属性/方法 | 操作前必须确保成功获取对象 |
文本域内容设置 | 对textarea元素使用innerText修改内容 | 注意与value属性的适用场景区别 |
事件绑定基础 | element.onclick绑定点击事件 | 现代更推荐addEventListener方式 |
DOM操作应用场景 | • 元素查找; • 内容修改; • 样式调整 | 需理解DOM树结构 |
9.乌龟吃鸡游戏
- 通过方向键控制乌龟图片上下左右移动
- 当乌龟与静止的公鸡图片重合时触发碰撞事件
- 碰撞后弹出"乌龟好厉害呀"对话框并重置乌龟位置
知识点 | 核心内容 | 重点 |
网页坐标体系 | 绝对定位（position: absolute）的参照点为窗口原点（左上角），通过left（横坐标）和top（纵坐标）控制元素位置 | 坐标参考点（窗口原点 vs. 图片左上角） |
功能拆解 | 第一步：完成乌龟与公鸡的网页基础展示（提供素材文件） | 动态效果需后续补充核心代码 |
绝对定位实践 | 修改left和top值可移动元素（示例：归零后元素贴附窗口左上角） | 数值增减与方向关系（右/下为正） |
代码复用逻辑 | 坐标体系与JAVA坦克大战项目一致，强调基础知识的迁移性 | 跨语言坐标规则通用性 |
10.乌龟吃鸡游戏(2)-动起来思路
知识点 | 核心内容 | 重点 |
DOM操作基础 | 通过修改DOM元素的style.left和style.top属性实现元素移动 | 动态绑定 vs 静态绑定事件 |
乌龟移动逻辑 | 修改top值减小（上移）、增加（下移）；修改left值增加（右移）、减小（左移） | 坐标增减方向与移动方向的对应关系 |
事件绑定策略 | 为方向按钮绑定onclick事件（示例采用静态绑定） | 动态绑定的适用场景与实现方式 |
编程思维训练 | “先分析再实现”的流程：获取DOM对象→修改属性→绑定事件 | 分析阶段与代码实现的衔接 |
11.乌龟吃鸡游戏(3)-绑定move
知识点 | 核心内容 | 重点 |
事件绑定传参技巧 | 通过onclick事件传递value或this区分按钮操作（如up/left/right/down） | this指向被点击的DOM对象（HTMLInputElement），可通过.value获取按钮标识 |
DOM属性动态修改 | 获取乌龟DOM的style.left/top（带px的字符串），需转换为Number后再计算 | 直接操作字符串会导致计算错误（如"100px" + 10） |
调试技巧 | 不确定时输出日志（console.log或alert）验证数据，避免后续代码因前置错误失效 | 调试成本控制：分段验证而非写完所有代码再测试 |
代码优化思路 | 用单一函数+参数区分方向（替代四个独立函数），通过obj.value判断操作类型 | 逻辑集中处理 vs 分散重复代码 |
编程思维训练 | “感情的自然流露”：通过DOM对象属性联想其可操作方法（如.style修改样式） | 对象思维：从DOM到属性再到行为的链式推导 |
12.乌龟吃鸡游戏(4)-乌龟动起来
知识点 | 核心内容 | 易混淆点 |
字符串转数字处理 | 使用substring和indexOf提取数值部分，再用parseInt转换类型 | 字符串拼接与数值相加的区别（"100"+20="10020"） |
DOM元素坐标操作 | 通过style.left/style.top获取带单位(px)的字符串值 | 带单位字符串必须去除"px"才能数学运算 |
坐标体系移动逻辑 | 向上/下移动修改top值（减/加），向左/右移动修改left值（加/减） | CSS坐标系与数学坐标系方向差异（Y轴向下增大） |
类型转换原理 | 必须通过API完成字符串到数字的转换（如parseInt） | 直接强制转换与解析转换的区别 |
碰撞检测基础 | 矩形碰撞判断比坦克大战简单（固定朝向） | 多物体碰撞检测复杂度差异 |
13.乌龟吃鸡游戏(5)-碰撞思路
知识点 | 核心内容 | 重点 |
碰撞检测逻辑 | 通过计算乌龟和公鸡的纵向距离（y）和横向距离（x），结合图片高度/宽度判断是否重叠 | 纵向距离需对比乌龟高度或公鸡高度，横向距离需对比乌龟宽度或公鸡宽度 |
四种碰撞情况 | 1. 乌龟从上方碰撞公鸡（y < 乌龟高度）; 2. 乌龟从下方碰撞公鸡（y < 公鸡高度）; 3. 乌龟从左侧碰撞公鸡（x < 乌龟宽度）; 4. 乌龟从右侧碰撞公鸡（x < 公鸡宽度） | 需区分距离对比对象（乌龟/公鸡的尺寸） |
最终碰撞判定 | 当纵向（y）和横向（x）距离同时满足条件时，判定为碰撞 | 需理解“可能重叠”与“实际碰撞”的区别 |
14.乌龟吃鸡游戏(6)-实现碰撞
知识点 | 核心内容 | 重点 |
碰撞检测算法实现 | 通过计算乌龟和公鸡图片的绝对距离判断碰撞条件，使用Math.abs()方法获取纵向(y)和横向(x)距离 | 绝对值计算逻辑（需注意正负值处理） 坐标系统理解（top/left定位原理） |
DOM元素动态定位 | 定义乌龟(cock)和公鸡(turtle)的初始坐标及图片尺寸参数 | 变量定义时机（需在碰撞判断前初始化） 像素值准确性（图片实际尺寸必须精确匹配） |
条件分支逻辑构建 | 嵌套if-else结构处理四种碰撞方向（上/下/左/右） | 方向判断条件（top/left值大小比较逻辑） 状态变量联动（x/yy同时为1时触发碰撞） |
碰撞后重置机制 | 触发碰撞后将乌龟重置到初始位置(100px,120px) | style属性动态修改（需同时操作left/top属性） 默认值设定规范（x/yy初始化为0） |
调试技巧 | 通过控制台验证坐标计算和碰撞触发条件 | 边界值测试（精确到1px的碰撞检测） 斜向移动验证（需同时修改x/y坐标） |