学习日记-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坐标）