JavaScript之WebAPI

新鲜出炉，前端三剑客到今天就介绍结束啦~

1.什么是WebAPI

2.DOMAPI

1.什么是WebAPI

前面学习的 JS 分成三个大的部分：ECMAScript: 基础语法部分；DOM API: 操作页面结构；BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM.

2.DOMAPI

①什么是DOM？9

DOM 全称为 Document Object Model（文档指的是界面显示的部分，对象指的是js中代码操作的部分，通过这两个配合使界面产生改变）

DOMAPI是js提供给浏览器的一组用来操作页面元素的API。主要是进行以下三个部分元素的操作。

a.获取元素（.querySelector/querySelectorAll）

b.事件处理（.onclick）

c.操作元素内容（.innerHTML）

②什么是DOM树？

一个页面的结构是一个树形结构 , 称为 DOM 树。类似于我们前面学的文件的存储路径，也可以通俗地说成家谱。下面我们列出一个页面结构的DOM树的结构，便于理解。

在这里面，仍然有几个概念需要我们进一步重视：

a.文档：一个页面就是一个文档，用document来进行表示。

b.元素：页面中的所有标签都可以被称为元素，用element来进行表示。

c. 节点：网页中的所有内容都可以称为节点（标签节点，注释节点，文本节点），用node来进行表示。

2.1获取元素

①什么是获取元素：

这部分工作类似于 CSS 选择器的功能。要想操作页面上的元素，就需要先拿到对应的js对象。

②怎么获取元素呢？（这里只介绍下面这两种相对重要的API）

我们常使用querySelector/querySelectorAll来实现。这两个元素其实是一个document这样的对象的属性。（当一个页面加载好之后，就会自动生成一个全局变量，叫做document），在这里面就会有一些属性和方法，通过这些属性和方法来操作页面的内容

③演示querySelector:(核心代码如下)
	<div class="one">
		hello
	div>
	<div id="two">
		hello1
	div>
	<ul>
		<li>aaali>
	ul>
   <script>
	   //基于选择器选择元素，方便进行后续的操作。而这里querySelector的参数，就是一个css的选择器（id选择器，类选择器等等）
	   //这个变量名是任意的，只不过对象中填写的值要以div中的为主
	   let obj=document.querySelector('.one');
	   let syb=document.querySelector('#two');
       let div=document.querySelector("ul li");
	   //类选择器
	   console.log(obj);
	   //id选择器
	   console.log(syb);
	   //后代选择器
	   console.log(div);
   script>
注意！！！

当querySelector的参数的选择器，匹配到了多个元素的时候，这个时候返回的对象是匹配的第一个元素，演示如下：

要是，我们想所有的元素都被选中，那么我们就应该用querySelectorAll。

④演示querySelectorAll:(核心代码如下)
body>
	<ul>
		<li>aaali>
		<li>bbbli>
	ul>
   <script>
	   //基于选择器选择元素，方便进行后续的操作。而这里querySelector的参数，就是一个css的选择器（id选择器，类选择器等等）
	   //这个变量名是任意的，只不过对象中填写的值要以div中的为主
       let div=document.querySelectorAll("ul li");
	   //后代选择器
	   console.log(div);
   script>
显示结果如下：

这个时候，是以数组的方式对结果进行呈现。但是准确地来说，它返回的不是一个真正意义上的原生数组，而是一个对象，只不过这个对象有length，也能够通过下标来访问内部元素。这样的对象使用起来和数组非常相似，我们称其为“伪数组”。

2.2事件初识

①什么是事件？

在js中，很多代码都是通过事件来实现的。事件就是浏览器对于用户的操作的一个统称（准确的说,事件也不一定全是用户操作产生的,但是大部分是的）。

通俗的举个例子，我们使用鼠标进行移动光标是一个事件，我们使用鼠标在页面的某个位置进行点击，也是一个事件等待。其中js主要的工作就是在不同的事件中进行不同的处理。

②事件的三要素：

a.事件源：哪个HTML产生的元素

b.事件类型：鼠标移动，鼠标点击，窗口大小切换

c.事件处理程序：当事件产生和，执行样的js怎代码

③举个典型例子（点击事件）

换一种写法：（核心代码）
	
	
	<button onclick="f()">请按按钮button>
   <script>
	  let cell=document.querySelector('button');
	//   事件类型：onclick 表明这是一个点击事件
	   function f(){
		   alert('hello');
	   }
   script>
