day01_WebAPIs.ppt

Web APIs,Contents,目,录,Web API 简介 DOM 简介 获取元素 注册事件 操作元素内容 操作元素属性,能够说出什么是Web API能够说出什么是DOM能够获取页面元素能够给元素注册事件能够操作DOM元素的属性,目标,TARGET,学习的主要内容,要点提示,Web APIs简介导读,掌握程度：了解,1.1 Web APIs简介导读,javascript的组成部分Web API主要学习的内容,要点提示,js基础和Web APIs两个阶段的关联性,掌握程度：了解,1.2 js基础和Web APIs两个阶段的关联性,API 和 Web API,要点提示,API 和 Web API,掌握程度：理解,1.3 API 和 Web API,学习目标,要点提示,DOM导读,掌握程度：了解,1.4 DOM导读,DOM的作用DOM树,要点提示,DOM简介,掌握程度：了解,1.5 DOM简介,1、什么是节点？2、什么是元素？,课堂问答,课堂问答,1.5 DOM简介,通过ID获取元素,要点提示,getElementById获取元素,掌握程度：应用,1.6 getElementById获取元素,getElementById的语法注意事项1：js代码写在标签后面注意事项2：参数是区分大小写的字符串注意事项3：返回的是1个元素对象,1.6 getElementById获取元素,课堂问答,知识总结,通过标签名获取元素,要点提示,掌握程度：应用,2.1 getElementsByTagName获取某类标签元素,getElementsByTagName获取某类标签元素,getElementsByTagName的2种语法（document.和父元素.）注意事项1：返回值是元素对象的集合（伪数组）,2.1 getElementsByTagName获取某类标签元素,课堂问答,知识总结,通过class获取元素通过选择器获取单个元素通过选择器获取所有元素,要点提示,H5新增获取元素方式,掌握程度：应用,2.2 H5新增获取元素方式,getElementsByClassName 语法querySelector()语法 和 返回值querySelectorAll()语法 和 返回值,2.2 H5新增获取元素方式,课堂问答,知识总结,练习,HTML页面，有一个ul，ul中有3个li标签：，请分别获取第一个li和最后一个li，并打印到控制台！,提示,创建一个ul和多个使用不同的方式获取其中的li,10分钟,2.2 H5新增获取元素方式,获取元素的巩固练习,获取body 元素获取html 元素,要点提示,获取body和html元素,掌握程度：应用,2.3 获取body和html元素,事件事件三要素,要点提示,事件三要素,掌握程度：理解,2.4 事件三要素,给元素绑定事件常用的事件类型,要点提示,执行事件过程,掌握程度：应用,3.1 执行事件过程,1、事件三要素是哪些？2、给元素注册事件的步骤是什么？,3.1 执行事件过程,课堂问答,课堂问答,练习,页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框。,提示,获取元素（按钮）绑定事件（单击事件）编写事件处理代码（弹出对话框）,10分钟,3.1 执行事件过程,注册事件巩固练习,通过 innerText 修改元素的内容,要点提示,操作元素-修改元素内容,掌握程度：应用,3.2 操作元素-修改元素内容,练习,页面加载完，div中展示当前时间单击按钮，div中展示当前时间,提示,获取div元素修改div元素的内容,10分钟,3.2 操作元素-修改元素内容,innerText巩固练习,通过innerHTML修改元素内容innerText和innerHTML的区别获取元素的内容,要点提示,innerText和innerHTML的区别,掌握程度：应用,3.3 innerText和innerHTML的区别,1、innerText和innerHTML的区别？,3.3 innerText和innerHTML的区别,课堂问答,课堂问答,修改属性的值,要点提示,操作元素-修改元素属性,掌握程度：应用,3.4 操作元素-修改元素属性,上午复习,获取元素可以通过硬件或硬件或硬件或硬件系来获取 事件的三要素分别是硬件、硬件、硬件 修改元素的内容可以通过硬件或硬件,正文-单击此处标题样式微软雅黑24号,上午复习,获取元素可以通过ID或硬标签名件或 class或选择器来获取 事件的三要素分别是事件源、事件类型、事件处理程序件 修改元素的内容可以通过innerText或innerHTML,正文-单击此处标题样式微软雅黑24号,根据不同的时间，显示不同的图片,要点提示,分时问候案例,掌握程度：应用,4.1 分时问候案例,练习,