JavaScript WebAPI 实战

短命女 2024-03-17 11:06 39阅读 0赞

## ![de2226ed110d426e8e11643afa32e37c.gif][] ##

>  *  **博主简介：想进大厂的打工人**
>  *  **博主主页：**[@xyk:][xyk]
>  *  **所属专栏: [JavaEE初阶][JavaEE]**

本篇文章为大家带来JavaScript WebAPI的使用，请各位过目~~

--------------------

**目录**

文章目录

一、什么是JavaScript WebAPI

1.1 什么是DOM

二、常用的DOM API

2.1 获取元素

2.2 什么是事件

2.2.1 获取/修改元素

三、简单的代码示例

3.1 计数器

3.2 全选/取消全选按钮

3.3 点击图片切换

3.4 点击文字放大

3.5 实现夜间/日间模式的切换

四、操作页面节点

4.1 新增节点

4.2 删除节点

五、综合案例

5.1 猜数字

5.2 表白墙

--------------------

## 一、什么是JavaScript WebAPI ##

前面学习的 JS 分成三个大的部分

*  ECMAScript: 基础语法部分
 *  DOM API: 操作页面结构
 *  BOM API: 操作浏览器

WebAPI 就包含了 **DOM + BOM.**  
这个是 W3C 组织规定的.

### 1.1 什么是DOM ###

DOM 全称为 Document Object Model，页面文档对象模型，html中的每个标签都是可以映射到JS中的一个对象中的, 标签中的内容都可以通过JS对象感知到, JS对象修改对应的属性能够影响到标签的展示, 通过这样的DOM API就可以让JS代码来操作页面元素.

一个页面的结构是一个树形结构, 称为 DOM 树：  
![e2544e224647463b8f8b0a2df4e5e239.png][]

## 二、常用的DOM API ##

### 2.1 获取元素 ###

这部分工作类似于 CSS 选择器的功能.任何一个页面都有一个document对象，其中document对象中的**`querySelector`和`querySelectorAll`**函数可以用来选择元素, 通过传入CSS选择器来达到目的, 选择的范围是位于该函数之前所存在的选择器, 没找到返回值为`null`.

var element = document.querySelector(selectors);

var element = document.querySelectorAll(selectors);

document相当于整个页面的对象，通过它可以使用一些方法获取HTML元素

<div class="box">abc</div>
    <div id="id">def</div>
    <h3><span><input type="text"></span></h3>
    <script>
    var elem1 = document.querySelector('.box');
    console.log(elem1);
    var elem2 = document.querySelector('#id');
    console.log(elem2);
    var elem3 = document.querySelector('h3 span input');
    console.log(elem3);
    </script>

![d19edc2d9b3149d3a95c04d42e2fcb3d.png][]

如果想把符合选择的元素都选中就需要使用`querySelectorAll`函数了, 在使用上和和querySelector 是一样的.

<div class="box">abc</div>
    <div id="id">def</div>
    <script>
    var elems = document.querySelectorAll('div');
    console.log(elems);
    </script>

![8fe272bf18af4b47a65f35358b51dd8c.png][]

### 2.2 什么是事件 ###

> JS 要构建动态页面, 就需要感知到用户的行为.  
> 用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作.

事件的三要素:

1.  事件源, 哪个HTML元素产生的事件.
2.  事件类型, 比如鼠标点击, 鼠标移动, 键盘输入等.
3.  事件处理程序, 当事件发生之后, 要执行哪个代码.

代码示例：

<button id="btn">点我一下</button>
    <script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
    alert("hello world");
    }
    </script>

![8c5339f89a9649e085cbd9aca2384bdd.png][]

>  *  btn 按钮就是事件源.
>  *  点击就是事件类型
>  *  function 这个匿名函数就是事件处理程序
>  *  其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件

#### 2.2.1 获取/修改元素 ####

在选中元素后, 就可以使用`innerHTML`属性来获取/修改一个标签里面的内容了.

<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>

![d41410be095b435a9e1ceffc516dd564.png][]

可见，**`innerText`**只能获取文本内容, 并不能获取html结构，通过**`innerHTML`**是可以获取到div内部的html结构的，会将div标签中的html代码也获取到.

