JavaScript(WebAPI)

本是古典何须时尚 2023-09-27 16:05 114阅读 0赞

![在这里插入图片描述][9d1ab2e17c944369b2438df2afee621a.gif_pic_center]

#### 文章目录 ####

*  一、WebAPI是什么？
 *  二、DOM基本概念
 *   *  DOM树
     *  选中页面元素
 *  三、事件
 *   *  操作元素
 *  四、操作节点
 *   *  新增元素
     *  删除元素
 *  五、猜数字
 *  六、表白墙

## 一、WebAPI是什么？ ##

我们前面刚刚学习过JS语法，我们可以把JS分为三大部分：  
ECMAScript：基础语法  
DOM API：操作页面结构  
BOM API：操作浏览器

Web API 包含了 DOM + BOM，Web API都是浏览器给js代码提供的功能(如果浏览器不同，api所呈现的行为也可能有所差异)

## 二、DOM基本概念 ##

DOM(Document Object Model)：文档对象模型，这里文档指的是html，对象指的是js中的对象，我们可以把html的每个标签都可以映射到js中的每一个对应的对象，js对象修改对应的属性，就可以影响标签的展示

### DOM树 ###

一个网页页面的结构是一个树型结构，我们也成为DOM树，结构如下：

![在这里插入图片描述][8a9d9d18da03463db3b8b7c6399df5bd.png]  
文档：一个页面就是一个文档，使用document表示  
元素：网页中的所有标签都成为元素，使用element表示  
节点：网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node表示.  
这些概念在JS代码中对应一个个对象

### 选中页面元素 ###

这个工作类似于我们CSS选择器的功能  
**querySelector** 能够复用我们CSS选择器，快捷准确的获取到元素对象

let element = document.querySelector(CSS选择器);

我们来初体验一下querySelector，首先我们准备一个html文件

![在这里插入图片描述][77dd89432b854ad7aff9c0c9b8fa1ede.png]  
大家需要注意：我们在使用querySelector的使用并不是直接使用querySelector，而是使用document调用querySelector，document是浏览器中的全局对象，任何一个页面都会有一个document对象

![在这里插入图片描述][6dfe9cada1194de4b3fd525678f90005.png]  
如果我们有多个.a那么我们默认选中的是第一个，如果想都选，需要使用querySelectorAll(返回一个数组)  
![在这里插入图片描述][f5d59fc5ca204324ba0880876ccf35df.png]  
这里针对不同的选择器选择的方式不同  
![在这里插入图片描述][225983d0b5604adebb9963115460617e.png]

## 三、事件 ##

事件就是针对用户的操作进行的一些相应  
时间三要素：  
事件源：那个元素触发的  
事件类型：选中，点击，键盘按下，修改等  
事件处理：事件发生之后要执行那个代码

最简单的一个方式：

![在这里插入图片描述][28babc1a525d4963ae5b9de6b53c40c4.png]  
直接在元素中使用onXXX的方法来绑定一个事件处理程序

![在这里插入图片描述][be1518e760334b3cacddd195e26a0ff7.png]  
我们的这里的function匿名函数相当于一个回调函数，不需要我们程序员自己调用，而是浏览器在触发事件时进行调用

### 操作元素 ###

**1.获取/修改元素内容**  
首先获取到该元素，使用innerHTML属性拿到元素里的内容，修改该属性，就会影响到界面的显示

<div class="a">aaa</div>
        <script>
            let div = document.querySelector(".a");
            div.onclick = function() {
          
                div.innerHTML = div.innerHTML + 'a';
            }
        </script>

此处我们每点击一下，末尾就加a  
![在这里插入图片描述][deeff739028a4b6a94e82e3c18309d1f.png]  
**2.获取/修改元素属性**  
html的属性也会映射到js对象中

![0d751c6097f24937b90ae24b2bf7cb01.png][]

![在这里插入图片描述][25b2bac6577d49fc88ea4511be454415.png]  
![在这里插入图片描述][fab4ace77062403f8ac53e9c96fca84b.png]

console.dir(js对象);

打印Js对象所有属性  
**3.获取/修改表单元素属性**  
表单元素(input，textarea，select)这些特别的元素是普通的标签没有的

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>input的值</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>input的类型</td> 
  </tr> 
 </tbody> 
