Javascript：WebAPI

news/2025/6/8 12:17:12

获取网页元素

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

 

 

 

 

 

 

文章来源:https://blog.csdn.net/Visual_progress/article/details/148030711
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://dhexx.cn/news/show-5520906.html

相关文章

LeetCode 第 45 题“跳跃游戏 II”

LeetCode 第 45 题“跳跃游戏 II”

好的&#xff0c;我来帮你解释一下 LeetCode 第 45 题“跳跃游戏 II”&#xff0c;这是一道经典的贪心算法题目。 题目描述&#xff1a; 给你一个非负整数数组 nums&#xff0c;你最初位于数组的第一个位置。数组中的每个元素代表你在该位置可以跳跃的最大长度。你的目标是使用…
阅读更多...
使用Spring Boot与Spring Security构建安全的RESTful API

使用Spring Boot与Spring Security构建安全的RESTful API

使用Spring Boot与Spring Security构建安全的RESTful API 引言 在现代Web应用开发中&#xff0c;安全性是不可忽视的重要环节。Spring Boot和Spring Security作为Java生态中的主流框架&#xff0c;为开发者提供了强大的工具来构建安全的RESTful API。本文将详细介绍如何结合S…
阅读更多...
现代健康生活养生指南

现代健康生活养生指南

现代社会中&#xff0c;熬夜加班、久坐不动、饮食不规律成为许多人的生活常态&#xff0c;由此引发的健康问题也日益增多。想要摆脱亚健康&#xff0c;不必依赖中医理念&#xff0c;从以下这些现代科学养生方法入手&#xff0c;就能逐步改善身体状况。​ 饮食上&#xff0c;注…
阅读更多...
jvm安全点(二)openjdk17 c++源码垃圾回收安全点信号函数处理线程阻塞

jvm安全点(二)openjdk17 c++源码垃圾回收安全点信号函数处理线程阻塞

1. 信号处理与桩代码&#xff08;Stub&#xff09;​​ 当线程访问安全点轮询页&#xff08;Polling Page&#xff09;时&#xff1a; ​​触发 SIGSEGV 信号​​&#xff1a;访问只读的轮询页会引发 SIGSEGV 异常。​​信号处理函数​​&#xff1a;pd_hotspot_signal_handl…
阅读更多...
Centos7.9同步外网yum源至内网

Centos7.9同步外网yum源至内网

curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo curl -o /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo yum makecache yum repolist安装软件 yum install -y yum-utils createrepo # yum-utils包含re…
阅读更多...
十二、Hive 函数

十二、Hive 函数

作者&#xff1a;IvanCodes 日期&#xff1a;2025年5月1日 专栏&#xff1a;Hive教程 在数据处理的广阔天地中&#xff0c;我们常常需要对数据进行转换、计算、清洗或提取特定信息。Hive 提供了强大的内置运算符和丰富的内置函数库&#xff0c;它们就像魔法师手中的魔法棒&…
阅读更多...
【RocketMQ Broker 相关源码】- NettyRemotingClient 和 NettyRemotingServer

【RocketMQ Broker 相关源码】- NettyRemotingClient 和 NettyRemotingServer

文章目录 1. 前言2. BrokerOuterAPI2.1 NettyRemotingClient2.2 start 启动2.2.1 NettyRemotingClient#start 3. NettyRemotingServer3.1 ClientHousekeepingService3.2 ProducerManager#doChannelCloseEvent3.3 ConsumerManager#doChannelCloseEvent3.3.1 DefaultConsumerIdsC…
阅读更多...
基于STM32的INA226电压电流检测仪

基于STM32的INA226电压电流检测仪

系统总体框图 功率检测装置原理图功能及模块连接说明 一、系统功能概述 该装置以STM32F103C8T6微控制器为核心&#xff0c;集成功率检测、数据交互、状态显示和用户提示功能&#xff0c;通过模块化设计实现稳定运行。 二、各模块功能及连接方式 按键模块 功能&#xff1a…
阅读更多...
哈希表（2）：

哈希表（2）：

我们上节说到我们该讲下一个处理哈希冲突的方法&#xff1a; 链地址法&#xff1a; 链地址法的话&#xff0c;就不存在说是咱们的这个数据被别人占了&#xff0c;然后咱们再占别的数据的位置这个说法&#xff0c;因为我们的链地址法的话&#xff0c;他是不把数据存在哈希表里…
阅读更多...
最小二乘法拟合直线，用线性回归法、梯度下降法实现

最小二乘法拟合直线，用线性回归法、梯度下降法实现

参考笔记&#xff1a; 最小二乘法拟合直线&#xff0c;多个方法实现-CSDN博客 一文让你彻底搞懂最小二乘法&#xff08;超详细推导&#xff09;-CSDN博客 目录 1.问题引入 2.线性回归法 2.1 模型假设 2.2 定义误差函数 2.3 求偏导并解方程 2.4 案例实例 2.4.1 手工计算…
阅读更多...
最新文章

Copyright @ 2022~2023