那么可以通过innerHTML来显示写入的HTML标签， innerHTML用的场景是要比innerText更多的.

<div>
    <span>hello world</span>
    <span>hello world</span>
    </div>
    <script>
    var div = document.querySelector('div');
    // 读取页面内容
    console.log(div.innerHTML);
    // 修改页面内容
    div.innerHTML = '<span>hello js</span>'
    </script>

![aeb9a1c73add430a8a71b399a276548a.png][]

修改元素也是一样的~

<div>
        <span>hello world</span>
        <span>hello world</span>
    </div>
    <button class="but">点一下试试</button>
    <script>
        let but = document.querySelector('.but');
        but.onclick = function () {
            let div = document.querySelector('div');
            div.innerHTML = '<h1>这是一个一级标题</h1>>';
            console.log(div.innerHTML)
        }
    </script>

![432a44907567415080ad6f47c09c6ce0.png][]

## 三、简单的代码示例 ##

### 3.1 计数器 ###

<div id='count'>0</div>
    <button id='countAdd'>计数器:点击+1</button>
    <script>
        let counterAdd = document.querySelector('#countAdd');
        counterAdd.onclick = function () {
        let num = document.querySelector('#count');
        let num1 = parseInt(num.innerHTML);
        console.log(num1);
        num1++;
        num.innerHTML = num1;
        };
    </script>

![e19d990d3ff94186ac9b906936aca3e8.png][]

> 这个代码要注意的是, num.innerHTML这里拿到的元素内容是字符串类型的, 直接进行加法运算就是字符串拼接的效果了, 而要完成算数相加的效果就需要将字符串转换为整数, 和Java中类似, 可以使用parseInt方法将字符串转换为整数, 而如果是浮点数就使用parseFloat方法

### 3.2 全选/取消全选按钮 ###

<input type="checkbox" id="all">我全都要 <br>
    <input type="checkbox" class="girl">貂蝉 <br>
    <input type="checkbox" class="girl">小乔 <br>
    <input type="checkbox" class="girl">安琪拉 <br>
    <input type="checkbox" class="girl">妲己 <br>
    <script>
        // 1. 获取到元素
        var all = document.querySelector('#all');
        var girls = document.querySelectorAll('.girl');
        // 2. 给 all 注册点击事件, 选中/取消所有选项
        all.onclick = function () {
        for (var i = 0; i < girls.length; i++) {
        girls[i].checked = all.checked;
        }
    }
        // 3. 给 girl 注册点击事件
        for (var i = 0; i < girls.length; i++) {
        girls[i].onclick = function () {
        // 检测当前是不是所有的 girl 都被选中了.
        all.checked = checkGirls(girls);
        }
    }
        // 4. 实现 checkGirls
        function checkGirls(girls) {
        for (var i = 0; i < girls.length; i++) {
        if (!girls[i].checked) {
        // 只要一个 girl 没被选中, 就认为结果是 false(找到了反例)
        return false;
        }
    }
        // 所有 girl 中都没找到反例, 结果就是全选中
        return true;
    }
    </script>

![5f78583dc8974e66b01ad699c0857879.png][]

> 1.点击全选按钮, 则选中所有选项  
> 2. 只要某个选项取消, 则自动取消全选按钮的勾选状态

### 3.3 点击图片切换 ###

我们还可以在代码中使用DOM直接获取元素的属性并修改元素的属性, 比如这里实现一个效果, 就是点击一个图片就可以切换到另一张图片, 然后再点击就能再切换回来, 这个案例我们只需要设置点击事件为修改图片的路径即可, 也就是修改`src`属性.

![a04cb94afa024774911793fe67b334bd.png][]

![2f4d3636105a45b384db2fec4129e29f.png][]

### 3.4 点击文字放大 ###

CSS 中指定给元素的属性, 都可以通过 JS 来修改.  
行内样式操作：

element.style.[属性名] = [属性值];
    element.style.cssText = [属性名+属性值];

<div style="font-size:20px;">
        这是一段文本,点击之后字体放大
    </div>
    <script>
        let div = document.querySelector("div");
        div.onclick = function() {
            //1.获取文字大小属性
            let size = parseInt(div.style.fontSize);
            console.log("修改前" + size);
            //2.修改文字大小
            size += 5;
            //3.写回到属性
            div.style.fontSize = size + "px";
            console.log("修改后" + size);
        }
    </script>