但在实际上，我们更建议使用第一种写法。这种写法使得页面更加整洁。

2.3操作元素

①操作元素的含义：

操作元素中，操作=获取+修改

②操作的形式：

a.操作元素内容：

通过对象里面的一个属性，innnerHTML来实现（也就是获取到元素中的代码是怎样的）

但是当我们不断按按钮时，会出现相同结果叠加的情况

那么，怎么才能使我们的结果不叠加呢？其实很简单，我们只需要对其进行基本的设置就OK。如下图所示：

刚刚我们操作的都是获取内容的按钮，下面我们写一下修改内容的核心代码：

案例一：修改原内容


<div id="screen">welcome to jsdiv>
<button id="one">获取内容的按钮button>
<button id="two">修改内容的按钮button>
   <script>
	   //首先要获取到这个获取内容的按钮
let btn=document.querySelector('#one');
//使它能够产生获取点击的事件类型
btn.onclick=function(){
	let screen=document.querySelector('#screen');
	//获取到div中的welcome to js的内容
    console.log(screen.innerHTML);
}
let btn2=document.querySelector('#two');
btn2.onclick=function(){
	let screen=document.querySelector('#screen');
	screen.innerHTML='这是修改后的内容';
}
   script>

案例二：实现plus操作（核心代码）


	<div id="screen">0div>
	<button id ="plus" >+button>
    <script>
        let plusBtn = document.querySelector("#plus");
        plusBtn.onclick = function () {
        //1.获取screen里面的值
            let screen = document.querySelector("#screen");
			//这个时候得到的类型是字符串类型，可以用typeof进行检测
            let val = screen.innerHTML;
			//因为是字符串类型，直接加的话只能够实现拼接，所以这个时候，我们先将它转化为数字类型
			val=parseInt(val);
        //2.将其＋1
            val += 1;
		//3.将这个值写回原来的位置
		screen.innerHTML=val;
	}
   script>

通过input标签来添加一个边框，来实现加的操作。（核心代码如下：）


	<input type="text" id="screen" value="0">
	<button id ="plus" >+button>
    <script>
        let plusBtn = document.querySelector("#plus");
        plusBtn.onclick = function () {
        //1.获取screen里面的值
            let screen = document.querySelector("#screen");
			//这个时候得到的类型是字符串类型，可以用typeof进行检测
            let val = screen.value;
			//因为是字符串类型，直接加的话只能够实现拼接，所以这个时候，我们先将它转化为数字类型
			val=parseInt(val);
        //2.将其＋1
            val += 1;
		//3.将这个值写回原来的位置
		screen.value=val;
	}
   script>
body>

b.操作元素的属性：

通过dom对象.属性名来进行操作。

案例一：（通过以下代码实现点击切换图片的效果）


	<img src="1.jpg">
    <script>
        let img = document.querySelector('img');
        img.onclick = function(){
                let s = img.src;
            if(s.indexOf('1.jpg') >= 0){//是否包含这个地址,与java中的indexOf的用法差不多
                img.src = '2.jpg';
            }else if(s.indexOf('2.jpg') >= 0){
                img.src = '1og.jpg';
            }    
        }
     script>
body>

下面我们介绍几个表单的专有属性。

value： input 的值.

disabled：禁用;

checked：复选框会使用;

selected：下拉框会使用;

type：input 的类型(文本, 密码, 按钮, 文件等);

案例二：切换按钮的显示文本


	<input type="button" value="播放">
    <script>
     let input=document.querySelector('input');
	 input.onclick=function(){
		 if(input.value=='播放'){
			 input.value='暂停';
		 }else if(input.value=='暂停'){
			 input.value='播放';
		 }
	 }
     script>
body>

注意：在input中选中元素是.value不是用.innerHTML

案例三：通过切换checked值来实现全选效果


<body>
	<input type="checkbox" id="all">all<br>
	<input type="checkbox"class='fruit'>apple<br>
	<input type="checkbox" class="fruit">watermelon<br>
	<input type="checkbox" class="fruit">grape<br>
	<input type="checkbox" class="fruit">strawberry<br>
    <script>
    //1.获取到元素
	let all=document.querySelector('#all');
	let fruits=document.querySelectorAll('.fruit');
	//2.给all注册点击事件
	all.onclick=function(){
		for(let i=0;ilength;i++){
			//通过控制当all选择时全选择
			fruits[i].checked=all.checked;
		}
	}
	//3.对每个水果注册点击事件，实现对all的取消
	for(let i=0;ilength;i++){
		fruits[i].onclick=function(){
			all.checked=checkFruits(fruits);
		}
	}
	function checkFruits(fruits){
		//判定是不是所有都被选中
		for(let i=0;ilength;i++){
			if(!fruits[i].checked){
				return '';
			}
		}
		//均选中
		return 'checked';
	}
     script>