</table>

<input type="text">
        <button>点我一下</button>
        <script>
            let input = document.querySelector('input');
            let button = document.querySelector('button');
            button.onclick = function() {
          
                console.log(input.value);
            }
        </script>

输入框输入什么，我们在控制台打印什么  
![在这里插入图片描述][a182af1eb1214dcb91a53e0b0b6f688e.png]  
大家需注意innerHTML与这里的input.value的区别：  
innerHTML得到的是标签的内容(开始标签和结束标签中间夹着的内容)，input标签是单标签，是没有内容的  
我们来实现一个给input里的的数字，每按一次按钮，就给数字+1  
![在这里插入图片描述][a82b2fefd74f4c75913e92ec3b9f40e8.png]  
我们给Input内输入1，开始按按钮  
![在这里插入图片描述][1553bb14fa5249e09dc30b4a9cb19be0.png]  
![在这里插入图片描述][6a63fe263fad4cc7b5c9e6493475125f.png]  
我们发现并没有加1，因为我们value属性是一个字符串，我们这里变成字符串拼接了，我们这里需要把字符串转成整数(parseInt)

<input type="text">
        <button>点我一下</button>
        <script>
            let input = document.querySelector('input');
            let button = document.querySelector('button');
            button.onclick = function() {
          
                let value = parseInt(input.value);
                value += 1;
                input.value = value;
            }
        </script>

![在这里插入图片描述][618e4522aa634594a219f2e015621b83.png]  
此时就实现功能了  
我们的type属性可以实现显示和隐藏密码功能

<input type="password">
        <button>显示密码</button>
        <script>
            let input = document.querySelector('input');
            let button = document.querySelector('button');
            button.onclick = function() {
          
                if(input.type == 'text') {
          
                    input.type = 'password';
                    button.innerHTML = '显示密码';
                }else {
          
                    input.type = 'text';
                    button.innerHTML = '隐藏密码';
                }
            }
        </script>

![在这里插入图片描述][acc00e068470457997a934f0579e0c05.png]  
![在这里插入图片描述][36848e4922794c28895e12806109e097.png]  
**4.获取/修改样式属性**  
1.修改内联样式(修改style属性的值)

<div style="font-size: 20px;">
            点我放大
        </div>
        <script>
            let div = document.querySelector('div');
            div.onclick = function() {
          
                let size = parseInt(div.style.fontSize);
                size += 5;
                div.style.fontSize = size + 'px';
            }
        </script>

![在这里插入图片描述][e0426b02743b413da9cf6f817b3ca189.png]  
这里我们需要注意CSS与JS中字体大小属性是有所不同的，CSS是脊柱命名法，我们JS是驼峰命名法。

因为我们在CSS设置的字体大小单位为px，所以我们先转为Int，然后在转回px.

2.修改元素应用的CSS类名  
我们这里实现一个切换夜间模式，我们首先先准备两个模式

具体功能实现：

<div class = 'light'>切换夜间模式</div>
        <script>
            let div = document.querySelector('.light');
            div.onclick = function() {
          
                if(div.className == 'dark') {
          
                div.className = 'light';
                div.innerHTML = '切换夜间模式';
            }else {
          
                div.className = 'dark';
                div.innerHTML = '切换日间模式';
            }
            }
        </script>

![在这里插入图片描述][31dcb60959154a1ea863a096a31e0902.png]  
![在这里插入图片描述][33111b6790d64900ba96bb719b5f1e63.png]

## 四、操作节点 ##

### 新增元素 ###

新增节点一般分为两个步骤：  
1.创建元素节点  
2.把元素节点插入到DOM树中

使用 createElement 方法来创建一个元素

![在这里插入图片描述][f9f52740725448ad91dca9f797ebe751.png]  
使用appendChild 插入到DOM树中

<div class = 'a'>请输入:</div>
        <script>
            let input = document.createElement('input');
            input.type = 'text';
            input.value = 123456;
            console.log(input);
            let div = document.querySelector('.a');
            div.appendChild(input);
        </script>

![在这里插入图片描述][37f3a3c69484413cb062f43410940fbe.png]  
appendChild是默认插入在子元素末尾的，insertBefore可以将元素加到指定子元素的前面

