先搞清楚：这门课解决什么工作场景
很多上班族在刚接触前端时，能用基础语法写点校验逻辑，但一遇到真实的页面交互就卡壳。比如鼠标移上去要弹出一个跟随的文字提示层，或者要批量操作表格里的某一行数据，往往不知道怎么精准拿到对应的元素。这门课聚焦的就是 JavaScript 里最实用的 DOM 与 BOM 操作，专门解决“怎么用代码去操控页面元素、处理浏览器行为”的问题。它不教花哨的框架，而是把日常页面开发中最频繁的交互场景拆解成具体知识点，帮你补齐从“会写语法”到“能做页面交互”之间最关键的一环。
适合什么基础，建议先看哪几块
这套资料不适合完全零基础的人。你需要已经掌握变量、循环、函数等基础语法，否则直接看节点操作会有些吃力。如果你是转行刚学完基础语法的自学者，或者是平时只切图、想往动态交互方向挪一步的上班族，这门课刚好能接上。建议学习时优先看节点关系查找、属性操作以及坐标定位这几块。节点关系部分讲透了怎么找父级、子级和兄弟节点，这是所有批量操作的基础；坐标定位部分涉及偏移量计算和可视区域获取，这是做悬浮提示、拖拽效果必须吃透的核心逻辑。先把这两块啃下来，后续再复杂的页面交互你都能理清思路。
资料怎么配合练习，学完能独立做什么
视频里的文字提示层、隐藏父级等例子都是很好的练手素材。看视频时不要只跟着敲，建议自己新建一个页面，刻意打乱元素层级，再去尝试用代码获取目标节点。每看完一个操作方法，立刻在本地环境里写几个测试用例验证，比如试着不用框架去手动实现一个简单的下拉菜单或者带吸附效果的弹窗。学完这套资料，你能独立完成常规的页面动态效果，熟练操作元素属性，并且能处理基本的浏览器窗口交互。更重要的是，你会彻底明白原生 JavaScript 是怎么和页面打交道的，以后再学其他前端框架，看底层源码时也不会觉得像看天书。
学习DOM与BOM相关内空
课程目录
* 01 DOM/
* 01 DOM的介绍.mp4 06:56
* 02 dom介绍-节点.mp4 20:50
* 03 tagname以及隐藏父级例子.mp4 09:02
* 04 parentnode.mp4 07:35
* 05 parentnode例子.mp4 07:38
* 06 children.mp4 10:45
* 07 找兄弟节点.mp4 10:51
* 08 offsetparent.mp4 08:50
* 09 offsetleft以及offsettop.mp4 11:34
* 10 文字提示层例子.mp4 08:33
* 11 getboundingclientrect.mp4 15:07
* 12 getattribute.mp4 12:34
* 13 setattribute与removeattribute.mp4 06:56
* 14 元素的宽高.mp4 09:03
* 15 可视区的宽高.mp4 04:14
* 16 居中登录框例子.mp4 10:17
* 17 createelement.mp4 07:41
* 18 appendchild.mp4 09:53
* 19 insertbefore.mp4 11:11
* 20 removechild与replacechild.mp4 14:06
* 21 clonenode.mp4 16:00
* 22 dom操作方法的特性.mp4 11:15
* 23 留言板例子.mp4 09:51
* 24 innerhtml与dom方法的区别.mp4 11:26
* 25 动态与静态获取元素.mp4 13:21
* 26 dom操作表格.mp4 25:01
* 27 dom操作表单-1.mp4 15:59
* 28 dom操作表单-2.mp4 20:45
* 02 BOM/
* 01 BOM.mp4 16:17
* 02 useragent与location.mp4 18:49
* 03 bom的相关尺寸.mp4 24:41
* 04 window.onscroll与window.onresiz.mp4 15:41
* 03 事件/
* 01 事件类型.mp4 18:20
* 02 鼠标事件.mp4 09:53
* 03 键盘事件.mp4 13:02
* 04 焦点事件.mp4 28:42
* 05 事件对象.mp4 15:54
* 06 鼠标坐标.mp4 07:33
* 07 跟随鼠标的小方块.mp4 11:14
* 08 鼠标点击出现小圆圈效果.mp4 25:34
* 09 事件源对象 1.mp4 14:34
* 10 键盘事件中的常用属性.mp4 20:05
* 11 键盘控制div移动.mp4 12:50
* 12 放大镜-1.mp4 18:26
* 13 放大镜-2.mp4 09:37
* 14 放大镜-3.mp4 16:29
* 15 事件绑定.mp4 18:34
* 16 移除事件.mp4 11:23
* 17 事件流概念.mp4 11:37
* 18 事件流.mp4 22:55
* 19 目标元素事件的执行顺序.mp4 14:25
* 20 阻止事件冒泡.mp4 17:29
* 21 阻止事件冒泡 例子.mp4 08:11
* 22 浏览器默认行为.mp4 24:29
* 04 面向对象编程/
* 01 面向过程选项卡.mp4 12:19
* 02 面向对象选项卡.mp4 14:33
* 03 面向对象概念.mp4 16:23
* 04 创建对象.mp4 18:45
* 05 new的作用.mp4 21:44
* 06 构造函数.mp4 21:05
* 07 原型.mp4 21:10
* 08 __proto__.mp4 14:06
* 09 原型链.mp4 13:19
* 10 面向对象的轮播图.mp4 27:12
* 11 包装对象.mp4 15:52
* 12 hasOwnProperty.mp4 09:52
* 13 constructor.mp4 23:12
* 14 for in.mp4 23:12
* 15 nstanceof.mp4 07:39
* 16 to string.mp4 17:26
* 17 call与apply.mp4 23:12
* 18 赋值与赋引用.mp4 23:12
* 19 深拷贝与浅拷贝.mp4 23:12
* 20 继承.mp4 24:22
* 21 拖拽继承.mp4 21:38
* 22 组件概念.mp4 09:23
* 23 初始化函数.mp4 20:26
* 24 初始化函数改进.mp4 17:09
* 25 配置参数与默认参数.mp4 11:41
* 26 自定义事件概念.mp4 13:00
* 27 自定义事件.mp4 22:58
* 28 自定义事件拖拽.mp4 05:10
* 29 滑块组件.mp4 16:28
* 30 滑块组件2.mp4 20:04
* 31 滑块组件3.mp4 33:43
* 05 AJAX/
* 01 表单.mp4 10:15
* 02 ajax概念.mp4 09:09
* 03 服务器环境安装.mp4 09:35
* 04 ajax数据交互流.mp4 15:54
* 05 返回数据类型.mp4 06:50
* 06 XMLHttpRequest.mp4 08:20
* 07 get与post的区别.mp4 07:07
* 08 get请求方式.mp4 08:19
* 09 post请求方式.mp4 06:44
* 10 同步与异步.mp4 13:32
* 11 onreadystatechange与onload事件.mp4 13:07
* 12 封装ajax.mp4 38:46
* 13 ajax上传.mp4 23:02
* 14 跨域.mp4 15:50
* 15 jsonp.mp4 14:29
* 16 jsonp里的回调函数.mp4 17:36
* 17 jsonp自定义函数.mp4 24:49
* 18 封装jsonp.mp4 23:14
* 19 作业
