前端-03javascript网页编程07-1002daywebapis

WebAPIsContents目录

WebAPI简介DOM简介

获取元素

注册事件

操作元素内容

操作元素属性能够说出什么是WebAPI能够说出什么是DOM能够获取页面元素能够给元素注册事件能够操作DOM元素的属性目标TARGET学习的主要内容要点提示WebAPIs简介导读掌握程度：了解1.1WebAPIs简介导读视javascript的组成部分WebAPI主要学习的内容要点提示js基础和WebAPIs两个阶段的关联性掌握程度：了解1.2js基础和WebAPIs两个阶段的关联性视API和WebAPI要点提示API和WebAPI掌握程度：理解1.3API和WebAPI视学习目标要点提示DOM导读掌握程度：了解1.4DOM导读视DOM的作用DOM树要点提示DOM简介掌握程度：了解1.5DOM简介视答1、什么是节点？2、什么是元素？课堂问答答视课堂问答1.5DOM简介通过ID获取元素

要点提示getElementById获取元素掌握程度：应用1.6getElementById获取元素视结视getElementById的语法注意事项1：js代码写在标签后面注意事项2：参数是区分大小写的字符串注意事项3：返回的是1个元素对象1.6getElementById获取元素课堂问答视知识总结结通过标签名获取元素要点提示掌握程度：应用2.1getElementsByTagName获取某类标签元素结视getElementsByTagName获取某类标签元素getElementsByTagName的2种语法（document.和父元素.）注意事项1：返回值是元素对象的集合（伪数组）2.1getElementsByTagName获取某类标签元素课堂问答视知识总结结通过class获取元素通过选择器获取单个元素通过选择器获取所有元素要点提示H5新增获取元素方式掌握程度：应用2.2

H5新增获取元素方式结视练getElementsByClassName语法querySelector()语法和返回值querySelectorAll()语法和返回值2.2

H5新增获取元素方式课堂问答视知识总结结练练习HTML页面，有一个ul，ul中有3个li标签：<ul><li></li><li></li><<li></li></ul>，请分别获取第一个li和最后一个li，并打印到控制台！提示创建一个ul和多个使用不同的方式获取其中的li10分钟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分时问候案例视练练习根据不同时间，页面显示不同图片，同时显示不同的问候语。如果上午时间打开页面，显示上午好，显示上午的图片。提示获取元素（img、div）获取当前日期时间的小时数（日期内置对象）判断小时数，改变图片和问候语5分钟4.1分时问候案例分时问候案例巩固练习视练修改表单元素的属性（value、disabled）事件处理函数中的this要点提示操作元素-修改表单属性掌握程度：应用4.2操作元素-修改表单属性视案例分析案例布局要点提示仿京东显示隐藏密码明文案例（上）掌握程度：应用4.3仿京东显示隐藏密码明文案例（上）视练练习动动手，完成案例的html布局吧！提示大盒子div子元素：input和图片调整样式5分钟4.3仿京东显示隐藏密码明文案例（上案例练习视练单击图片切换input的type要点提示仿京东显示隐藏密码明文案例（下）掌握程度：应用4.4仿京东显示隐藏密码明文案例（下）视练练习点击眼睛按钮，把密码框类型改为文本框，看见密码提示获取元素（按钮）注册单击事件使用一个全局变量flag，记录type的状态根据flag的值，改变type和src5分钟4.4仿京东显示隐藏密码明文案例（下案例练习视练行内方式，修改样式属性要点提示操作元素-修改样式属性掌握程度：应用5.1操作元素-修改样式属性视隐藏元素要点提示仿淘宝关闭二维码案例掌握程度：应用5.2仿淘宝关闭二维码案例视设置每个li的背景图要点提示循环精灵图掌握程度：应用5.3循环精灵图视练练习利用for循环设置一组元素的精灵图背景提示获取所有的li使用for遍历每一个li设置每个li的背景图的位置（li索引号*44就是每个图片的y坐标）5分钟5.3循环精灵图案例巩固练习视练获得焦点事件失去焦点事件要点提示显示隐藏文本框内容掌握程度：应用5.4显示隐藏文本框内容视class方式，修改样式要点提示使用className修改样式属性掌握程度：应用6.1使用className修改样式属性视案例分析案例实现要点提示密码框验证信息掌握程度：应用6.2密码框验证信息视练练习用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息提示获取元素（文本框）注册失去焦点事件（onblur）判断输入框内容的长度修改提示内容、图标、样式5分钟6.2密码框验证信息案例练习视练总结作业要点提示操作元素总结以及作业掌握程度：了解6.3操作元素总结以及作业视今日复习获取元素可以通过硬件或硬件或硬件或硬件来获取事件的三要素分别是硬件、硬件、硬件修改元素的内容可以通过硬件或硬件修改元素的属性由硬件系统修改元素的样式属性由硬件系统与软件系统计给元素注册事件的步骤硬件系、软件系、软件系正文-单击此处标题样式微软雅黑24号今日复习获取元素可以通过ID或标签名或class或选择器来获取事件的三要素分别是事件源、事件类型、事件处理程序修改元素的内容可以通过innerText或innerHTML修改元素的属性由元素对象.属性名=值修改元素的样式属性由元素对象.style.样式属性名=值件与元素对象.className=‘类名’给元素注册事件的步骤获取元素、注册事件、编