body>

结果展示：

c.操作元素的样式：

本质上也是操作元素的属性。我们这里有两个操作。注意：css中一般不用驼峰，而js通常用驼峰，css中的-转换成下个字母的驼峰。

案例一：点击字体放大

一个是style对应行内样式（直接把样式写到style里面）


<div style="font-size:20px">这是个文本div>
    <script>
   let div=document.querySelector('div');
   div.onclick=function(){
	   //1.获取字体的大小
	   console.log(div.style.fontSize);
	   //2.在当前字体大小的基础上，多增加5px
	   //①将字符串类型转化为数字类型，才可以进行加减
	   let fontSize=parseInt(div.style.fontSize);
	   fontSize+=5
	   //打印出来，别忘了添加单位，修改CSS属性值时，单位不合适会被当做无效值来处理
	   div.style.fontSize=fontSize+'px';
   }
     script>

案例二：实现一个夜间模式

第二个是className/classList对应内部样式/外部样式。应用了一个/一组css类名。

在HTML中,表示类名的属性就是class,但是在JS里,属性名变成了className/classList为啥不直接使用class这个名字？class在js中也是一个关键字。

对于修改样式较多的来说，通过style进行修改就显得非常麻烦，所以我们可以直接借助CSS类来修改，把要修改的属性放在一个类里。

核心代码如下;


 
    <style>
        div{
            height: 300px;
            width: 500px;
        }
        .light{
            
            background-color: #fff;
            color: black;
        }
        .dark{
            
            background-color: black;
            color: #fff;
        }
    style>
    <div class="light">一段文字div>
    <button id="btn">关灯button>
    <script>
        // 夜间模式:
        let div = document.querySelector('.light');
        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            if(div.className == 'light'){//通过class来切换样式
                div.className = 'dark';
                btn.innerHTML = '开灯';
            }else if(div.className == 'dark'){
                div.className = 'light';
                btn.innerHTML = '关灯';
            }
        }
     script>

得到的效果，如下所示：

2.4操作节点

对于节点的操作，实质上就是新增节点和删除节点。下面我们就对这两个操作进行详细的讲解。

①新增节点：

a.创建新节点:使用createElement来创建一个元素

b.把节点挂在dom树上:使用appendChild把节点插入到某个节点的子元素中

核心代码：


	<div class="container">
    div>
    <script>
        //1.创建新节点,createElement就可以创建一个新的元素
        let newDiv = document.createElement('div');
        newDiv.id = 'newDiv';
        newDiv.className = 'one';
        newDiv.innerHTML = 'hello';
        //2.把节点挂在dom树上  可以使用appendChild把节点插入到某个节点的子元素中
        let container = document.querySelector('.container');
//通过appendChild来插入
        container.appendChild(newDiv);
     script>

②删除节点：（通过removeChild来对节点进行删除）

先拿到父节点然后在拿到待删除的子节点就可以进行删除了

在上述新增节点的基础上来对节点进行删除，核心代码如下：


	<div class="container">
    div>
    <button id="btn">
        点击删除
    button>    
 <script>
        let newDiv = document.createElement('div');
        newDiv.id = 'newDiv';
        newDiv.className = 'one';
        newDiv.innerHTML = 'hello';
        let container = document.querySelector('.container');
        container.appendChild(newDiv);//这样就可以插入元素了
        //通过removeChild就可以进行删除了
        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            container.removeChild(newDiv);
        }
     script>

3.两个案例

这两个案例实际上是对间断性学习的一个总结。

3.1猜数字案例

核心代码如下：需要注意的地方都写在代码中啦


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字小游戏title>
head>
<body>
<button id="resetBtn">重新开始游戏button><br>
<span>要猜的数字: span>
<input type="text">
<button id="guessBtn">猜button><br>
<span>结果: span><span id="result">span><br>
<span>已经猜的次数: span><span id="guessCount">0span>
 
