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

JavaWeb—js（3）

news 2025/10/31 19:31:49

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

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/7/16 16:51:12

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...

编程新知 2025/10/30 9:24:58

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/10/26 12:46:24

EtherNet/IP转DeviceNet协议网关详解

一，设备主要功能疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。在自动…...

编程新知 2025/10/29 6:07:55

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/10/28 21:05:15

在 Spring Boot 中使用 JSP

jsp？ 好多年没用了。重新整一下还费了点时间，记录一下。项目结构： pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/10/29 11:20:47