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
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=“刘德华”;
}
分时显示不同图片,显示不同问候语案例
}
![](images/tao.png)
b. element.className类名样式操作
原来就有一个first类
声明一个change的css样式
this.className=‘change’;
className会覆盖原先的类名
如果要保留原先的类名可以这么做:
this.className=‘first change’;多类名选择器
5.5更换精灵图
竖着排列的精灵图
显示隐藏文本框的内容
获得焦点onfocus
失去焦点onblur
如果获得焦点判断表单里是否为默认文字,如果是默认文字,就清空表单内容
判断输入密码格式是否正确