### 删除元素 ###

使用 removeChild 删除子节点，我们将刚刚加入的input标签删除  
![在这里插入图片描述][9b7fdd701499415a929a93aedae81728.png]  
返回值为该被删除节点  
被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置.  
如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常.

## 五、猜数字 ##

我们实现一个网页版的猜数字  
1.生成一个1 - 100之间的随机数字  
2.用户输入一个数字  
3.判断用户输入的数字大小关系给出提示

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>猜数字</title>
    </head>
    <body>
        <div>请输入要猜的数字:</div>
        <input type="text" >
        <button>提交</button>
        
        <div class="result">
    
        </div>
        <script>
            //生成一个1 - 100之间的随机数
            let toGuess = parseInt(100 * Math.random()) + 1; 
            // 因为Math.rondom()生成的是[0,1)之间的随机数，我们需要进行转换
            console.log(toGuess);
    
            //进行猜数字操作
            let button = document.querySelector('button');
            let input = document.querySelector('input');
            let information = document.querySelector('.result');
            button.onclick = function() {
          
                //取出输入框内容
                if(input.value == '') {
          
                    return;
                }
                let inputNum = parseInt(input.value);
                if(inputNum < toGuess) {
          
                    information.innerHTML = '猜小了';
                }else if(inputNum > toGuess) {
          
                    information.innerHTML = '猜大了';
                }else {
          
                    information.innerHTML = '恭喜你，猜对了！';
                }
            }
        </script>
    </body>
    </html>

![在这里插入图片描述][89ec96e76a4c4786b00b4818cc3b0c25.png]  
![在这里插入图片描述][d54ee640af4c47c3a765788a56f9c723.png]  
![在这里插入图片描述][a555bb06790f49e2ba6e35bd6b3ab562.png]

## 六、表白墙 ##

![在这里插入图片描述][5edfa03d25414a64bb9a490232306bd7.png]  
这算什么表白墙，下面的才是我们要实现的  
![在这里插入图片描述][9938af19f9d14c7ca24b27743b5ecbfe.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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 auto;
            }
    
            .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: 3px;
            }
    
            .row button:active {
          
                background-color: black;
            }
        </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>提交</button>
            </div>
        </div>
    
        <script>
            // 实现将提交的内容呈现在页面显示
            let containerDiv = document.querySelector('.container');
            let inputs = document.querySelectorAll('input');
            let button = document.querySelector('button');
            button.onclick = function() {
          
                //分别获取三个输入框的内容
                let from = inputs[0].value;
                let to = inputs[1].value;
                let msg = inputs[2].value;
                //构建一个新的div
                let rowDiv = document.createElement('div');
                rowDiv.className = 'row';
                rowDiv.innerHTML = from + ' 对 ' + to + ' 说 ' + msg;
                containerDiv.appendChild(rowDiv);
                // 完成提交后 情况输入框内的内容
                for(let input of inputs) {
          
                    input.value = '';
                }
            }
        </script>
    </body>
    </html>

![在这里插入图片描述][ab4ca3d8d9004b0a82d2ef930defca7f.png]

![在这里插入图片描述][6dd55fb125314097a8dc552688518b8b.png]

