JavaScript的WebAPI之DOM操作

最近更新： 2025-11-04

JavaScript

WebAPI

DOM

操作

28+

关任务

348+

课时

10352

人学习

387+

条好评

本阶段是DOM课程的讲解，从DOM的概念，到DOM的获取元素对象的各种方法，以及对样式的操作，对元素内容和属性的操作，对事件的操作，位置属性操作等，再到实战项目，全程覆盖DOM的每个知识点，并且讲解每个知识点，都结合网页中流行的特效案例进行讲解。并配有项目开发过程。

￥限期免费

第 1 章: JavaScript的DOM应用 ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ 共 15 节 【3小时18分54秒】

1-1: 作业讲解 15分32秒

1-2: dom的功能介绍 15分32秒

1-3: 了解document文档 15分32秒

1-4: 了解object文档元素对象的集合 15分32秒

1-5: 了解model操作元素内容 15分32秒

1-6: 操作对象属性 15分32秒

1-7: 8 单个样式操作 15分32秒

1-8: 伸缩菜单案例 15分32秒

1-9: 操作类样式 15分32秒

1-10: 选项卡实例 15分32秒

1-11: 通过名子属性获取元素集合 15分32秒

1-12: 通过类名获取元素的对象集合 15分32秒

1-13: 作业和总结 15分32秒

1-14: 作业 5.58M

1-15: 配套资料 5.58M

第 2 章: DOM导航和节点操作 ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ 共 12 节 【3小时18分54秒】

2-1: 作业讲解（自定义方法通过类名获取元素集合） 15分32秒

2-2: 通过css选择器获取元素对象集合 15分32秒

2-3: 了解dom导航的dom树结构 15分32秒

2-4: 节点的属性 15分32秒

2-5: dom节点之间导航 15分32秒

2-6: 自定义dom导航函数只获取元素节点 15分32秒

2-7: 自定义扩展dom获取所有同胞的方法 15分32秒

2-8: 创建元素追加到dom树中 15分32秒

2-9: 删除和替换节点 15分32秒

2-10: 总结和作业 15分32秒

2-11: 作业 5.58M

2-12: 配套资料 5.58M

第 3 章: DOM元素的位置属性和事件操作 ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ 共 15 节 【3小时18分54秒】

3-1: 作业（动态创建表格） 15分32秒

3-2: 了解节点的位置属性 15分32秒

3-3: 常见的只读位置属性 15分32秒

3-4: offsettop和offsetleft偏移位置属性 15分32秒

3-5: dom动画（在区域内的弹球） 15分32秒

3-6: 位置属性（滚动的图片） 15分32秒

3-7: 事件对象 15分32秒

3-8: 事件冒泡处理 15分32秒

3-9: 跟随鼠标移动的图片 15分32秒

3-10: 模拟鼠标拖拽事件 15分32秒

3-11: 角色扮演游戏模型 15分32秒

3-12: 在屏幕上定位的广告 15分32秒

3-13: 作业和总结 15分32秒

3-14: 作业 5.58M

3-15: 配套资料 5.58M

第 4 章: DOM表单操作及相关的案例 ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ 共 11 节 【3小时18分54秒】

4-1: 作业（固定导航栏） 15分32秒

4-2: dom操作表单常用的事件和方法 15分32秒

4-3: 表单焦点事件和方法 15分32秒

4-4: 表单的改变事件 15分32秒

4-5: js表单验证api 15分32秒

4-6: 全项表单验证案例 15分32秒

4-7: 三级联动菜单 15分32秒

4-8: 权限选择问题 15分32秒

4-9: 总结和作业 15分32秒

4-10: 作业 5.58M

4-11: 配套资料 5.58M

第 5 章: 原生JS版贪吃蛇游戏项目开发过程 ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ ‥‥‥‥‥ 共 13 节 【3小时18分54秒】

5-1: 作业（dom实现可编辑的表格） 15分32秒

5-2: 贪吃蛇游戏设计 15分32秒

5-3: 游戏初始化 15分32秒

5-4: 声明和创建游戏地图 15分32秒

5-5: 为蛇构造食物对象 15分32秒

5-6: 创建和显示蛇 15分32秒

5-7: 让蛇跑起来 15分32秒

5-8: 改变蛇的运动方向 15分32秒

5-9: 让蛇吃掉食物自己变长 15分32秒

5-10: 判断游戏结束重新开始 15分32秒

5-11: 设置游戏通关级别 15分32秒

5-12: 作业 5.58M

5-13: 配套资料 5.58M

JavaScript

第一关： JavaScript的DOM应用 本关是DOM学习的第一关，重点讲解DOM使用，包括对DOM的介绍，文档对象的属性和方法的使用，获取文档的对象集合，操作对象的属性，操作对象的单个样式，和操作对象的类样式，以及通过名子属性获取元素集合，通过类名获取元素对象集合等内容。并结合伸缩菜单，以及选择卡等案例，对本关内容进行贯穿。

JavaScript

第二关：DOM导航和节点操作 本关内容是DOM导航和节点操作，包括DOM树的结构介绍，节点的属性，以及在DOM节点之间进行导航，重点是创建元素节点，并在DOM树中追加，以及删除和替换节点的操作，并结合几个常用的DOM导航案例进行讲解。

JavaScript

第三关：DOM元素的位置属性和事件操作 本关主要的内容是讲解元素的各种位置属性，并通过位置属性讲解DOM的动画开发，以及讲解DOM中的常用事件，和事件对象，以及事件冒泡处理，并通过常用的一些事件，结合位置属性，开发页面中常见的动画。

JavaScript

第四关：DOM表单操作及相关的案例 本关主要讲解和DOM操作表单相关的内容，包括表单使常用的事件和操作方法，和JS表单验证API。重点讲解联动菜单，权限选择和表单验证等，常见的和表单相关的实用案例。

JavaScript

第五关：原生JS版贪吃蛇游戏项目开发过程 本关内容是经典的网页游戏贪吃蛇案例开发全过程，　从项目需求分析到游戏上开发过程一步步实现，　并以面向对象的思想开发，并结合游戏的算法和业务流程，可以将JavaScript基础、BOM和DOM所学知识串联到一起，也可以启发开发思路。

