JavaScript——WebAPI

JS包括三个部分

1. ECMAScript，也就是基础语法
2. DOM API ， 操作页面结构的API
3. BOM API， 操作浏览器的API
   上篇博客讲的就是基本语法，这篇博客讲的WebAPI，则包括后面的DOM和BOM

API就是，假如A开发了一个软件，非常的好用，这个时候他想让别人也来用这个软件，但是别人不想学，于是A就把这个软件提供了一系列的接口，这样别人只需要掌握如何操作一些特定的函数就可以用了，不必完全的了解这个软件

获取元素

let div = document.querySelector('div');
1

使用上面的方法我们就可以将html中的div标签和js中的元素进行关联，这里我们选中了div标签

如果有多个div标签，这个方法只能选中第一个div标签，想要全部选中，可以用下面这个方法

let divs = document.querySelectorAll('div');
1

之前在CSS中讲的选择器，在js的获取元素中也可以用到

let div = document.querySelector('.child');
let div = document.querySelector('#num');
let div = document.querySelector('h3 span div');
1
2
3

事件

我们的用户在浏览器上的任何操作，都是一个事件，针对这些事件，浏览器可以给出特定的反应
事件的三个要素：

1. 事件源： 事件由哪个元素发出来的
2. 事件类型： 例如点击，覆盖，移动
3. 事件处理程序： 事件由哪个函数来进行操作

例如：

let div = document.querySelector('div');
div.onclick = function(){
	console.log('div被点击了')
}
1
2
3
4

当我们的div被点击时，就会关联到onclick这个属性，这个属性针对点击这个事件，有提前准备好的事件处理程序，于是就可以打印日志

操作元素

修改元素内容

通过调用元素的innerHTML属性，可以获得并修改其中的元素

let div = document.querySelector('div');
div.innerHTML = 'hello';
1
2

修改元素的属性

直接调用选取元素的属性即可修改

<img src="car.jpg" alt="大奔驰" title="glb">
<script>
	let img = document.querySelector('img');
	img.src = './BMW.png';
script>
1
2
3
4
5

还可以修改表单元素的属性

1. value input的值
2. disabled 禁用
3. checked 复选框被选中
4. selected 下拉框被选中
5. type input的类型

例如可以将按钮的文本样式点击后进行转换

<input type="button" value="play">
<script>
	let btn = document.querySelector('input');
	btn.onclick = function () {
		if (btn.value === 'play') {
			btn.value = 'pause';
		} else {
			btn.value = 'play';
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11

例如在复选框中加入“全选”的元素，点击后可以选中所有元素，再次点击后取消所有元素

<div>请选择你的英雄div>
<input type="checkbox" class="all">all <br>
<input type="checkbox" class="hero">curry <br>
<input type="checkbox" class="hero">leborn <br>
<input type="checkbox" class="hero">durant <br>
<script>
let all = document.querySelector('.all');
let heros = document.querySelectorAll('.hero');
all.onclick = function () {
	for (let i = 0; i < heros.length; i++) {
		heros[i].checked = all.checked;
	}
}
for (let i = 0; i < heros.length; i++) {
	heros[i].onclick = function () {
		all.checked = checkHeros(heros);
	}
}
function checkHeros(heros) {
	for (let i = 0; i < heros.length; i++) {
		if (!heros[i].checked) {
			return false;
		}
	}
	return true;
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

修改元素样式

元素名.style.[属性名] = [属性值];
1

例如点击文字后增加文字的大小

<div style="font-size: 20px"> hello world div>
<script>
	let div = document.querySelector('div');
	div.onclick = function () {
		var size = parseInt(this.style.fontSize);
		size += 10;
		this.style.fontSize = size + "px";
	}
script>
1
2
3
4
5
6
7
8
9

注意，一定要后面加px，否则修改不生效

修改元素类名

元素名.className = [类名];
1

由于class是js的保留字（不确定以后要不要引入类的概念，因此先占个坑），所以使用className代替class

操作节点

增加节点

首先要创建元素

let 元素名 = document.creatElement(元素内容);
1

然后把元素添加到dom树上，通过其父亲元素调用下面这个方法来实现

父元素名.appendChild(子元素);
1

例如创建一个新的div，加入到.container的父元素下

<div class="container">

div>
<script>
	let div = document.createElement('div');
	div.innerHTML = '新增元素';
	let container = document.querySelector('.container');
	container.appendChild(div);
script>
1
2
3
4
5
6
7
8
9

删除节点

和刚才的新增元素差不多，通过父亲元素调用下面这个方法删除

父元素名.removeChild(子元素);
1

通过上面这些简单的操作我们就可以通过js来操作html界面的元素了，接下来的博客会介绍几个简单的案例