<script>
    //1.拿到上面需要用的元素
    let resetBtn = document.querySelector('#resetBtn');
    let input = document.querySelector('input');
    let guessBtn = document.querySelector('#guessBtn');
    let resultSpan = document.querySelector('#result');
    let guessCountSpan = document.querySelector('#guessCount');
 
    // 2. 生成一个 1-100 的随机整数.
	//因为随机生成的是0-1之间的小数，所以*100是使其扩大100倍成为0-100间的数
	//而floor方法是将小数部分舍去，使其成为整数
    let toGuess = Math.floor(Math.random() * 100) + 1;
    console.log(toGuess);
 
  //3.猜按钮的逻辑
    guessBtn.onclick = function() {
        //①读取input中的内容，将字符串类型转为整数类型
        if (input.value == '') {//如果为空，则不转
            return;
        }
        let curNum = parseInt(input.value);
        //  ②判断已猜数值和实际数值的大小
        if (curNum < toGuess) {
            resultSpan.innerHTML = '猜小了哦'
            resultSpan.style.color = 'red';
        } else if (curNum > toGuess) {
            resultSpan.innerHTML = '猜大了哦';
            resultSpan.style.color = 'red';
        } else {
            resultSpan.innerHTML = '恭喜你，猜对啦!';
            resultSpan.style.color = 'green';
        }
        // 4. 更新猜的次数.
        let guessCount = parseInt(guessCountSpan.innerHTML);
        guessCountSpan.innerHTML = guessCount + 1;
    }
 
    // 5. 开始新游戏的操作
    resetBtn.onclick = function() {
        // 让页面刷新即可~
        // location 是和 document 并列关系的对象.
        // location 用来控制页面的链接/地址. 通过 reload 操作就可以刷新页面.
        location.reload();
    }
script>   
body>
html>

输出结果展示：

3.2表白墙案例


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表白墙title>
head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 100%;
			background-color: darksalmon;
			height: 700px;
        }
        h1{
            text-align: center;
            padding: 20px 0;
        }
        p{
            text-align: center;
            color: #999999;
            padding: 10px 0;
        }
        .row{
            width: 400px;
            height: 50px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
            width: 70px;
			height: 20px;
        }
        .row input{
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-indent: 0.5em;
            /* 去掉输入框的轮廓线 */
            outline: none;
        }
        .row #submit{
            width: 200px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            margin: 0 auto;
 
            color: white;
            background-color: orange;
            /* 去掉边框 */
            border: none;
            border-radius: 10px;
        }
 
        .row #submit:active{
            background-color: gray;
        }
 
    style>
    <div class="container">
        <h1>表白墙h1>
        <p>输入后点击提交, 会将信息显示在表格中p>
        <div class="row">
            <span>表白者: span>
            <input type="text">
        div>
        <div class="row">
            <span>被表白者: span>
            <input type="text">
        div>
        <div class="row">
            <span>表白内容: span>
            <input type="text">
        div>
        <div class="row">
            <button id="submit">提交button>
        div>
    div>
 
    <script>
        //当用户点击按钮，就会获取到input里面的内容，并把页面
        let submitBtn = document.querySelector("#submit");
        submitBtn.onclick = function () {
            //获取到input里面的内容
            let inputs = document.querySelectorAll("input");
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from == '' || to == '' || msg == ''){
                return;
            }
            let div = document.createElement("div");
            div.innerHTML = from + "对" + to + "说:" + msg;
            div.className = 'row';
            let container = document.querySelector(".container");
            container.appendChild(div);
            //清空之前输入框的内容
            for(let i = 0;i < inputs.length;i++){
                inputs[i].value = '';
            }
        }
    script>
body>
html>

效果展示图如下：

本节内容就到这里啦，今天涉及的案例都是仅有前端内容构成~

相关阅读:
【面试题精讲】Java超过long类型的数据如何表示
 潇洒郎： Airtest之Android终端自动化测试
 web前端开发实例教程：从基础到进阶的全方位探索
 Linux查看日志文件的常用命令
 Linux_基础指令（一）
在LEAP系统中，如果我想预测中国天然气需求，除了考虑人口、城镇化率、GDP等五个因素还需要考虑其他因素吗？
猫头虎博主第5️⃣期赠书活动:《Java官方编程手册（第12版·Java 17）套装上下册》
操作系统知识回顾（更新中，自用）
[附源码]java毕业设计科院垃圾分类系统
 华为c语言编程规范
原文地址：https://blog.csdn.net/weixin_58850105/article/details/125891084