Javascript：WebAPI

于 2025-05-18 00:04:29 发布
阅读量470 收藏 15
点赞数 16
文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Visual_progress/article/details/148030711
版权

获取网页元素

queryselector

queryselector是 JavaScript 中用于选择 DOM 元素的重要方法，它允许使用 CSS 选择器语法来查找页面中的元素。

一般queryselector获取的元素都是html中第一个选择器的元素 

支持选择器类型：类选择器(.class) ，id选择器(#class)，属性选择器[attribute]，伪类选择器(father:child)

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>英雄联盟</div><br>
    <div id="LOL">英雄联盟</div><br>
    <div class="CF">穿越火线</div><br>
    <div><div>我的世界</div></div><br>

</body>
<script>
    let NAME1=document.querySelector('div')
    let NAME2=document.querySelector('#LOL')
    let NAME3=document.querySelector('.CF')
    let NAME4=document.querySelector('div div')
    console.log(NAME1)
    console.log(NAME2)
    console.log(NAME3)
    console.log(NAME4)
</script>
</html>

演示结果

 querySelectorAll

 querySelector只能获取html中一个选择器标签，但是querySelectorAll可以获取全部的选择器标签

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>英雄联盟</div><br>
    <div>洛克王国</div><br>
    <div>穿越火线</div><br>
    <div>我的世界</div><br>

</body>
<script>
    let NAME1=document.querySelectorAll('div')
    console.log(NAME1)
</script>
</html>

演示结果

 

事件的认识

我们学习完了获取网页标签元素是为了更好的认识事件，当我们在操作网页的时候就是一种事件的发生，事件的元素有：事件源，事件的类型，事件的处理方式

事件源：是那个标签发生了事件

事件的类型：发生了什么类型的事件

事件的处理方式：发生这个事件之后我们的网页需要怎么处理

我们来看一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="点我发生事件" class="gan">
</body>
<script>
    let NAME1=document.querySelector('.gan')
    NAME1.onclick=function(){
        alert("Hello,World")
    }
</script>
</html>

演示结果

 当我们点击这个按钮的时候就会发生一个点击类型的事件，而这个事件的事件源就是这个按钮，事件的处理方式就是接下来会弹出一个窗口

获取/修改元素的内容

在修改网页元素的内容时我们一样需要获取选择器标签，当我们获取选择器标签后有两个接口可以修改标签的内容，一个是修改标签文本，一个是直接修改标签html的结构

innerText 

当我们的标签是一个文本内容时，选择它并且使用这个接口可以直接修改文本

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="gan">HELLO,WORLD</div>
    <div class="gan">HELLO,WORLD</div>
    <div class="gan">HELLO,WORLD</div>
</body>
<script>
    let NAME1=document.querySelector('.gan')
    console.log(NAME1.innerText)
    NAME1.innerText='<div>Hello,World</div>'
    console.log(NAME1.innerText)
</script>
</html>

演示结果

 

innerHTML

innerHTML用于获取或设置标签的HTML的内容

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="gan">HELLO,WORLD</div>
    <div class="gan">HELLO,WORLD</div>
    <div class="gan">HELLO,WORLD</div>
</body>
<script>
    let NAME1=document.querySelector('.gan')
    console.log(NAME1.innerHTML)
    NAME1.innerHTML='<div>Hello,World</div>'
    console.log(NAME1.innerHTML)
</script>
</html>

演示结果

 修改img属性

我们先定义一个img图像，并获取他和他的属性信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .type{
            height: 150px;
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="./微信图片_20250516111746.jpg" alt="这是vue的log" title="Vue3" class="type">
</body>
<script>
    let tim=document.querySelector('.type')
    console.dir(tim)
</script>
</html>

这里的dir使用来获取tim对象的属性的

演示结果

我们可以看到我们为img的添加的属性都可以使用，console.dir来查看

我们可以结合上面的点击事件来修改img的属性使他更灵活起来

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .type{
            height: 150px;
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="a20250516111746.jpg" alt="这是vue的log" title="Vue3" class="type" >
</body>
<script>
    let tim=document.querySelector('.type')
    tim.onclick=function()
    {
        if(tim.src.lastIndexOf('a20250516111746.jpg')!==-1)
        {
            tim.src='./a74A6416B588.jpg'
        }
        else
        {
            tim.src='./a20250516111746.jpg'
        }
    }
</script>
</html>

演示结果

 

 

我们每点击一次图片，图片都换进行切换

获取/修改样式属性 

行内样式操作格式

        text1.style.fontSize="20px"
        text1.style.cssText="font-size:20px"

这里一共有两种模板可选

元素.style.属性=属性值，第一种命名方式需要去掉中间的-号，第二个单词的第一个字母大写

元素.style.cssText=“属性文本” 

类名样式操作

类名样式操作格式

对象名.className="新的类名"

当我们要更改标签的类时，我们可以通过这种方式更改

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .TEXT1{
            background-color: aqua;
            color: red;
            width: 100%;
            height: 100%;
        }
        .TEXT2{
            background-color: aquamarine;
            color: khaki;
            width: 100%;
            height: 100%;
        }
        html body{
            background-color: black;
        }
    </style>
</head>
<body>
    <div style="font-size: 50px;" class="TEXT1">HELLO,WORLD</div>
</body>
<script>
    let text1=document.querySelector('.TEXT1')
    text1.onclick=function()
    {
        if(text1.className=="TEXT1")
        {
            text1.className="TEXT2"
        }
        else
        {
            text1.className="TEXT1"
        }
    }
</script>
</html>

这里我们实现了一个点击就会切换类样式的程序

 

 

节点操作 

插入到容器的最后

DOM数节点的创建和存放

创建DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <span></span>
    <div class="contaign"></div>
</body>
<script>
    let text1=document.createElement('span')
    text1.className="CLASSNAME"
    text1.id="IDNAME"
    text1.innerText="HELLO,WORLD"
    console.log(text1)

</script>
</html>

演示结果

 

这就是我们创建的节点

 但是网页并不会输出什么

将节点存放在一个容器中再输出到网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <span></span>
    <div class="contaign"></div>
</body>
<script>
    let text1=document.createElement('span')
    text1.className="CLASSNAME"
    text1.id="IDNAME"
    text1.innerText="HELLO,WORLD"
    console.log(text1)
    let conta=document.querySelector('.contaign')
    conta.appendChild(text1)
    console.log(conta)
</script>
</html>

演示结果

 网页输出结果

 这里只输出了一句，说明创建的DOM节点不单独生效，只放在容器里生效

插入到指定容器节点之前

 演示容器的节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div class="contaign">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
    let conta=document.querySelector('.contaign')
    console.log(conta.children)
</script>
</html>

演示结果

 这里的children相当于一个容器，

使用insertBefore进行节点插入

使用格式

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

其中newNode是需要被插入的节点，referenceNode是选择在那个节点位置之前插入

 insertedNode是返回的被插入节点

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <span></span>
    <div class="contaign">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
    let TEXT1=document.createElement("span")
    TEXT1.innerText="HELLO,WORLD"
    let conta=document.querySelector('.contaign')
    conta.insertBefore(TEXT1,conta.children[1])
    console.log(conta.children)
</script>
</html>

演示结果

 当我们插入两次DOM树会按最后一次的算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <span></span>
    <div class="contaign">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
    let TEXT1=document.createElement("span")
    TEXT1.innerText="HELLO,WORLD"
    let conta=document.querySelector('.contaign')
    conta.insertBefore(TEXT1,conta.children[1])
    conta.insertBefore(TEXT1,conta.children[1])
    console.log(conta.children)
</script>
</html>

演示结果

 

这里只有一个span

当我们单独修改节点的数据后，DOM树对应该节点的数据也会被修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .TEXT0{
            background-color: aqua;
            color: red;
        }
    </style>
</head>
<body>
    <span></span>
    <div class="contaign">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
    let TEXT1=document.createElement("span")
    TEXT1.innerText="HELLO,WORLD"
    let conta=document.querySelector('.contaign')
    conta.insertBefore(TEXT1,conta.children[1])
    TEXT1.className="TEXT0"
    console.log(conta.children)
</script>
</html>

演示结果

 删除容器中的指定节点

使用removeChild删除节点

使用格式

oldChild = element.removeChild(child);

child为被删除的节点，element为容器，oldChild为返回的被删除节点

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .TEXT0{
            background-color: aqua;
            color: red;
        }
    </style>
</head>
<body>
    <span></span>
    <div class="contaign">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
    let TEXT1=document.createElement("span")
    TEXT1.innerText="HELLO,WORLD"
    let conta=document.querySelector('.contaign')
    conta.insertBefore(TEXT1,conta.children[1])
    TEXT1.className="TEXT0"
    conta.removeChild(TEXT1)
    console.log(conta.children)
</script>
</html>

演示结果

 虽然节点被删除了，但是节点仍然存在于Web内存中

 

 

 

 

 

 

GanGuaGua
关注
JavaScript基础-API 和 Web API
m0_61787196的博客
03-22 1000
JavaScript基础-API 和 Web API
【Web前端】Web API：构建Web应用核心
一条晒干的咸鱼的博客
11-20 1366
API（应用程序编程接口）是一组定义了软件组件之间如何交互的规则和协议。它允许一个程序调用另一个程序的功能，而不用了解其内部实现细节。 Web 开发中，API 通常用于实现前端与后端之间的通信。
JavaScript(WebAPI)
chenchenchencl的博客
03-11 1181
JavaScript(WebAPI)
JavaScript学习笔记（十二）：JS Web API
wz_1992的博客
08-15 1621
API 指的是应用程序编程接口（Application Programming Interface）。Web API 是 Web 的应用程序编程接口。浏览器 API 可以扩展 Web 浏览器的功能。服务器 API 可以扩展 Web 服务器的功能。
JavaScript WebAPI 实战
xyk：的博客
05-25 1509
前面学习的 JS 分成三个大的部分ECMAScript: 基础语法部分DOM API: 操作页面结构BOM API: 操作浏览器WebAPI 就包含了DOM + BOM.这个是 W3C 组织规定的.DOM 全称为 Document Object Model，页面文档对象模型，html中的每个标签都是可以映射到JS中的一个对象中的, 标签中的内容都可以通过JS对象感知到, JS对象修改对应的属性能够影响到标签的展示, 通过这样的DOM API就可以让JS代码来操作页面元素.
使用JavaScript调用Web API，Web API 和身份验证
kllo__的博客
02-28 1327
以下的示例显示了如何使用 JavaScript 调用 Web API。 <html> <head> </head> <body> <h2> Some blog articles</h2> <div id="articles"></div> </body> </html> // Fetch data from the API fetch("https://...
【JavaScript】WebAPI详解
X_H学Java的博客
08-05 3389
JavaScript作为前端三剑客之一，主要功能是赋予页面灵魂，使之可以完成与用户的交互动作，本篇文章介绍了在jJavaScript中，如何使用WebAPI来操作页面元素赋予页面灵魂，来完成与用户的交互动作
JavaScript中WebAPI知识
ashfiqa的博客
02-09 1446
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。WebAPI概念：浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)，WebAPI最重要的是可以构建面向各种客户端的服务。另外与WCF REST Service不同在于，WebAPI利用Http协议的各个方面来表达服务(例如 URI/r
JavaScript 常用API — WebAPI 详细介绍+实例描述
weixin_46448719的博客
05-06 3629
作为一个想要做后端开发的大三学生，总觉得不了解前端内容比较难受，就通过两篇博客来写写代码，整理整理 ~ 供自己之后复习查阅，也提供给大家有需要的人查看~
javascript web api 音频播放
m0_61761886的博客
01-04 1719
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音频播放</title> </head> <body> <H1>网络音频加载播放一次</H1> <script> var rqt=new XMLHttpRequest();//生成一个网络请求 var...
CSC3916_HW5:Web API HW 5应用
04-07
这个项目是针对CSC3916课程的第五个Web API作业，主要涉及利用JavaScript进行Web API的开发和应用。在现代Web开发中，Web API是至关重要的组件，它们使得网页能够与服务器进行数据交换，实现动态和交互式的用户体验...
MusicStoreAngularVersion:WebAPI和Angular
04-28
WebAPI和Angular 这个项目是著名的MusicStore。 ASP MVC3中的一个示例项目。 我重新创建了它，并将Fluent Nhibernate用于其ORM而不是EN框架。 除此之外，我现在正在使用Angular JS和WebApi将其逐步转换为SPA。 真...
CSC3916_HW3:Web API硬件3
03-26
在本项目"CSC3916_HW3:Web API硬件3"中，我们主要探讨的是如何使用JavaScript构建一个Web API驱动的应用程序。JavaScript是一种广泛应用于客户端网页开发的编程语言，它使得网页具备了动态交互的能力。这个作业可能...
WebAPI.ExportExcel:用于导出 Excel 的 Web API
06-08
学习使用 WebAPI.ExportExcel 需要熟悉 ASP.NET Web API、C# 以及 JavaScript 的 AJAX 或 Fetch API。同时，对于 EPPlus 或其他 Excel 库的使用也是必要的，以便了解如何创建和填充 Excel 文件。在实际开发中，你还...
ru-scraping:webAPI，使用网络抓取提供USP Leste菜单
05-24
使用网络抓取提供USP Leste菜单的API 消耗API 您可以通过向基本URL发送GET请求来使用API​​： : ，该请求将在星期几返回JSON。 如何安装 要求： 或 克隆存储库： git clone ...
React Flow 节点事件处理实战：鼠标 / 键盘事件全解析（含节点交互代码示例）
最新发布
叶子的博客
05-17 716
本专栏将由浅入深逐步解析AI智能体的核心概念，结合 React Flow 打造可视化 AI 工作流，并通过实例来加深技术理解，附源码与详细解析。项目地址：https://gitee.com/fgai/react-agent。
Preview 插件
augenstern416的博客
05-14 499
3. **智能代码折叠**：自动折叠import等非核心代码，提升可读性"1. **双向绑定调试**：修改props实时反馈，同时生成对应代码示例。1. **代码净化**：移除危险API调用（如fetch、eval）2. **安全沙箱**：通过iframe隔离执行环境，防止恶意代码。2. **沙箱隔离**：iframe + sandbox属性限制。2. **新人 onboarding**：交互式学习组件API。/* 重置继承样式 */3. **API 设计反馈**：通过使用数据优化组件设计。
如何使用 React Hooks 替代类组件的生命周期方法？
官方推荐
05-12 5492
如何使用 React Hooks 替代类组件的生命周期方法？
如何选择合适的企业级商城系统前端状态管理方案？
万米商云的博客
05-14 528
在复杂的电商场景中，前端状态管理是保障系统高性能、可维护性和数据一致性的核心环节。面对商品数据实时更新、多模块状态共享、高并发请求等挑战，如何选择合适的状态管理方案？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值