WebAPI简介
什么是API
应用程序接口(API,Application Programming Interface)是基于编程语言构建的结构,使开发人员更容易的创建复杂的功能。API中提供了很多的网络接口供开发者使用。
JS基本上可以分为三大类:
- ECAMScript:基础的JS语法
- DOM API:操作网络页面结构
- BOM API:操作浏览器
本文介绍的webAPI主要包含了DOM 和BOM部分,基础的JS语法在前几篇文章中已经基本介绍了一些,这里就不在介绍。
下面附上API官方参考文档。
https://developer.mozilla.org/zh-CN/docs/Web/API
Dom
什么是Dom
文档对象模型(DOM,全称Document Object Model.)是HTML和XML文档的编程接口。它提供了对文档的结构化表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的接口,样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的集合。
上面是比较复杂 的官方定义,其实就是W3C标准给我们提供了一些已经写好的函数,我们可以直接使用,可以用这些函数来操作网页内容、网页结构、网页样式。
Dom树
当一个新的网页被加载时,浏览器就会创建该页面的文档对象模型(Dom).这个Dom模型会被结构化为一个 存放对象的树结构。这个树结构就是 Dom树。
结构如下:
Dom树中的一些概念:
-
文档:一个网络页面就是一个文档,即document表示
-
元素:页面中的所有标签(tag)都称为元素,即element。
-
节点:网页中的所有内容都可以称为 节点(像标签节点,文本节点,属性节点,注释节点等),即node.
这些文档在JS源码中就对应了一个个的对象。所以才会称为“文档对象模型”。
获取Dom元素
一个Dom树上面有很多很多的对象,再进行操作之前必须先选中对象。Dom API 中提供了很多能够用来选中对象/元素的函数 在本文中我们只介绍最常用功能最强大的两个。
分别是querySelector 和querySelectAll
只有新版本的浏览器才支持(比如IE9之前并不支持)像主流的 浏览器chrome,firefox,edge都是支持的,没有任何问题。
querySelector
querySelector函数的参数是一个“字符串”,而且这个字符串必须是CSS选择器。
当代码中存在多个相同名称的标签时,选择器在进行选择时,会返回被选中元素的第一个(即第一个出现的元素)。
如果想要全部返回,可以使用querySelectAll,会将所有相同名称的标签元素以NodeList(伪数组)的形式,全部返回。
当我们在document上调用这两个方法的时候,相当于从页面对 全局来查找复合要求的元素。
如果是在某个具体的dom对象上调用这两个方法,相当于从这个元素里面来查找复合要求的元素
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--创建父元素 parent,及三个子元素child1,2,3-->
<div class="parent">
<div class="child-1">1</div>
<div class="child-2">2</div>
<div class="child-3">3</div>
</div>
<script>
//选中的结果是一个“元素”,即elem
let elem=document.querySelector('div');
console.log(elem);
</script>
</body>
</html>
输出结果:
querySelectAll
和querySelector使用方法类似。
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--创建父元素 parent,及三个子元素child1,2,3-->
<div class="parent">
<div class="child-1">1</div>
<div class="child-2">2</div>
<div class="child-3">3</div>
</div>
<script>
//选中的结果是一个“元素”,即elem
let elem=document.querySelectorAll('div');
console.log(elem);
</script>
</body>
</html>
输出:
<div class="box">abc</div>
<div id="id">def</div>
<script>
var elems = document.querySelectorAll('div');
console.log(elems);
</script>
事件
一些复杂的程序,往往涉及到组件之间相互通信。
事件机制(event)就是非常典型的组件通信机制。
事件是用户和程序之间的桥梁。
JS要构建动态页面,就需要感知到用户的行为,当用户对页面进行的一些操作(点击,修改,选择额,浏览)等都会在浏览器中产生一个个的事件,当JS捕获到这些事件,就会运行该事件对应的程序,从而实现复杂的交互操作。
事件三要素
1.事件源:被触发的对象
2.事件类型:事件触发的方式
3.事件处理程序:事件触发后,执行的程序。
代码举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="我是一个按钮">
<script>
let button=document.querySelector('input');
button.onclick=function(){
alert("hello");
}
</script>
</body>
</html>
上面的代码中,button是事件源(用户能操作的元素),click就是事件类型(点击事件),通过onlick属性 就能关联到一个具体的事件处理函数。当button触发了click事件(当用户点击了这个按钮后),就会自动调用onclick对应的函数。
操作dom元素
获取/修改元素内容
在CSS的盒模型中,我们已经知道了一个盒子的组成:外边距、边框、内边距、内容。我们要获取和修改的 就是最后的内容。这个内容可能是一个文本,也可能是一个图片,也可能是个链接等,本质上都是一段html代码片段,我们要获取/修改的内容就是这段html片段。
innerHTML
通过element.innerHTML属性就可以设置和获取该元素的内容。
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="parent">
hello
</div>
<button>点击按钮,改变文本</button>
<script>
//选中button按钮
let button =document.querySelector('button');
button.onclick=function () {
//选中parent元素
let parent=document.querySelector('.parent');
//修改parent的内容
parent.innerHTML='word';
}
</script>
</body>
</html>
运行:
该属性不仅可以赋值文本,还可以赋值一个html片段。
innerText
通过element.innerText属性可以设置和修改一个元素及其子元素的文本内容。
// 读操作
var renderedText = HTMLElement.innerText;
// 写操作
HTMLElement.innerText = string;
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取 div 内部内容
console.log(div.innerText);
// 修改 div 内部内容, 界面上就会同步修改
div.innerText = 'hello js <span>hello js</span>';
</script>
通过上面的代码可知,innerText属性无法获取到div内部 html代码片段,只能得到文本内容。
实战案例:实现网页计数器
通过html,css,js目前掌握的知识,我们可以做一个小练习,实现一个简单的计数器,类似的按键功能可以重复添加,所以这里尽量简化,以加减举个例子。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
<!-- 先清除浏览器默认样式 -->
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*设置父元素的样式:长度,宽度,背景色*/
.parent {
width: 500px;
height: 300px;
background-color: gray;
/*水平位置居中*/
margin: 0 auto;
}
/*子元素screen的样式*/
.parent .screen{
width: 200px;
height: 150px;
font-size: 30px;
line-height: 150px;
color:white;
margin: 0 auto;
/*位置居中*/
text-align: center;
}
.parent .ctrl{
width:360px;
height:150px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
/*按钮样式*/
.parent .ctrl button{
width: 100px;
height: 50px;
font-size: 20px;
line-height: 20px;
text-align: center;
border-radius: 10px;
/*去掉自带的黑色边框*/
border:none;
}
.parent .ctrl button:active{
color:white;
background-color: blue;
}
</style>
<body>
<div class="parent">
<!--通过screen来显示数字-->
<div class="screen">0</div>
<div class="ctrl">
<!-- 子元素按钮-->
<button id="plusButton">+</button>
<button id="zeroButton">清零</button>
<button id="minusButton">-</button>
</div>
</div>
<script>
// 按钮监听事件
let plusButton=document.querySelector('#plusButton');
plusButton.onclick=function(){
//1.选中screen 元素
let screen=document.querySelector('.screen');
//2. 取出其中的元素
let content=screen.innerHTML;
//3.将内容+1
let result=parseInt(content)+1;
//4.重新写入内容
screen.innerHTML=result;
}
let minusButton=document.querySelector('#minusButton');
minusButton.onclick=function() {
//1.选中screen 元素
let screen = document.querySelector('.screen');
//2. 取出其中的元素
let content = screen.innerHTML;
//3.将内容-1
let result = parseInt(content) - 1;
//4.重新写入内容
screen.innerHTML = result;
}
let zeroButton=document.querySelector('#zeroButton');
zeroButton.onclick=function() {
//1.选中screen 元素
let screen = document.querySelector('.screen');
//2. 取出其中的元素
let content = screen.innerHTML;
//3.将内容-1
let result = parseInt(content) *0;
//4.重新写入内容
screen.innerHTML = result;
}
</script>
</body>
</html>
效果如下: