前端基础（Web API）

news2024/11/24 22:27:09

目录

前言

Web API

DOM 

基本概念

查找元素

document.getElementById

document.getElementsByClassName

document.evaluate() 

修改元素

添加元素

修改元素

复制元素

删除元素 

Event事件

事件创建

常用的事件

监听事件 

click事件

mouseover事件

事件绑定 addEventListener

事件解绑 removeEventListener

事件获取、事件冒泡、事件传播

Application Storage

window.sessionStorage方法

window.localStorage方法

演示代码

踩坑记录

删除用例

新增用例

学习成果展示

总结

前言

前面已经学习了HTML、CSS，现在可以写一个基本的网页（虽然样式丑），今天来学习如何操作网页上的元素，添加元素、删除元素，学习Web API的相关知识，包括元素的查找修改，事件监听，最后完善测试用例平台的代码，完善添加列表元素和删除元素的功能！

Web API

什么是Web API?

推荐阅读

HTML DOM Document 对象 (w3school.com.cn)

Web API 简介 - 学习 Web 开发 | MDN (mozilla.org)

Web API 强势入门指南 - Napoléon - 博客园 (cnblogs.com)

DOM 

基本概念

dom element node，是什么，推荐阅读下面的这这篇文章

DOM 精通了？请问 Node 和 Element 有何区别？ - 掘金 (juejin.cn)

查找元素

document.getElementById

getElementById返回一个元素，不需要通过下标再去找

document.getElementById("idName") 

document.getElementsByClassName

document.getElementsByClassName("className")

​​

​​ 

document.evaluate() 

​​ 

 ​​

​​

修改元素

添加元素

table里添加新的一行

let newline=document.createElement("tr")

let table=document.getElementsByTagName("table")[0]
table.appendChild(newline)

let mrjj=document.createElement("td")

mrjj.append("访问百度")

newline.appendChild(mrjj)

修改元素

mrjj2.outerHTML="<td>输入百度网址</td>"

复制元素

newline.append(mrjj.cloneNode(true))  （ js中，一个对象如果不是未定义，是可以转为true）

删除元素 

mrjj.remove()

​​

Event事件

事件创建

常用的事件

官方文档很详细，不再赘述

JavaScript 事件 (w3school.com.cn)

监听事件 

举两个例子，监听点击事件和鼠标悬浮事件

click事件

let mrjj_list=document.querySelector(".learn-link")

点击链接，页面不跳转：event.preventDefault()

mrjj_list.addEventListener("click",(event)=>{event.preventDefault();console.log("博客地址被点击了");})

mouseover事件

mrjj_list.addEventListener("mouseover",(event)=>{event.preventDefault();console.log("博客地址被点击了");})

事件绑定 addEventListener

事件解绑 removeEventListener

只有通过命名的方法才能解绑事件

let delBtn=document.getElementById("delete")

const delClick=(event)=>(console.log("通过命名过的方法被调用了",event))

delBtn.addEventListener("click",delClick)

delBtn.removeEventListener("click",delClick)

事件获取、事件冒泡、事件传播

这里有点绕，推荐阅读下面的这篇文章

简述 JavaScript 的事件捕获和事件冒泡 - 掘金 (juejin.cn) 

Application Storage

window.sessionStorage方法

window.sessionStorage方法，相当于会话存储，刷新页面，数据不会消失，关闭浏览器后，数据就消失了。

let wytest=console.log("mrjj")

window.sessionStorage.setItem("存储数据",JSON.stringify(wytest))

window.localStorage方法

window.localStorage方法，相当于本地存储，关闭浏览器再次打开，数据不会消失

window.localStorage.setItem("存储数据",JSON.stringify(wytest))

两种方式存储的位置

 sessionStorage

localStorage 

let datas=window.sessionStorage.getItem("存储数据")

datas

每次刷新页面时，已经存储的数据不会消失。

let datas=window.localStorage.getItem("存储数据")

datas

每次关闭浏览器再打开时已经存储的数据不会消失。

演示代码

上面的例子用到的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<header id="title">
    欢迎来到MRJJ_9的自动化测试平台
</header>
<body>
<div class="learn-website">
    <div id="learn-website-title">前端学习网站:</div>
    <a class="biglink" href="https://www.w3school.com.cn/html/index.asp">w3school.com</a>
    </br>
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">MDN 社区</a>
    </br>
    <a class="test01" href="https://www.csdn.net">CSDN社区</a>
    </br>
    本人博客：
    </br>
    <a href="https://blog.csdn.net/mrjj_9/category_12393537.html">前端学习博客</a>