![e56948412f0844edaf18452cf5c8fc3d.png][]

### 3.5 实现夜间/日间模式的切换 ###

实现点击界面, 切换日间模式和夜间模式

<div class="container light">
            这是一大段话. <br>
            这是一大段话. <br>
            这是一大段话. <br>
            这是一大段话. <br>
        </div>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            .container {
                width: 100%;
                height: 100%;
        
            }
            .light {
                background-color: #f3f3f3;
                color: #333;
            }
            .dark {
                background-color: #333;
                color: #f3f3f3;
            }
        </style>
        <script>
            let div = document.querySelector('div');
            div.onclick = function () {
                console.log(div.className);
                if (div.className.indexOf('light') != -1) {
                    div.className = 'container dark';
                } else {
                    div.className = 'container light';
                }
            }
        </script>

![7d64fcbc315e48a5832e99413ee4fd2d.png][]

## 四、操作页面节点 ##

述涉及的操作都是针对页面已有的元素进行操作的, 利用DOM API还可以完成添加/删除元素的操作.

### 4.1 新增节点 ###

添加元素主要有两个步骤, 首先需要创建一个新的创建元素节点, 然后把这个元素节点插入到父元素中就能完成元素的的添加(依赖于DOM树).

###  ###

可以使用**`creatElement`**方法来创建一个新的元素:

let element = document.createElement('元素标签名');

插入到DOM树中:

父元素.appendChild(创建的子元素);

代码示例：

<div class="container">
    </div>
    <script>
    var div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
    div.innerHTML = 'hehe';
    var container = document.querySelector('.container');
    container.appendChild(div);
    </script>

![6133387a957f4c269f55fd9f4f2e5288.png][]

### 4.2 删除节点 ###

父元素.removeChild(需要删除的子元素);

## 五、综合案例 ##

### 5.1 猜数字 ###

**查看mdn文档：**

![a253cb8f4ceb4da2a39a61782fe3bc4e.png][]

生成一个1到10的随机数，利用**`Math.random()`**函数来获取随机数, 该函数生成随机数的范围是**`[0,1)`**区间内的一个小数, 我们需要的是**`[1,10]`**之间的整数, 我们可以乘上`10`后再拿到整数部分`+1`就能得到目标区间的数了.

<div>
            <h2>猜数字游戏</h2>
            玩家输入一个 1-10 数字：<input id="input_num" type="text"><p></p>
            <input type="button" value=" 查看结果 " onclick="selectResult()">
            <div id="result_div">
    
            </div>
        </div>
    
        <script>
            // 原生js猜数字游戏
           function selectResult(){
            // 产生随机数 1-10
            var randomNum = 1+Math.floor(Math.random()*10);
            var userInputNum = document.getElementById("input_num").value;
            var msg;
            if(randomNum==userInputNum){
                msg="<h4>恭喜：猜对了</h4>"
            }else{
                msg="<h4>抱歉：猜错了，正确的数字是："+randomNum+"</h4>";
            }
            document.getElementById("result_div").innerHTML = msg;
           }
        </script>

![7e98e51c942e4a8ba123d42ae03ca626.png][]

### 5.2 表白墙 ###

目标页面如下, 点击提交, 能够把用户输入的话, 显示在页面中, 点击撤销, 能够撤回最后一条显示在页面的话.

![1344af61f34845a2a854ed5a77b96fe7.png][]

