Web APIS（1），分时显示不同图片，显示不同问候语案例；点击按钮改变文本框中的内容；仿京东显示密码；淘宝关闭二维码案；判断输入密码格式是否正确

Web APIS
JS
ECMAScript DoM BOM
JS基础 Web APIS
API：应用程序编程接口
Web API：浏览器提供的一套操作浏览器功能和页面元素的API
一、DOM：
1.DOM简介：
文档对象模型，处理可拓展语言的标准编程接口。
2.DOM树
文档document
元素element
节点node
3.获取元素：
1）根据id获取：
getElementById()
2）根据标签名获取
getElementByTagName()//返回带有标签名的对象的集合以伪数组的形式存储的

• hhhhhhhhhhhhhhhhhhh
• hhhhhhhhhhhhhhhhhhh
• hhhhhhhhhhhhhhhhhhh
• hhhhhhhhhhhhhhhhhhh
• hhhhhhhhhhhhhhhhhhh

• hhhhhhhhhhhhhhhhh1h
• hhhhhhhhhhhhhhhhh1h
• hhhhhhhhhhhhhhhhh1h
• hhhhhhhhhhhhhhhhh1h
• hhhhhhhhhhhhhhhhh1h

3）通过html5新增的方法获取 document.getElementsByClassName('类名');//根据类名返回元素对象集合 document.querySelector('选择器');//根据指定选择器返回第一个元素对象,切记里面的选择器需要加符号，类选择器要加点，id选择器要加# document.queryAll('选择器');//返回指定选择器的所有元素对象集合 a. var box=document.getElementsByClassName('box'); b. var firstBox=document.querySelector('.box'); console.log(firstbox); c. var allBox=document.queryAll('.box'); console.log(allBox);

4）特殊元素获取body,html
获取body:
document.body
获取html:
var htmlEle=document.documentElement;
console.log(htmlEle);

注意：a.文档页面从上往下加载，所以先得有标签，所以我们的script写在标签的下面
var timer=document.getElementById(‘timer’);
b.id是大小写敏感的字符串
c.返回的都是对象
d.打印我们返回的元素对象，更好的查看里面的属性和方法
console.dir(timer);
4.事件基础
点击一个按钮，弹出对话框
事件源、事件类型、事件处理程序
按钮 如何触发 函数赋值完成
唐伯虎
var btn=document.getElementById(‘btn’);
btn.οnclick=function(){
alert(‘点秋香’);
}
5.操作元素
5.1改变元素内容
element.innerText//从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉，不识别html标签
element.innerHTML//起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行，识别html标签
5.2常用的元素操作方法
刘德华
张学友

获取元素
var ldh=document.getElementById(‘ldh’);
var zxy=document.getElementById(‘zxy’);
zxy.οnclick=function(){
img.src=“images/zxy.jpg”;
img.title=“张学友”;
}
注册事件，处理程序
ldh.οnclick=function(){
img.src=“images/ldh.jpg”;
img.title=“刘德华”;
}
分时显示不同图片，显示不同问候语案例

上午好

5.5样式属性操作 a. element.style行内样式操作

}

淘宝关闭二维码案例：

x

b. element.className类名样式操作
原来就有一个first类
声明一个change的css样式
this.className=‘change’;
className会覆盖原先的类名
如果要保留原先的类名可以这么做：
this.className=‘first change’;多类名选择器
5.5更换精灵图
竖着排列的精灵图

显示隐藏文本框的内容
获得焦点onfocus
失去焦点onblur
如果获得焦点判断表单里是否为默认文字，如果是默认文字，就清空表单内容

判断输入密码格式是否正确

请输入6~16位密码