</div>
<ul id="mrjj_list">
    <li><a class="learn-link" href="https://blog.csdn.net/mrjj_9/category_12393537.html">前端学习博客</a></li>
    <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">MDN 社区</a></li>

</ul>
<main>
    <div class="form" style="
    display: inline-block">
        <form>
            <h2 id="form-title">添加测试用例</h2>
            <label>
                用例名：
                <input type="text" placeholder="输入测试用例名称" name="caseName">
                步骤名：
                <input type="text" placeholder="输入测试步骤名称" name="stepName">
            </label>
            <div>请选择用例类型：
                <label>
                    <input type="radio" name="type" value="api">接口自动化
                </label>
                <label>
                    <input type="radio" name="type" value="ui">UI自动化
                    <br>
                </label>
            </div>
            <label>
                关键字：
            </label>
            <select name="value">
                <option value="value">打开浏览器</option>
                <option value="value">传入必传参数</option>
            </select>
            </br>
            <lable>参数1：<input type="text" name="param1"></lable>
            <lable>参数2：<input type="text" name="param2"></lable>
            <button id="add_case" onclick="let text=$x('//h2[@id=\'caseName\']')[0].innerText;console.log(text)">提交新增
            </button>
        </form>
    </div>
    <div calss="table" style="
    display: inline-block">
        <h2 id="caseName">测试用例</h2>
        <button class="add-case-button" @click="isEdit=true">
            新增用例
        </button>
        <table border="2">

            <col style="width: 100px; overflow: hidden; text-overflow: ellipsis"
            />
            <col style="width: 100px"/>
            <col style="width: 100px"/>
            <col style="width: 100px"/>
            <col style="width: 100px"/>
            <tr>
                <th id="mrjj">用例名</th>
                <th>步骤名</th>
                <th>关键字</th>
                <th>参数1</th>
                <th>参数2</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>参数正确登录成功</td>
                <td>输入正确的参数登录成功</td>
                <td>用户名 密码</td>
                <td>用户名</td>
                <td>密码</td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>参数错误登录失败</td>
                <td>输入错误的参数登录失败</td>
                <td>用户名 密码</td>
                <td>用户名</td>
                <td>密码</td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>参数为空登录失败</td>
                <td>输入的参数为空登录失败</td>
                <td>用户名 密码</td>
                <td>用户名</td>
                <td>密码</td>
                <td>
                    <button id="delete">删除</button>
                </td>
            </tr>
            </col>
        </table>
    </div>
</main>
<link rel="stylesheet" href="case.css">

<style>

    body {
        background: aliceblue;
        background-image: url("picture.jpg");
        background-size: 50vw;
        background-position: 50% 50%;
    }
</style>
<!--点击箭头 右侧滚动条滚动到顶部-->
<button onclick="window.scrollTo(0,0)" class="top-toolbar">↑</button>
</body>
</html>

踩坑记录

引入js文件

<script type="text/javascript" src="mrjj.js"></script>

这句要放在body下面，因为程序是从上往下读的，首先有元素出现，再去找到这个元素。

这里document要放在<script>外面，博主放到了里面，导致点完添加按钮，并没有将元素添加进去，没有调用写好的函数！！！排查了半天！！！

<script>
        document.getElementById("delete").addEventListener("click", deleteCase);
        document.getElementById("add_case").addEventListener("click", addCase)</script>

删除用例

查找出需要删除的元素

document.getElementById("delete")

删除元素

document.getElementById("delete").parentNode.parentNode.remove()

 

新增用例

查找元素

document.querySelector("[name='stepName']")

获取页面上元素的内容

document.querySelector("[name='stepName']").value

取出表单里的信息：
 

new FormData()

let caseInfo={}

let caseForm=document.getElementById("form-info")

let formdata=new FormData(caseForm)

formdata.get("stepName")

formdata.forEach((value,key)=>{caseInfo[key]=value})

将表单里的信息放入table中

let newline=document.createElement("tr")
for(let key in caseInfo){
    let td=document.createElement("td");
    td.append(caseInfo[key]);
    newline.append(td);
}

学习成果展示