代码示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表白墙</title>
        <style>
            * {
                /* 消除浏览器的默认样式 */
                margin: 0;
                padding: 0;
                /* 保证盒子不被撑大 */
                box-sizing: border-box;
            }
    
            .container {
                width: 600px;
                margin: 20px auto;
            }
    
            h1 {
                text-align: center;
            }
    
            p {
                text-align: center;
                color: #666;
                margin: 20px 0;
            }
    
            .row {
                /* 开启弹性布局 */
                display: flex;
                height: 40px;
                /* 水平方向居中 */
                justify-content: center;
                /* 垂直方向居中 */
                align-items: center;
            }
    
            .row span {
                width: 80px;
            }
    
            .row input {
                width: 200px;
                height: 30px;
            }
    
            .row button {
                width: 280px;
                height: 30px;
                color: white;
                background-color: orange;
                /* 去掉边框 */
                border: none;
                border-radius: 5px;
            }
    
            /* 点击的时候有个反馈 */
            .row button:active {
                background-color: grey;
            }
            .message{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <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 class="row">
                <button id="revert">撤销</button>
            </div>
          
        </div>
    
        <script>
            // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示.
            // 点击的时候, 获取到三个输入框中的文本内容
            // 创建一个新的 div.row 把内容构造到这个 div 中即可.
            let containerDiv = document.querySelector('.container');
            let inputs = document.querySelectorAll('input');
            let button = document.querySelector('#submit');
            button.onclick = function() {
                // 1. 获取到三个输入框的内容
                let from = inputs[0].value;
                let to = inputs[1].value;
                let msg = inputs[2].value;
                if (from == '' || to == '' || msg == '') {
                    return;
                }
                // 2. 构造新 div
                let rowDiv = document.createElement('div');
                rowDiv.className = 'message';
                rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
                containerDiv.appendChild(rowDiv);
                // 3. 清空之前的输入框内容
                for (let input of inputs) {
                    input.value = '';
                }
            }
            let revertButton = document.querySelector('#revert');
            revertButton.onclick = function() {
                // 删除最后一条消息.
                // 选中所有的 row, 找出最后一个 row, 然后进行删除
                let rows = document.querySelectorAll('.message');
                if (rows == null || rows.length == 0) {
                    return;
                }
                containerDiv.removeChild(rows[rows.length - 1]);
            }
        </script>
    </body>
    </html>

效果展示：

![2fcd2b58581847f98c4069fe5218d363.png][]

[de2226ed110d426e8e11643afa32e37c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/7aac2cc57a23430598dfa61f07da7a5c.png
[xyk]: https://blog.csdn.net/asad21654864?spm=1000.2115.3001.5343
[JavaEE]: https://blog.csdn.net/asad21654864/category_12243955.html?spm=1001.2014.3001.5482
[e2544e224647463b8f8b0a2df4e5e239.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/f96b259c476147ce8abf13ab399527ea.png
[d19edc2d9b3149d3a95c04d42e2fcb3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/42452069753b40c4a7c809fcb366a196.png
[8fe272bf18af4b47a65f35358b51dd8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/28166efcea514e8eb04577fdca627cb8.png
[8c5339f89a9649e085cbd9aca2384bdd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/ee177e5dd5fb484594a85a52e1acf47e.png
[d41410be095b435a9e1ceffc516dd564.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/088fe61bb56244af865e4707aa67d4b2.png
[aeb9a1c73add430a8a71b399a276548a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/7e3d4002717f43299ad54beb0218891d.png
[432a44907567415080ad6f47c09c6ce0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/cebbce310f854ab89bb7b4f90a7446af.png
[e19d990d3ff94186ac9b906936aca3e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/c842c6c266ac481c846650c91b69c024.png
[5f78583dc8974e66b01ad699c0857879.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/046d74a9f7a640f9856158d232431986.png
[a04cb94afa024774911793fe67b334bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/b8a41202307e469bb10f9eaaaaaf748f.png
[2f4d3636105a45b384db2fec4129e29f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/f8fb27c54fb548e3bb23b0858b27b705.png
[e56948412f0844edaf18452cf5c8fc3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/5d640b5c3bf04cbab322ab7f01b5e8d1.png
[7d64fcbc315e48a5832e99413ee4fd2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/7cc24fb9dcf44631b3287bc6dbe2fc82.png
[6133387a957f4c269f55fd9f4f2e5288.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/ea845e2dc61c4929b72590e955172677.png
[a253cb8f4ceb4da2a39a61782fe3bc4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/16e04b5916e14c49bb5c929af41e1052.png
[7e98e51c942e4a8ba123d42ae03ca626.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/dbb334cf06534bc381e31f5413db8f5c.png
[1344af61f34845a2a854ed5a77b96fe7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/8ca3cd4da57a4cb19f64f774e63777ff.png
[2fcd2b58581847f98c4069fe5218d363.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/761a5c5ecce44f958d9e512713cbd6b6.png