韩顺平_轻松搞定javascript第八章_dom编程开山篇

北京传智播客教育 轻松搞定javascript dom编程 1 讲师 韩顺平email hanshunping qq 2317702760 内容介绍 dom编程开山篇1 1为什么要学习dom编程1 2dom编程简介1 3dom编程一个实例 乌龟抓鸡 主讲韩顺平 学习目标 1 明确dom编程的重要性2 初步认识dom编程 为什么学dom编程我们在前面把js的基础知识讲解完了 可是如果你认为js只能做类似点击一个按钮 显示当前时间 如下图 那你就太小看js 实际上js更重要的作用是可以让用户对网页元素进行交互操作 这才是学习js的精华之所在 请看一个案例 dom编程开山篇 为什么学习dom编程 主讲韩顺平 请大家看一个案例 乌龟抓鸡 如果你希望完成这一个小游戏 则需要掌握dom编程技术 dom编程开山篇 为什么学习dom编程 为什么学dom编程 主讲韩顺平 小游戏说明 点击上下左右按钮 乌龟可以移动 当乌龟碰到公鸡后 就提示乌龟你好猛呀 ok然后把乌龟放回到原来出发的位置 再看几个小项目 1 贪吃蛇 2 推箱子 3 坦克大战 这些都需呀用的dom编程 当我们学习完这一章节后 大家可以很轻松的写出类似的项目了 dom编程开山篇 为什么学习dom编程 为什么学dom编程 主讲韩顺平 dom编程 也是我们学习ajax技术的基础 所以我们必须掌握好dom编程 dom编程开山篇 为什么学习dom编程 为什么学dom编程 主讲韩顺平 dom htmldom xmldom js把浏览器 网页文档和网页文档中的html元素都用相应的内置对象来表示 这些对象与对象间的层次关系构成dom模型 针对网页 html jsp php 的dom就是htmldom 我们这讲的就是htmldom 关于使用js对xml文件的dom编程 我们这暂时不讲 到讲ajax的时候在给大家讲解 可以借助数据库编程来讲清dom编程分类 dom编程开山篇 dom编程简介 dom编程简介DOM DocumentObjectModel 文档对象模型 根据W3CDOM规范 DOM是HTML与XML的应用编程接口 API DOM将整个页面映射为一个由层次节点组成的文件 主讲韩顺平 dom编程开山篇 dom编程简介 dom编程简介 dom编程的示意图 重要 主讲韩顺平 前面说过 js把浏览器 网页文档和网页文档中的html元素都用相应的内置对象 看文档 来表示 这些对象与对象间的层次关系构成dom 针对网页 html jsp php 的dom就是htmldom 我们这讲的就是htmldom 这里有几个特别重要的概念要给大家说清楚 上面说的内置对象就是dom对象 准确的说是htmldom对象 因为我目前讲的是htmldom编程 所以我提到的dom编程 dom对象都是说的htmldom编程和htmldom对象 请大家不要犯迷糊 dom编程时 会把html文档看做是一颗dom树 对照乌龟抓鸡来的代码来说明dom编程 首先要画出htmldom图 参看资料文件夹 已经画好 dom编程的核心就是各个dom对象 下一章节会详细讲解 dom编程开山篇 dom编程简介 dom编程简介 dom对象 主讲韩顺平 HTMLDOM定义了访问和操作HTML文档的标准方法 HTMLDOM把HTML文档呈现为带有元素 属性和文本的树结构 节点树 dom编程开山篇 dom编程简介 dom编程简介 htmldom层次图 主讲韩顺平 小游戏说明 点击上下左右按钮 乌龟可以移动 当乌龟碰到公鸡后 就提示乌龟你好猛呀 ok然后把乌龟放回到原来出发的位置 game2 htm dom编程开山篇 dom编程一个实例 dom编程一个实例 乌龟抓鸡为了让大家能够对htmldom编程有一个直观的感受 我们来编写一个实例 主讲韩顺平 对乌龟抓鸡添加功能 上机 exercise02 htm 小游戏说明 点击上下左右按钮 乌龟可以移动 当乌龟碰到公鸡后 就提示乌龟你好猛呀 ok然后把乌龟放回到原来出发的位置 当乌龟碰到