function deleteCase(event){
    event.target.parentNode.parentNode.remove();
}
document.getElementById("delete").addEventListener("click",deleteCase);
function addCase(){
    let caseInfo={};
    let caseForm=document.getElementById("form-info");
    let formdata=new FormData(caseForm);
    formdata.forEach((value,key)=>{caseInfo[key]=value});
    let newline=document.createElement("tr");
    for(let key in caseInfo){
        if(key!=='type'){
            let td=document.createElement("td");
            td.append(caseInfo[key]);
        newline.append(td);
    }}
    document.getElementById("case-table").append(newline);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<header id="title">
    欢迎来到MRJJ_9的自动化测试平台
</header>

<body>
    <div class="learn-website">
        <h3> 学习网站</h3>
        <ul id="mrjj_list">
            <li><a class="learn-link" href="https://blog.csdn.net/mrjj_9/category_12393537.html">个人博客</a></li>
            <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">MDN 社区</a></li>
            <li><a href="" https://www.w3school.com.cn/html/index.asp">w3school.com</a></li>
            <li><a href="https://www.csdn.net">CSDN社区</a></li>
    </div>

    </ul>
    <main>
        <div class="form" style="
    display: inline-block">
            <form id="form-info">
                <h2 id="form-title">添加测试用例</h2>
                <label>
                    用例名：
                    <input type="text" placeholder="输入测试用例名称" name="caseName">
                    步骤名：
                    <input type="text" placeholder="输入测试步骤名称" name="stepName">
                </label>
                <div>请选择用例类型：
                    <label>
                        <input type="radio" value="api">接口自动化
                    </label>
                    <label>
                        <input type="radio" value="ui">UI自动化
                        <br>
                    </label>
                </div>
                <label>
                    关键字：
                </label>
                <select name="mrjj-key-words">
                    <option value="open-browser">打开浏览器</option>
                    <option value="add-parmas">传入必传参数</option>
                </select>
                </br>
                <lable>参数1：<input type="text" name="param1"></lable>
                <lable>参数2：<input type="text" name="param2"></lable>
                <button id="add_case" type="button"> 新增用例 </button>
            </form>
        </div>
        <div class="table" style="
    display: inline-block">
            <h2 id="caseName">测试用例</h2>
            <!-- <button class="add-case-button" @click="isEdit=true">
                新增用例
            </button> -->
            <table border="2" id="case-table">

                <col style="width: 100px; overflow: hidden; text-overflow: ellipsis" />
                <col style="width: 100px" />
                <col style="width: 100px" />
                <col style="width: 100px" />
                <col style="width: 100px" />
                <tr>
                    <th id="mrjj">用例名</th>
                    <th>步骤名</th>
                    <th>关键字</th>
                    <th>参数1</th>
                    <th>参数2</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>参数正确登录成功</td>
                    <td>输入正确的参数登录成功</td>
                    <td>用户名 密码</td>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>
                        <button id="delete">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>参数错误登录失败</td>
                    <td>输入错误的参数登录失败</td>
                    <td>用户名 密码</td>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>
                        <button id="delete">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>参数为空登录失败</td>
                    <td>输入的参数为空登录失败</td>
                    <td>用户名 密码</td>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>
                        <button id="delete">删除</button>
                    </td>
                </tr>
                </col>
            </table>
        </div>
    </main>
    </script>
    <link rel="stylesheet" href="case.css">
    <script type="text/javascript" src="mrjj.js"></script>
    <script>
        document.getElementById("delete").addEventListener("click", deleteCase);
        document.getElementById("add_case").addEventListener("click", addCase)</script>
    <style>
        body {
            background: aliceblue;
            background-image: url("./picture.jpg");
            background-size: 60vw;
            background-position: 10% 10%;
        }
    </style>
    <!--点击箭头 右侧滚动条滚动到顶部-->
    <button onclick="window.scrollTo(0,0)" class="top-toolbar">↑</button>
</body>

</html>

总结

结合前面学习的前端基础，HTML、CSS、JavaScript语法，今天又学习了Web API的接口、监听事件，学会了操作页面上的元素，最终可以实现删除元素，添加元素的操作！对于细节方面还需加强练习，多踩坑，多总结，为后面的学习打下一个良好的基础。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/904400.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LTPP在线开发平台【使用教程】

LTPP在线开发平台【使用教程】

LTPP在线开发平台 点击访问 LTPP在线开发平台 LTPP&#xff08;Learning teaching practice platform&#xff09;在线开发平台是一个编程学习网站&#xff0c;该网站集文章学习、短视频、在线直播、代码训练、在线问答、在线聊天和在线商店于一体&#xff0c;专注于提升用户编…
阅读更多...
使用SpringBoot+SpringMVC+Mybatis+WebSocket实现云聊天项目

使用SpringBoot+SpringMVC+Mybatis+WebSocket实现云聊天项目

云聊天 1. 项目介绍 本项目是仿照微信实现网页版聊天程序&#xff0c;用户注册登录后可与在线好友实时聊天&#xff0c;下线好友上线后可以查看到好友发送的消息&#xff1b;用户可以在搜索框搜索用户添加好友&#xff1b;用户还可以查看好友申请列表&#xff0c;选择是否同意…
阅读更多...
Golang使用消息队列（RabbitMQ）

Golang使用消息队列（RabbitMQ）

最近在使用Golang做了一个网盘项目&#xff08;类似百度网盘&#xff09;&#xff0c;这个网盘项目有一个功能描述如下&#xff1a;用户会删除一个文件到垃圾回收站&#xff0c;回收站的文件有一个时间期限&#xff0c;比如24h&#xff0c;24h后数据库中记录和oss中文件会被删除…
阅读更多...
使用Vscode 编辑器 导出、导入和运行Excel中的VBA代码

使用Vscode 编辑器 导出、导入和运行Excel中的VBA代码

使用Vscode 编辑器 导出、导入和运行Excel中的VBA代码 前言 Excel自带的 Microsoft Visual Basic for Applications 编辑器常被人称为上古编辑器&#xff0c;的确不适合代码编辑&#xff0c;这是其一&#xff0c;其二是当系统语言与Excel的安装语言不一致时&#xff0c;往往出现…
阅读更多...
QChart类用来 管理 图表的：数据序列（series）、图例（legend）和坐标轴（axis）

QChart类用来 管理 图表的：数据序列（series）、图例（legend）和坐标轴（axis）

QChart类用来 管理 图表的&#xff1a;数据序列&#xff08;series&#xff09;、图例&#xff08;legend&#xff09;和坐标轴&#xff08;axis&#xff09; 1、数据序列类 继承关系 2、坐标轴类 的继承关系 3、图例类 什么是图例&#xff1f; 图例&#xff1a;是集中于地图…
阅读更多...
Docker搭建LNMP运行Wordpress平台

Docker搭建LNMP运行Wordpress平台

一、项目1.1 项目环境1.2 服务器环境1.3 任务需求 二、Linux 系统基础镜像三、Nginx1、建立工作目录2、编写 Dockerfile 脚本3、准备 nginx.conf 配置文件4、生成镜像5、创建自定义网络6、启动镜像容器7、验证 nginx 四、Mysql1、建立工作目录2、编写 Dockerfile3、准备 my.cnf…
阅读更多...
如何做H5性能测试？

如何做H5性能测试？

提起H5性能测试&#xff0c;可能许多同学有所耳闻&#xff0c;但是不知道该如何对H5做性能测试&#xff0c;或者不知道H5应该关注哪些性能指标。今天我们就来看下&#xff0c;希望阅读本文后&#xff0c;能够有所了解。 常用指标 1、H5性能相关参数介绍 白屏时间&#xff1a;…
阅读更多...
FRP内网穿透，配置本地电脑作为服务器

FRP内网穿透，配置本地电脑作为服务器

FRP内网穿透&#xff0c;配置本地电脑作为服务器 下载FRP服务端客户端 参考链接&#xff1a; https://www.it235.com/实用工具/内网穿透/pierce.html https://www.cnblogs.com/007sx/p/17469301.html 由于没有公网ip&#xff0c;所以尝试内网穿透将本地电脑作为服务器&#xff…
阅读更多...
第 6 章 递归(1)(应用场景，概念，调用机制，解决问题类型，重要规则)

第 6 章 递归(1)(应用场景，概念，调用机制，解决问题类型，重要规则)

6.1递归应用场景 看个实际应用场景&#xff0c;迷宫问题(回溯)&#xff0c; 递归(Recursion) 6.2递归的概念 简单的说: 递归就是方法自己调用自己,每次调用时传入不同的变量.递归有助于编程者解决复杂的问题,同时可以让代码变得简洁。 6.3递归调用机制 我列举两个小案例,…
阅读更多...
代码随想录算法训练营之JAVA｜第三十四天|509. 斐波那契数

代码随想录算法训练营之JAVA｜第三十四天|509. 斐波那契数

今天是第 天刷leetcode&#xff0c;立个flag&#xff0c;打卡60天&#xff0c;如果做不到&#xff0c;完成一件评论区点赞最高的挑战。 算法挑战链接 509. 斐波那契数https://leetcode.cn/problems/fibonacci-number/ 第一想法 这个就是求斐波那契数&#xff0c;感觉应该不用…
阅读更多...
Error creating bean with name ‘esUtils‘ defined in file

Error creating bean with name ‘esUtils‘ defined in file

报错异常&#xff1a; 背景&#xff1a; esUtils在common服务中、启动media服务时候、报这个异常、后排查esUtils在启动时候发生异常引起的、在相关bean中加入try{}catch{}即可解决问题 String[] split url.split(","); HttpHost[] httpHosts new HttpHost[split.…
阅读更多...
卷积网络手动实现和nn实现

卷积网络手动实现和nn实现

代码中涉及的图片实验数据下载地址&#xff1a;https://download.csdn.net/download/m0_37567738/88235543?spm1001.2014.3001.5501 &#xff08;一&#xff09;手动实现卷积算法 代码&#xff1a; import os import torch.nn.functional as F from PIL import Image import…
阅读更多...
装饰器读取不到被装饰函数的参数-已解决

装饰器读取不到被装饰函数的参数-已解决

def write_case_log(func):def wrapper(*args, **kwargs):logger.info("{}开始执行".format(func.__name__))func(*args,**kwargs)logger.info("{}执行中".format(args))logger.info("{}执行结束",format(func.__name__))return wrapper被装饰函…
阅读更多...
卡方分箱(chi-square)

卡方分箱(chi-square)

统计学&#xff0c;风控建模经常遇到卡方分箱算法ChiMerge。卡方分箱在金融信贷风控领域是逻辑回归评分卡的核心&#xff0c;让分箱具有统计学意义&#xff08;单调性&#xff09;。卡方分箱在生物医药领域可以比较两种药物或两组病人是否具有显著区别。但很多建模人员搞不清楚…
阅读更多...
基于SSM的校园旧书交易交换网站

基于SSM的校园旧书交易交换网站

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…
阅读更多...
CVE-2023-21292 AMS框架层高危漏洞分析

CVE-2023-21292 AMS框架层高危漏洞分析

文章目录 前言漏洞细节故事起源漏洞利用漏洞修复 总结 前言 本周在分析 Google 官方发布的 Android 2023 年8 月安全公告 涉及的漏洞补丁的时候&#xff0c;遇到一个有意思的漏洞&#xff1a;CVE-2023-21292。 之所以说它有意思是因为这个漏洞早在去年年底就在某平台上被国外…
阅读更多...
shell脚本语句

shell脚本语句

一、语句 一、条件语句 一、以用户为例演示 一、显示当前登录系统的用户信息 w命令 二、显示有多少个用户 w | wc -l 显示有7个用户 前两个是固定标题&#xff0c;从第三个开始才是登录用户&#xff0c;所以要统计数量需要 命令&#xff1a;echo $[$(w | wc -l) -2] 显示…
阅读更多...
知识储备--基础算法篇-Hash table

知识储备--基础算法篇-Hash table

1.哈希表的基础概念 哈希表是一种数据结构&#xff0c;它使用哈希函数将键映射到存储桶或槽位中。它通过将键转换为索引来实现快速的插入、查找和删除操作。哈希表通常用于需要高效查找的场景&#xff0c;如字典、缓存和数据库中。 常见哈希结构 数组set&#xff08;集合&am…
阅读更多...
系统架构设计专业技能 · 数据库设计

系统架构设计专业技能 · 数据库设计

系列文章目录 系统架构设计专业技能 软件工程&#xff08;一&#xff09;【系统架构设计师】 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA&#xff08;一&#xff09;【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估&#xff08;…
阅读更多...
高频面试题：多线程顺序打印ABC字符20次

高频面试题：多线程顺序打印ABC字符20次

一个关于多线程协作的题目经常会出现在大厂的面试中&#xff1a;有三个线程分别打印A、B、C&#xff0c;请让这三个线程按顺序打印出ABC20次。 我们知道&#xff0c;线程调度机制是非确定性的&#xff0c;如果不加上额外的并发控制&#xff0c;直接启动三个线程&#xff0c;那么…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023