js接口

# 接口

DOM 页面文档对象模型

BOM 浏览器对象模型

主要学习 Web APIs

Web APIs 是W3C 组织的标准

API ：是一些预先定义的函数，目的是提供应用程序与与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部机制的细节

Web API 是浏览器提供的一套操作浏览器功能和元素的API

# DOM

文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中所有标签都是元素，DOM中使用 element 表示
节点：页面中所有内容都是节点（标签、属性、文本、注释等），DOM中使用 node 表示

# 获取元素

# getElementById

var time = document.getElementById('time');
console.log(time);
//打印返回的元素对象 更好的查看属性和方法
console.dir(time);

1
2
3
4

返回值是一个元素对象

# getElementByTagName

使用getElementsByTagName() 方法可以返回带有指定标签的对象的集合

以伪数组形式存储

var lis = docment.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);

1
2
3

也可以结合上面函数获取指定元素

var nav = docment.getElementById('nav');
var navLis = nav.getElementByTagName('li');
console.log(navLis);

1
2
3

# H5新增

getElementsByClassName('box');

根据类名互获取某些元素集合
querySelector('选择器');

返回指定选择器的第一个元素对象
querySelectorAll('选择器');

返回指定选择器的所有元素对象集合

# 获取body和html元素

//获取body元素对象
document.body;
//获取html元素对象
document.documentElement;

1
2
3
4

# 事件

事件是 js 检测到的行为

触发-响应机制

事件三要素

事件源
事件类型
事件处理程序

//事件源
var btn = document.getElementById('btn');
//事件类型 处理程序
btn.onclick = function(){
	alert('yuadh');
}

1
2
3
4
5
6

鼠标事件	触发条件
onlick	左键点击
onmouseover	经过
onmouseout	离开
onfocus	获得焦点
onblur	失去焦点
onmousmove	移动触发
onmouseup	弹起触发
onmousedown	按下触发

# 改变元素内容

js 的 DOM 操作可以改变网页内容、接口和样式

element.innerText

从起始位置到终止位置的内容，但它去除标签，同时空格和换行也会去掉

element.innerTHML

起始位置到终点位置的全部内容，包括标签，同时保留空格和换行

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function(){
	div.innerText = get DateO();
}
function getDate() {
	var date = new Date();
	var year = date.getFullYear();
	var year = date.getMonth()+1;
	var dates = date.getDate();
	var day = date.getDay();
}

1
2
3
4
5
6
7
8
9
10
11
12

# 案例根据时间访问

var img =document.querySelector(img);
var date = new Date();
var h = date.getHours();
if(h < 12){
   img.src = 'images/s.gif';
   div.innerHTML = 'y'
}else if(){
   img.src = 'images/y.gif';
   div.innerHTML = 'd'     
}else {
   img.src = 'images/z.gif';
   div.innerHTML = 'h'
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 表单元素属性操作

src href title alt

type value checked selected disable

按钮点击案例

var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function(){
	input.value = 'checked';
    //被点击
	btn.disabled = true;
    //or 
    this.disable = true; 
}

1
2
3
4
5
6
7
8
9

# 密码显示隐藏显示案例

var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;
eye.onlick = function(){
	if(flag == 0){
		pwd.type = 'text';
		eye.src = 'URL';
		flag = 1;
	}else {
		pwd.type = 'passwrod';
		eye.src = 'URL';
		flag = 0;
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 样式属性操作

element.style 行内样式操作

element.className 类名样式操作

行内样式的 CSS 样式权重更高

采用多驼峰命名

var div = document.querySelector('div');
div.onclick = function(){
    this.style.backgroundColor = 'red';
    this.style.width = '250px';
}

1
2
3
4
5

# 循环精灵图案例

var lis = document.querySelectorAll('li');
for (var  i = 0; i < lis.length ;i++){
	var index = i*44;
	lis[i].style.backgroundPosition = '0-'+index + 'px';
}

1
2
3
4
5

# 显示隐藏文本框内容

var text = document.querySelector('input');
text.onfocus = function(){
	if(this.value === '手机'){
		this.value = '';
	}
	this.style.color = '#333';
}
text.onblur = function(){
	if(this.value === ''){
		this.value = '手机';
	}
	this.style.color = '#999';
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 类名样式操作

<style>
    .change {
        backgorund = red;
    }
</style>
<body>
    <div>
        123
    </div>
	<script>
    	var test = documet.querySelector('div');
        test.onclick = function(){
            this.className = 'change';
        }
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意

提高复用率
className 会直接更改元素的类名，会覆盖原先的类名

显示案例

var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
ipt.onblur = function(){
	if(this.value.lenth < 6||this.value.length > 16){
		message.className = 'message wrong';
		message.innerHTML = 'ERROR';
	} else {
		message.className = 'message right';
		message.innerHTML = 'right';
	}
}

1
2
3
4
5
6
7
8
9
10
11

编辑

上次更新: 2023/02/07, 14:51:48

← 数据类型 DOM案例→