day03_WebAPIs.ppt

Web APIs,今日复习,排他操作的实现步骤是所有元素全部清除与设置当前元素 h5中新增了通过data-属性名方式设置自定义属性 h5中通过element.dataset.属性名获取自定义属性 页面中的节点分为：元素节点、文本节点、属性节点、注释节点获取父级节点使用 element.parentNode 获取所有的子元素节点使用element.children创建元素节点使用document.createElement()追加子元素使用element.appendChild(),正文-单击此处标题样式微软雅黑24号,昨日复习,今日复习,排他操作的实现步骤是所有元素全部清除与设置当前元素 h5中新增了通过data-属性名方式设置自定义属性 h5中通过element.dataset.属性名获取自定义属性 页面中的节点分为：元素节点、文本节点、属性节点、注释节点获取父级节点使用 element.parentNode 获取所有的子元素节点使用element.children创建元素节点使用document.createElement()追加子元素使用element.appendChild(),正文-单击此处标题样式微软雅黑24号,昨日复习,Contents,目,录,节点操作（删除、复制、创建）注册事件（绑定事件）删除事件（解绑事件）DOM事件流事件对象阻止默认行为阻止事件冒泡事件委托（代理、委派）,能够操作DOM节点能够掌握事件以及事件对象的相关应用,目标,TARGET,删除节点,要点提示,节点操作-删除节点,掌握程度：应用,1.1 节点操作-删除节点,删除留言案例,要点提示,删除留言案例,掌握程度：应用,1.2 删除留言案例,练习,添加留言时有删除链接，单击删除链接删除当前li,提示,在添加li时，给li中增加1个a链接给所有的a链接注册单击事件找到a的父节点li，然后删除,5分钟,1.2 删除留言案例,案例巩固练习,复制节点cloneNode(),要点提示,节点操作-复制节点,掌握程度：应用,1.3 节点操作-复制节点,案例：动态生成表格模拟学生数据,要点提示,动态生成表格-创建学生数据,掌握程度：应用,1.4 动态生成表格-创建学生数据,练习,使用数组把学生数据模拟出来,提示,每个学生数据是1个对象多个学生数据保存到数组中，每个元素是1个学生对象,5分钟,1.4 动态生成表格-创建学生数据,案例巩固练习,创建行,要点提示,动态生成表格-创建行,掌握程度：应用,2.1 动态生成表格-创建行,练习,有几个学生数据，就创建几行，并添加到tbody中,提示,获取tbody元素使用for循环创建行并添加到tbody中,5分钟,2.1 动态生成表格-创建行,案例巩固练习,创建单元格,要点提示,动态生成表格-创建单元格,掌握程度：应用,2.2 动态生成表格-创建单元格,练习,每个行里面又有很多单元格，我们还继续使用循环创建多个单元格，学生对象有几个属性就创建几个单元格,提示,使用for in语句遍历学生对象创建单元格并添加到行中,5分钟,2.2 动态生成表格-创建单元格,案例巩固练习,单元格填充数据,要点提示,动态生成表格-单元格填充数据,掌握程度：应用,2.3 动态生成表格-单元格填充数据,创建删除按钮所在的单元格,要点提示,动态生成表格-创建删除单元格,掌握程度：应用,2.4 动态生成表格-创建删除单元格,删除操作,要点提示,动态生成表格-添加删除操作,掌握程度：应用,2.5 动态生成表格-添加删除操作,练习,单击删除，可以删除当前行。,提示,给所有的a链接注册单击事件找到a的父亲的父亲，即tr然后使用删除,5分钟,2.5 动态生成表格-添加删除操作,案例巩固练习,创建元素的三种方式,要点提示,document.write创建元素（了解）,掌握程度：了解,3.1 document.write创建元素（了解）,innerHTML和createElement(),要点提示,innerHTML和createElement效率对比,掌握程度：了解,3.2 innerHTML和createElement效率对比,1、使用innerHTML和createElement()创建元素，哪个效率高？,3.2 innerHTML和createElement效率对比,课堂问答,课堂问答,DOM核心总结,要点提示,DOM重点核心,掌握程度：了解,3.3 DOM重点核心,关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。,事件高级,要点提示,事件高级导读,掌握程度：了解,3.4 事件高级导读,传统方式注册事件事件监听方式,要点提示,注册事件两种方式,掌握程度：应用,3.5 注册事件两种方式,上午复习,删除节点使用 父节点对象.removeChild(子节点对象)创建节点可以使用 innerHTML 或 createElement()算给元素注册事件的方式有 传统方式 和 事件监听,正文-单击此处标题样式微软雅黑24号,上午复习,正文-单击此处标题样式微软雅黑24号,删除节点使用 父节点对象.removeChild(子节点对象)创建节点可以使用 innerHTML 或 createElement()算给元素注册事件的方式有 传统方式 和 事件监听,低版本IE使用attachEvent()兼容性处理,要点提示,attachEvent注册事件,掌握程度：了解,4.1 attachEvent注册事件,删除（解绑）事件,要点提示,删除事件,掌握程度：了解,4.2 删除事件,事件流,要点提示,DOM事件流理论,掌握程度：理解,4.3 DOM事件流理论,1、什么是事件流？2、什么是事件冒泡,