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

JavaWeb—js（3）

news 2025/12/16 23:08:56

Bom

dom: document object model(文档对象模型),
是处理html、xml的标准编写接口。

节点和元素

整个页面也就是整个文档我们称之为文档节点;

文档节点使用document来表示;

页面中的所有标签我们称之为元素，使用element来表示;

如此处的文本、属性、注释等，我们称之为节点，使用node进行表示;即注释也叫注释节点、文本也叫文本节点、属性也叫属性节点;元素也可以称为元素节点。

获取元素对象

 /*通过document 对象 获取元素*///通过id获取元素对象 传入id的名称//id不能重复let div =  document.getElementById('one');console.log(div)// 通过class名获取元素对象 返回的是一个数组//如果要去操作具体的对象，需要通过索引获取到对象let div2 = document.getElementsByClassName('box1');console.log(div2)//通过标签的名称获取元素对象 返回一个数组let liList= document.getElementsByTagName('li');console.log(liList)//通过name属性的值获取元素 返回一个数组 （了解）let nameList = document.getElementsByName('dzh');console.log(nameList)//通过选择器获取一个元素对象let box1 =  document.querySelector('.box1');console.log(box1)//通过选择器获取多个元素对象var box2= document.querySelectorAll('div');console.log(box2)

操作文本超文本

// 通过class名获取元素对象 返回的是一个数组//如果要去操作具体的对象，需要通过索引获取到对象let div = document.getElementsByClassName('box1');console.log(div)console.log(div[0].innerText)//操作元素的文本内容// div[0].innerText=' <span>我是span</span>';//操作元素的 超文本内容div[0].innerHTML='<span class="one">我是span</span>'

操作对象的属性

id和class

//操作元素对象的属性// 对象名.属性名console.log(div.id)div.id='two';//操作类名console.log(div.className)//覆盖class名// div.className='box2'// 添加类名div.classList.add('box2')// 删除类名// div.classList.remove('')//替换类名// div.classList.replace('')

操作自定义属性

//获取到所有的li 给每一个li添加一个唯一的index标识let liList= document.getElementsByTagName('li');for (let i = 0; i < liList.length; i++) {const element = liList[i];// 设置属性名和属性值element.setAttribute('index',i)console.log(element.getAttribute('index'))}

操作元素行内样式

//设置当前元素的行内样式
div.style.color='red';
div.style.width='100px';
div.style.height='100px'

// font-size fontSize background-color backgroundColor
div.style.backgroundColor='green';

获取元素的外部样式

//获取元素的外部样式
console.log(window.getComputedStyle(div).backgroundColor)
console.log(window.getComputedStyle(div).width)

操作checkbox的checked属性

//先判断 有没有选中if(checkbox.checked){//如果是选中 就取消选中checkbox.checked=false;btn.innerText='点击选中'}else{checkbox.checked=true;btn.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><button onclick="del()">删除</button><button onclick="replace()">替换</button></body>
<script>// 创建一个元素节点 传入元素的名称let div =  document.createElement('div');div.style.width='100px'div.style.height='100px'div.style.backgroundColor='red'//创建文本节点， 等同于 innerText属性
//    let text = document.createTextNode('我是div');
//    div.appendChild(text)
div.innerText='我是div'console.log(div)//获取到body标签的对象let body = document.querySelector('body');console.log(body)//追加子节点body.appendChild(div)function del(){//点击按钮 删除div节点//前提需要有这个节点，否则会报错body.removeChild(div)}function replace(){//点击按钮 将原来的div节点 替换成 span节点let span= document.createElement('span');span.style.color='pink';span.style.fontSize='25px'span.innerText='我是span'//(插入的节点，被替换的节点) //要保证 被替换节点存在body.replaceChild(span,div)}//查看当前元素的所有子节点let childList = body.childNodesconsole.log(childList)
</script>
</html>

JavaWeb—js（3）

Bom dom: document object model(文档对象模型), 是处理html、xml的标准编写接口。节点和元素整个页面也就是整个文档我们称之为文档节点; 文档节点使用document来表示; 页面中的所有标签我们称之为元素，使用element来表示; 如此处的文本、属性、注释等&…...

编程日记 2024/7/10 7:29:14

--使用显式游标更新行，对所有salesman增加500奖金： declare cursor s_cursor is select * from emp where job SALESMAN for update; begin for e_s in s_cursor loop update emp set comm nvl(comm,0)500 where current of s_cur…...

编程日记 2024/7/10 7:28:13

git合并报错：git -c core.quotepath=false -c log.showSignature=false merge r

这个错误通常发生在 Git 尝试合并两个没有共同祖先的历史时，比如在合并不同的分支或仓库时，可以尝试以下几种方法： 允许不相关历史的合并: git merge release-3.6 --allow-unrelated-histories这个选项告诉 Git 允许合并两个没有共同历史的分…...

编程日记 2024/7/10 7:27:12

云原生存储：使用MinIO与Spring整合

在现代云原生应用开发中，高效、可靠的存储解决方案是至关重要的。MinIO是一个高性能、分布式的对象存储系统，它与Amazon S3兼容，非常适合在Kubernetes等云原生环境中使用。本文将详细介绍如何在Spring Boot应用中整合MinIO，并提供…...

编程日记 2024/7/10 7:25:09

等保测评新趋势：应对数字化转型中的安全挑战

随着信息技术的飞速发展，数字化转型已成为企业提升竞争力、优化运营效率的重要手段。然而，这一转型过程中，企业也面临着前所未有的安全挑战。等保测评（信息安全等级保护测评）作为保障信息系统安全的重要手段&#xff0…...

编程日记 2024/7/10 7:23:08

使用esptool工具备份ESP32的固件（从芯片中备份下来固件）

