当前位置： 首页 > news >正文

Javascript：WebAPI

news 2025/7/4 4:53:13

获取网页元素

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内存中

 

 

 

 

 

 

http://www.xdnf.cn/news/497575.html

相关文章：

  • React Fiber 架构深度解析：时间切片与性能优化的核心引擎
  • ARM (Attention Refinement Module)
  • spring -MVC-02
  • DeepSeek赋能电商，智能客服机器人破解大型活动人力困境
  • 数组集合互转问题
  • Ubuntu 安装 squid
  • 服装零售逆势密码：从4月英国7%增长看季节性消费新模型
  • 中国30米年度土地覆盖数据集及其动态变化(1985-2022年)
  • 一个指令，让任意 AI 快速生成思维导图
  • Unity序列化字段、单例模式(Singleton Pattern)
  • 通俗版解释CPU、核心、进程、线程、协程的定义及关系
  • 动态规划-64.最小路径和-力扣(LetCode)
  • c#车检车构客户管理系统软件车辆年审短信提醒软件
  • 系统架构设计（九）：分布式架构与微服务
  • pytorch小记（二十二）：全面解读 PyTorch 的 `torch.cumprod`——累积乘积详解与实战示例
  • Java求职面试：从核心技术到大数据与AI的场景应用
  • [Android] 安卓彩蛋：Easter Eggs v3.4.0
  • 第五项修炼：打造学习型组织
  • 前端基础之CSS
  • 大语言模型 11 - 从0开始训练GPT 0.25B参数量 MiniMind2 准备数据与训练模型 DPO直接偏好优化
  • 【诊所电子处方专用软件】佳易王个体诊所门诊电子处方开单管理系统：零售药店电子处方服务系统#操作简单#诊所软件教程#药房划价
  • Java 快速转 C# 教程
  • 30、WebAssembly：古代魔法——React 19 性能优化
  • 手撕四种常用设计模式（工厂，策略，代理，单例）
  • 设计模式Java
  • IDEA反斜杠路径不会显示JUnit运行的工作目录配置问题
  • 信奥赛-刷题笔记-栈篇-T2-P1981表达式求值0517
  • 在Maven中替换文件内容的插件和方法
  • 防范Java应用中的恶意文件上传：确保服务器的安全性
  • 【机器人】复现 WMNav 具身导航 | 将VLM集成到世界模型中