[9d1ab2e17c944369b2438df2afee621a.gif_pic_center]: https://img-blog.csdnimg.cn/9d1ab2e17c944369b2438df2afee621a.gif#pic_center
[8a9d9d18da03463db3b8b7c6399df5bd.png]: https://img-blog.csdnimg.cn/8a9d9d18da03463db3b8b7c6399df5bd.png
[77dd89432b854ad7aff9c0c9b8fa1ede.png]: https://img-blog.csdnimg.cn/77dd89432b854ad7aff9c0c9b8fa1ede.png
[6dfe9cada1194de4b3fd525678f90005.png]: https://img-blog.csdnimg.cn/6dfe9cada1194de4b3fd525678f90005.png
[f5d59fc5ca204324ba0880876ccf35df.png]: https://img-blog.csdnimg.cn/f5d59fc5ca204324ba0880876ccf35df.png
[225983d0b5604adebb9963115460617e.png]: https://img-blog.csdnimg.cn/225983d0b5604adebb9963115460617e.png
[28babc1a525d4963ae5b9de6b53c40c4.png]: https://img-blog.csdnimg.cn/28babc1a525d4963ae5b9de6b53c40c4.png
[be1518e760334b3cacddd195e26a0ff7.png]: https://img-blog.csdnimg.cn/be1518e760334b3cacddd195e26a0ff7.png
[deeff739028a4b6a94e82e3c18309d1f.png]: https://img-blog.csdnimg.cn/deeff739028a4b6a94e82e3c18309d1f.png
[0d751c6097f24937b90ae24b2bf7cb01.png]: https://img-blog.csdnimg.cn/0d751c6097f24937b90ae24b2bf7cb01.png
[25b2bac6577d49fc88ea4511be454415.png]: https://img-blog.csdnimg.cn/25b2bac6577d49fc88ea4511be454415.png
[fab4ace77062403f8ac53e9c96fca84b.png]: https://img-blog.csdnimg.cn/fab4ace77062403f8ac53e9c96fca84b.png
[a182af1eb1214dcb91a53e0b0b6f688e.png]: https://img-blog.csdnimg.cn/a182af1eb1214dcb91a53e0b0b6f688e.png
[a82b2fefd74f4c75913e92ec3b9f40e8.png]: https://img-blog.csdnimg.cn/a82b2fefd74f4c75913e92ec3b9f40e8.png
[1553bb14fa5249e09dc30b4a9cb19be0.png]: https://img-blog.csdnimg.cn/1553bb14fa5249e09dc30b4a9cb19be0.png
[6a63fe263fad4cc7b5c9e6493475125f.png]: https://img-blog.csdnimg.cn/6a63fe263fad4cc7b5c9e6493475125f.png
[618e4522aa634594a219f2e015621b83.png]: https://img-blog.csdnimg.cn/618e4522aa634594a219f2e015621b83.png
[acc00e068470457997a934f0579e0c05.png]: https://img-blog.csdnimg.cn/acc00e068470457997a934f0579e0c05.png
[36848e4922794c28895e12806109e097.png]: https://img-blog.csdnimg.cn/36848e4922794c28895e12806109e097.png
[e0426b02743b413da9cf6f817b3ca189.png]: https://img-blog.csdnimg.cn/e0426b02743b413da9cf6f817b3ca189.png
[31dcb60959154a1ea863a096a31e0902.png]: https://img-blog.csdnimg.cn/31dcb60959154a1ea863a096a31e0902.png
[33111b6790d64900ba96bb719b5f1e63.png]: https://img-blog.csdnimg.cn/33111b6790d64900ba96bb719b5f1e63.png
[f9f52740725448ad91dca9f797ebe751.png]: https://img-blog.csdnimg.cn/f9f52740725448ad91dca9f797ebe751.png
[37f3a3c69484413cb062f43410940fbe.png]: https://img-blog.csdnimg.cn/37f3a3c69484413cb062f43410940fbe.png
[9b7fdd701499415a929a93aedae81728.png]: https://img-blog.csdnimg.cn/9b7fdd701499415a929a93aedae81728.png
[89ec96e76a4c4786b00b4818cc3b0c25.png]: https://img-blog.csdnimg.cn/89ec96e76a4c4786b00b4818cc3b0c25.png
[d54ee640af4c47c3a765788a56f9c723.png]: https://img-blog.csdnimg.cn/d54ee640af4c47c3a765788a56f9c723.png
[a555bb06790f49e2ba6e35bd6b3ab562.png]: https://img-blog.csdnimg.cn/a555bb06790f49e2ba6e35bd6b3ab562.png
[5edfa03d25414a64bb9a490232306bd7.png]: https://img-blog.csdnimg.cn/5edfa03d25414a64bb9a490232306bd7.png
[9938af19f9d14c7ca24b27743b5ecbfe.png]: https://img-blog.csdnimg.cn/9938af19f9d14c7ca24b27743b5ecbfe.png
[ab4ca3d8d9004b0a82d2ef930defca7f.png]: https://img-blog.csdnimg.cn/ab4ca3d8d9004b0a82d2ef930defca7f.png
[6dd55fb125314097a8dc552688518b8b.png]: https://img-blog.csdnimg.cn/6dd55fb125314097a8dc552688518b8b.png

JavaScript(WebAPI)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读