本文以Windows电脑为例板子为esp32-c3 1下载python 可在官网中下载,此处不进行讲解使用如下代码查看是否安装了 Python（终端输入） python 2下载esptool 在终端输入如下代码即可下载使用 pip（推荐）: 在你已经安装的 Pyth…...

编程日记 2024/7/10 7:18:03

JS进阶-解析赋值

学习目标： 掌握解析赋值学习内容： 解构赋值数组解构对象解构筛选数组filter方法（重点） 解构赋值： 解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。分为： 数组解构对象解…...

编程日记 2024/7/10 7:17:02

Java虚拟机面试题汇总

目录 1. JVM的主要组成部分及其作用？ 1.1 运行时数据区划分？ 1.2 哪些区域可能会发生OOM？ 1.3 堆和栈的区别？ 1.4 内存模型中的happen-before是什么？ 2. HotSpot虚拟机对象创建流程？ 2.1 类加载过程…...

编程日记 2024/7/10 7:13:59

C++休眠的方法

Windows的API函数 Sleep(INFINITE); 休眠时间为永久 Linux的API函数sleep 没有直接表示无限时间的参数，根据POSIX标准，sleep() 函数的参数应该是 unsigned int 类型，因此最大可以接受的参数值是 UINT_MAX，即 4294967295 秒。sleep…...

编程日记 2024/7/10 7:12:58

选择排序（C语言版）

选择排序是一种简单直观的排序算法算法实现首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置。再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。重复第二步&…...

编程日记 2024/7/10 7:11:57

基于CentOS Stream 9平台搭建FRP内网穿透

内网穿透方法很多，本文以github上很火的frp为例 1.frp官方文档：https://gofrp.org/zh-cn/docs/overview/ 1.1 下载 https://github.com/fatedier/frp/releases 选中合适的版本 2. 服务端（服务器）搭建frps 需要公网IP服务器选…...

编程日记 2024/7/10 7:10:56

Redis管理禁用命令

在redis数据量比较大时，执行 keys * ，fluashdb 这些命令，会导致redis长时间阻塞，大量请求被阻塞，cpu飙升，严重可能导致redis宕机，数据库雪崩。所以一些命令在生产环境禁止使用。 Redis 禁用命令…...

编程日记 2024/7/10 7:07:53

RFID智能锁控系统在物流安全运输中的应用与效益分析

一、物流锁控系统现状与挑战 1.1 传统锁控系统的局限性安全性不足：机械锁容易被撬开或钥匙被复制，导致货物在运输过程中面临被盗风险。无法实时追踪：一旦货物离开发货点，物流公司无法实时监控货物状态，增加了货物…...

编程日记 2024/7/10 7:05:51

WPF设置全局样式

目的创建一个资源字典，自动引入到各个Window或者UserControl中，可以随意使用。或者引入多个控件包，为了做兼容，保证可以引用多个控件库。 1. 定义资源字典首先，你需要创建一个XAML文件来定义你的资源字典&#xf…...

编程日记 2024/7/10 7:04:50

【福利】代码公开！咸鱼之王自动答题脚本

转载请注明出处：小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你，欢迎[点赞、收藏、关注]哦~ 微信或QQ打开咸鱼之王小程序，进入答题界面，运行main.py。期间不要动鼠标。可自行更改代码来适配自己的需求~ 可以按照示例图片…...

编程日记 2024/7/10 7:03:49

ChatGPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建技术

在过去几年中，人工智能领域的发展迅猛，尤其是大语言模型的应用，为各行各业带来了前所未有的创新与突破。从ChatGPT-3.5的推出到GPT Store的上线，再到最新的多模态交互ChatGPT-4o，OpenAI不断引领科技潮流，推…...

编程日记 2024/7/10 7:02:47

使用clion刷leetcode

如何优雅的使用clion刷leetcode 安装插件：LeetCode Editor) 插件配置： 这样我们每打开一个项目，就会创建类似的文件我们的项目结构： 我们在题解文件中导入头文件myHeader.h并将新建的文件添加到cmakelists.txt文件，…...

编程日记 2024/7/10 6:59:45

图解HTTP（5、与 HTTP 协作的 Web 服务器 6、HTTP 首部）

5、与 HTTP 协作的 Web 服务器一台 Web 服务器可搭建多个独立域名的 Web 网站，也可作为通信路径上的中转服务器提升传输效率。用单台虚拟主机实现多个域名在相同的 IP 地址下，由于虚拟主机可以寄存多个不同主机名和域名的 Web 网站，因此…...

编程日记 2024/7/10 6:57:43

JS之防抖和节流

防抖 (debounce) 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 ps: 重置普攻，百度翻译要输完停止一定时间后才翻译。没有防抖和节流的缺点： 函数触发…...

编程日记 2024/7/10 6:56:42

Open3D 点云PCA算法配准（粗配准）

目录一、概述 1.1PCA配准的原理 1.2PCA配准的应用二、代码实现三、实现效果 3.1原始点云 3.2配准后点云 3.3变换矩阵一、概述 PCA（Principal Component Analysis，主成分分析）是一种用于降维和特征提取的统计方法。在点云处理中，PCA可以用于点云配准（a…...

编程日记 2024/7/10 6:55:41

FFmpeg 低延迟同屏方案

引言在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口目录第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/12/13 16:45:53

苍穹外卖--缓存菜品

1.问题说明用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路通过Redis来缓存菜品数据，减少数据库查询操作。缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/12/12 17:03:26

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...

编程新知 2025/11/25 4:57:19

ios苹果系统，js 滑动屏幕、锚定无效

现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...

编程新知 2025/12/4 2:37:03

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种）方法描述是否推荐…...

编程新知 2025/12/4 15:47:17