JavaScript高级进阶（五）
操作节点属性
设置属性（先找属性再操作）
setAttribute()方法添加指定的属性，并为其赋指定的值
语法：
element.setAttribute(attributename/属性名,attributevalue/属性值)
例:
<style>
.box{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<div></div>
</body>
<script>
var div_ =document.querySelector("div");//找到元素
// 方法1
div_.setAttribute('class','box')//给元素添加了一个类名
</script>
就一个简单的div，背景样式加了个天蓝色，可是我们在body标签内部是没有添加什么属性的，它没有这个样式对应的class属性，如何使这个样式生效？
在js中我们首先找到这个元素，再使用setAttribute方法给它添加了一个值为box的class属性
在后台我们也看到这个属性值加上去了，对应上面的样式也生效了。
div_.style.backgroundColor='red'
在js中我们再次对样式进行操作，发现变红了。
有人说，这我可太清楚了，因为代码从上到下执行！
真的是这样吗？
div_.style.backgroundColor = 'red'; // 先设为红色
div_.setAttribute('class', 'box'); // 再添加类名（skyblue 会覆盖红色）
我们交换js中这两行代码，结果发现
还是红色，没有被覆盖！
我们先回顾一下CSS优先级规则:
内联样式（style 属性） > ID 选择器 > 类/属性/伪类选择器 > 标签选择器。
如果优先级相同，后定义的样式会覆盖前面的样式。
JavaScript 操作的是内联样式：
div_.style.backgroundColor = 'red' 是通过 JS 直接操作元素的 style 属性（内联样式），它的优先级天然高于外部或 <style> 标签中的 CSS 规则（比如 .box 的样式）
所以CSS优先级才是根本原因！
不过这里有一个误区：内联样式一旦设置，除非手动清除或覆盖，否则类样式无法覆盖它。(
!important 可以打破这个规则，如:
.box {
background-color: skyblue !important; /* 强制覆盖内联样式 */
}
)
回到我们之前写的那个例子，还有第二种添加属性的方法:
<style>
.box{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<div></div>
</body>
<script>
var div_ =document.querySelector("div");//找到元素
//方法2
div_.className="box"
</script>
box属性值一样老老实实被添加好了，这种方法作为替代方案，看场景来用，某些常用属性（如 id、class、href）可以直接通过 DOM 对象的属性赋值:
element.id = "newId";
element.className = "active"; // 注意：class 是保留字，需用 className
像img也可以用这两种方法添加src属性:
<body>
< img alt="">
</body>
<script>
var img_ =document.querySelector("img");//找到元素
//方法1 img_.setAttribute('src','./images/11573144197-1_b_1724033544.jpg')
//方法2
img_.src="./images/11573144197-1_b_1724033544.jpg"
</script>
src属性都很完美的添加上去了，这就是设置节点属性这部分。
获取属性
<!-- 获取属性 -->
getAttribute()返回指定属性名的属性值。
语法：
element.getAttribute(attributename);//attributename（必须）：需要获得属性值的属性名称。
就用我们前面写的img的例子:
<body>
< img alt="">
</body>
<script>
var img_ =document.querySelector("img");
img_.src="./images/11573144197-1_b_1724033544.jpg"
</script>
src属性已经设置上了，我们就用getAttribute获取这个属性:
var src_=img_.getAttribute('src')
console.log(src_);
这里也可以直接:var src_=img_.src，都可以拿到完整的路径。
删除属性
removeAttribute()方法删除指定的属性
语法：element.removeAttribute(attributename)//attributename:要删除的属性名称
秉承复用性原则，还是使用我们前面写的img例子:
<body>
< img alt="">
</body>
<script>
var img_ =document.querySelector("img");
img_.src="./images/11573144197-1_b_1724033544.jpg"
</script>
src属性已经设置好了，使用removeAttribute将其删除。
img_.removeAttribute('src')
删除属性连带属性值一起都删除了，如果:
<body>
< img alt="">
</body>
<script>
var img_ =document.querySelector("img");
img_.src="./images/11573144197-1_b_1724033544.jpg"
// img_.removeAttribute('src')
var body_=document.getElementsByTagName('body')[0]
body_.removeChild(img_);
</script>
这样就是直接将img节点删除了。
body中已经什么都没有了，总结想操作属性节点，首先要找到这个节点在进行对应操作。
除了上面这些重要的，还有一些补充:
标准属性操作方法
①element.hasAttribute(name)
作用：检查元素是否具有指定的属性。
返回值：true（存在）或 false（不存在）。
例如:
const div = document.querySelector("div");
console.log(div.hasAttribute("class")); // true 或 false
②element.toggleAttribute(name [, force])
作用：切换属性的存在状态（存在则移除，不存在则添加），
name：属性名。
force（可选）：布尔值，true 表示强制添加，false 表示强制移除。
data-* 自定义属性(推荐)
html:
<div id="user" data-id="123" data-role="admin"></div>
js:
const user = document.querySelector("#user");
// 获取
console.log(user.dataset.id); // "123"
console.log(user.dataset.role); // "admin"
// 设置(直接覆盖或添加)
user.dataset.role = "guest"; // 修改 data-role
user.dataset.status = "active"; // 新增 data-status
// 删除
delete user.dataset.role; // 移除 data-role
操作 class（推荐 classList）
const div = document.querySelector("div");
// 添加类
div.classList.add("active");
// 移除类
div.classList.remove("box");
// 切换类
div.classList.toggle("hidden");
// 检查是否包含类
console.log(div.classList.contains("active")); // true/false
还有一些操作布尔属性什么的就不提了，用到的比较少，好了，这就是操作节点属性这一部分。
相关文章：
JavaScript高级进阶（五）
操作节点属性 设置属性（先找属性再操作） setAttribute()方法添加指定的属性，并为其赋指定的值 语法： element.setAttribute(attributename/属性名,attributevalue/属性值) 例: <style> .box{ width: 200px; height: 200p…...
WPF之TextBlock控件详解
文章目录 1. TextBlock控件介绍2. TextBlock的基本用法2.1 基本语法2.2 在代码中创建TextBlock 3. TextBlock的常用属性3.1 文本内容相关属性3.2 字体相关属性3.3 外观相关属性3.4 布局相关属性 4. TextBlock文本格式化4.1 使用Run元素进行内联格式化4.2 其他内联元素 5. 处理长…...
串口通信协议
什么是串口通信？ 串口通信是将数据在一条数据线上传输。 串口通信的特点是传输线少（相对于并行通信），长距离传输的成本低，但数据的传送控制比并行通信复杂。 常见的串行通信接口包括：USB，RS-…...
9.idea中创建springboot项目
9. idea中创建springboot项目 步骤 1：打开 IntelliJ IDEA 并创建新项目 启动 IntelliJ IDEA。在欢迎界面，点击 New Project（或通过菜单栏 File > New > Project）。 步骤 2：选择 Maven 项目类型 在左侧菜单中…...
详解大语言模型生态系统概念：lama，llama.cpp，HuggingFace 模型 ，GGUF，MLX，lm-studio，ollama这都是什么？
llama，llama.cpp，HuggingFace 模型 ，GGUF，MLX，lm-studio，ollama这些名词的概念给个详细的解释，彼此什么关系？是不是头很晕？ 详解大语言模型生态系统概念 基础模型与架构…...
如何系统学习音视频
学习音视频技术涉及多个领域，包括音频处理、视频处理、编码解码、流媒体传输等。 第一阶段：基础知识准备 目标：掌握音视频学习所需的计算机科学和数学基础。 计算机基础 学习计算机网络基础（TCP/IP、UDP、HTTP、RTSP等协议&#…...
elementui里的el-tabs的内置样式修改失效？
1.问题图 红框里的是组件的内置样式，红框下的是自定义样式 2.分析 2.1scoped vue模板编译器在编译有scoped的stye标签时，会生成对应的postCSS插件，该插件会给每个scoped标记的style标签模块，生成唯一一个对应的 data-v-xxxhash…...
Webshell管理工具的流量特征
目录 一、常见Webshell工具流量特征 1. 中国菜刀（Chopper） 2. 冰蝎（Behinder） 3. 哥斯拉（Godzilla） 4. 蚁剑（AntSword） 5. C99 Shell…...
 Gateway---SpringCloud微服务网关组件)
61.微服务保姆教程 (四) Gateway---SpringCloud微服务网关组件
Gateway—SpringCloud微服务网关组件 一、Spring Cloud Gateway简介 1.为什么要用Gateway？ 在微服务架构中，通常一个系统会被拆分为多个微服务，微服务之间的调用可以用OpenFeign，但面对这么多微服务客户端调用会遇到哪些问题呢？ 每个服务都需要鉴权、限流、跨域访问、权…...
问答：C++如何通过自定义实现移动构造函数和移动赋值运算符来实现rust的唯一所有权？
今天，我就带你深入C++的移动语义，用自定义的移动构造函数和移动赋值运算符，硬核模拟Rust的唯一所有权。不仅有干货代码，还会手把手讲明白，保证你看完就能上手。准备好了吗？咱们这就开干！ 先搞懂Rust的“独家秘籍” Rust的唯一所有权，简单来说，就是一个资源只能有一个…...
MODSIM选型指南：汽车与航空航天企业如何选择仿真平台
1. 引言 在竞争激烈的汽车与航空航天领域，仿真技术已成为产品研发不可或缺的环节。通过在设计阶段验证概念并优化性能，仿真平台能有效缩短开发周期并降低物理样机制作成本。 MODSIM（建模与仿真）作为达索系统3DEXPERIENCE平台的核…...
扣子流程图批量导入飞书多维表格
文章目录 整体结构分步骤进行处理1. 程序代码处理2. 多维表格配置 整体结构 整个代码块结构如下： 首先，我们从其他流程中拿到一个数据列表，通过一个循环体，将每一个部分的内容都通过python代码整理后，使用【插件】的…...
Profinet 转 Modbus_4 网关
一、功能概述 1.1 设备简介 本产品是 Profinet 和 Modbus RTU 网关，使用数据映射方式工作。 本产品在 Profinet 侧作为 Profinet 从站，接西门子 PLC 如 1200 、 1500 、 200Smart 等；在 Modbus RTU 侧做为 RTU 主站或从站&#…...
Webug4.0通关笔记03- 第4关POST注入和第5关过滤注入
目录 第04关 POST型注入 1.源码分析 2.sqlmap注入 （1）bp保存报文 （2）sqlmap渗透 （3）获取flag 第05关 过滤型注入 1.源码分析 2.sqlmap渗透 （1）bp抓包保存报文 ࿰…...
虹科新品 | 汽车通信新突破！PCAN-XL首发上线！
汽车智能化浪潮汹涌 通信技术如何跟上？ 虹科带着支持最新CAN XL标准的 PCAN-XL套件 重磅来袭！ 助力行业快速开启 全新CAN XL标准的测试验证！ 新品登场：不止是升级 虹科PCAN-XL套件 随着汽车智能化进程加速，传…...
GitHub Actions 自动化部署 Azure Container App 全流程指南
一、前言 本文将详细介绍如何通过 GitHub Actions 实现 Azure Container App 的自动化部署流程。当代码推送到 master 分支时，系统将自动完成镜像构建、推送至 ACR 以及应用部署的全过程。以下是完整的配置方案： 二、GitHub Actions 工作流配置 完整 YAML 文件（.github/wo…...
华为L420Qml在wayland环境下崩溃问题
开发环境 操作系统 : kylin v10sp1qt版本 : qt5.15硬件信息 : 华为L420型号 背景 这个问题是在指定机型才出现的,应用同事帮忙将问题与业务抽离出来形成了一个demo //main.cpp#include #include int main(int argc, char *argv[]){qputenv("QT_QPA_PLATFORM", &quo…...
UniApp 小程序嵌套 H5 页面显示隐藏监听实践
UniApp 小程序嵌套 H5 页面显示隐藏监听实践 一、背景介绍 在小程序嵌套 H5 页面的场景中，经常需要监听页面的显示和隐藏状态，以便于处理一些特定的业务逻辑，如暂停/继续定时器、暂停/继续视频播放等。 二、实现方案 1. 页面可见性 API …...
CentOS上搭建 Python 运行环境并使用第三方库
CentOS上搭建 Python 运行环境并使用第三方库 更新 YUM 配置为阿里云镜像安装依赖包下载 Python 源码解压源码包配置和编译安装验证安装创建虚拟环境安装python第三方库编写并执行 Python 脚本 centos7.9上安装python环境 更新 YUM 配置为阿里云镜像 # 备份原有的 yum 配置文…...
黑马Redis（四）
一、发布探店笔记 案例--实现查看发布探店笔记的接口： 映射到对应数据库 BLOG类中存在和对应数据库表不相关的属性，使用TableField注解表示该字段并不在表中，需要在后续进行手动维护 GetMapping("/{id}")public Result queryBlog…...
绿色版的notepad++怎么加入到右键菜单里
复制以下代码保存为 Notepad.reg，修改自己的“Notepad.exe路径”后，双击运行Notepad.reg。 Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\NotePad] "Notepad 打开" "Icon""C:\\Program Files (x86)\\Note…...
)
C++23 std::byteswap：反转字节 (P1272R4)
文章目录 C23 std::byteswap：反转字节 (P1272R4)引言字节序的基本概念大端字节序小端字节序 C23 std::byteswap的基本概念和功能基本概念功能实现示例代码可能的输出 P1272R4提案相关内容提案背景和动机设计考虑函数规范提案修订历史 std::byteswap的使用场景跨平台…...
DevExpressWinForms-TreeList-设置不可编辑
DevExpress TreeList 编辑权限控制：从全局到细粒度设置 在使用 DevExpress TreeList 控件开发数据展示界面时，根据业务需求限制用户编辑行为是常见需求。本文将从全局禁用编辑、列级权限控制、行级动态限制到单元格精准管控，系统讲解 TreeLi…...
ESP32通过MQTT协议上传数据至onenet物联网平台（新版）
文章目录 一、onenet物联网平台操作 二、esp32端代码 三、测试 一、onenet物联网平台操作 首先创建产品： 接着创建设备： 创建物模型： 接着便是计算接入的token： 在自己的产品详情以及设备详情中找到下面的信息： 接着…...
ppt箭头素材图片大全
ppt箭头怎么打出来，ppt箭头设计，ppt箭头制作，ppt箭头图标素材下载: 箭头_模板素材_PPT模板_ppt素材_免抠图片_AiPPTer...
第十六届蓝桥杯 2025 C/C++组 旗帜
目录 题目： 题目描述： 题目链接： 思路： 思路详解： 代码： 代码详解： 题目： 题目描述： 题目链接： P12340 [蓝桥杯 2025 省 AB/Python B 第二场] 旗帜 -…...
Docker容器资源控制--CGroup
目录 一、CGroups的含义 二、CGroup的功能和特点 1、CGroups的主要功能 2、CGroups的特点 三、实训 1、利用CGroups实现CPU资源控制 2、利用CGroups实现内存资源控制 3、利用CGroups实现磁盘I/O控制 一、CGroups的含义 CGroups是Linux内核提供的一 种可以限制单个进程或…...
【开源项目】基于sherpa-onnx的实时语音识别系统 - LiveASR
你是否曾经为语音识别系统的部署和配置而烦恼？今天给大家介绍一个基于sherpa-onnx的实时语音识别系统 - LiveASR，让语音识别变得简单易用！ 项目简介 LiveASR是一个基于sherpa-onnx开发的实时语音识别系统，提供了简单易用的图形界…...
免费超好用的电脑操控局域网内的手机（多台，无线）
使用 第一步 解压QtScrcpy压缩包，并运行QtScrcpy.exe 第二步 2.1 手机开启开发者模式（设置>关于本机>版本信息>连点10下“版本号”） 2.2 开启 USB调试 和 无线调试（设置>开发者选项> USB调试 无线调试…...
vue 优化策略，大白话版本
1. 避免过度使用响应式数据（如冻结大对象） 问题：Vue 默认会给所有数据加上“监控”（响应式），数据变化时会自动更新页面。但如果是超大的对象（比如几万行的表格数据），这个…...
《数学物理方程》——第一章 引入与基本概念
1.1 基本概念和定义 偏微分方程的分类 线性 齐次 非齐次 非线性 拟线性 —— 半线性 完全非线性 1.2 典型方程 1.2.1 波动方程 一维弦自由振动方程： （不考虑弦的重量），即： 一维弦强迫振动方程：&a…...
C++入侵检测与网络攻防之TFTP和NTP报文的识别
目录 1.tftp客户端的使用 2.tftp协议分析以及特征提取 3.tftp报文识别1 4.tftp报文识别2 5.复习 6.ntp协议原理 7.ntpdate同步时间和抓包 8.ntp协议解析 9.ntp报文识别实现 10.bug追踪系统 1.tftp客户端的使用 2.tftp协议分析以及特征提取 1 tftp的安装 sudo apt…...
技术赋能与模式重构：开源AI大模型驱动下的“一盘货”渠道革命——基于美的案例与S2B2C生态融合的实证研究
摘要：在全渠道零售时代，渠道效率与库存成本矛盾成为制约企业增长的核心痛点。本文以美的集团“一盘货”模式为实践样本，结合开源AI大模型、AI智能名片、S2B2C商城小程序源码三大技术要素，构建“技术中台供应链协同渠道赋能”的三维…...
如何利用Rust提升Linux服务器效率（详细操作指南）
Rust是一个专注于性能、安全和并发的系统编程语言，非常适合用来优化和提升Linux服务器的运行效率。下面是一些具体方法和建议，告诉你如何利用Rust来提升Linux服务器的效率： 一、替换或重写性能瓶颈模块 重写Bash/Python脚本为Rust Rust编译…...
【工具】Elasticsearch：强大的开源搜索与分析引擎
什么是Elasticsearch？ Elasticsearch是一个开源的分布式搜索和分析引擎，基于Apache Lucene构建。它能够近乎实时地存储、搜索和分析大量数据。最初由Shay Banon开发并于2010年发布，Elasticsearch如今已成为最受欢迎的企业搜索引擎之一。 核…...
neo4j基础操作：命令行增删改查
目录 一，Neo4j的增 1.1.新增节点 1.2.新增关系 1.2.1创建节点时，创建关系 1.2.2在已有的节点上，创建关系 二，Neo4j的删除 2.1删除节点 2.1.1无关系的节点删除 2.1.2 有关系的节点删除 三，节点修改 3.1 给节点…...
技术白皮书：Oracle GoldenGate 优势
本文为技术白皮书Oracle GoldenGate 优势的翻译及阅读笔记。以下注释中GoldenGate为OGG。 副标题为：Oracle 数据库的变更数据捕获 (CDC) 技术比较。版本为July, 2021, Version 2.1。 Oracle GoldenGate 被客户和分析师公认为功能最齐全、性能最高、最值得信赖的数…...
搜索引擎中的检索模型（布尔模型、向量空间模型、概率模型、语言模型）
搜索引擎中的检索模型 搜索引擎中的检索模型是决定查询与文档相关性的重要机制。以下是几种常见的检索模型，包括其原理、代码案例、使用方式和优缺点。 1. 布尔模型（Boolean Model） 原理 布尔模型基于布尔逻辑（AND, OR, NOT&…...
【SpringBoot】基于MybatisPlus的博客管理系统（1）
1.准备工作 1.1数据库 -- 建表SQL create database if not exists java_blog_spring charset utf8mb4;use java_blog_spring; -- 用户表 DROP TABLE IF EXISTS java_blog_spring.user_info; CREATE TABLE java_blog_spring.user_info(id INT NOT NULL AUTO_INCREMENT,user_na…...
聊聊Spring AI Alibaba的PlantUMLGenerator
序 本文主要研究一下Spring AI Alibaba的PlantUMLGenerator DiagramGenerator spring-ai-alibaba-graph/spring-ai-alibaba-graph-core/src/main/java/com/alibaba/cloud/ai/graph/DiagramGenerator.java public abstract class DiagramGenerator {public enum CallStyle {…...
借助Spring AI实现智能体代理模式：从理论到实践
借助Spring AI实现智能体代理模式：从理论到实践 前言 在人工智能领域，大语言模型（LLM）的应用愈发广泛，如何高效构建基于LLM的系统成为众多开发者关注的焦点。Anthropic的研究报告《构建高效代理》为我们提供了新的思…...
【图片识别成表格】批量图片识别成excel表格，批量识别图片区域文字保存到excel表格，基于WPF和腾讯OCR的识别方案
应用场景 该项目适用于需要从大量图片中提取文字信息的场景，例如： 发票识别：批量扫描发票并提取金额、日期、发票号等信息。证件识别：批量处理身份证、护照等证件，提取姓名、身份证号等信息。文档数字化：将纸质文档扫描成图片后，批量提取…...
使用Qt QAxObject解决Visual Fox Pro数据库乱码问题
文章目录 使用Qt QAxObject解决Visual Fox Pro数据库乱码问题一、问题背景：ODBC读取DBF文件的编码困境二、核心方案：通过QAxObject调用ADO操作DBF1. 技术选型：为什么选择ADO？2. 核心代码解析：QueryDataByAdodb函数3. 连…...
Manus AI多语言手写识别技术全解析：从模型架构到实战部署
简介 Manus AI作为当前多语言手写识别领域的领军技术，其核心创新在于融合三维卷积网络、动态特征融合引擎和混合解码系统，实现了对112种语言的98.7%识别准确率和8ms延迟的实时处理能力。本文将深入探讨Manus AI的架构设计、特征提取方法、数据预处理策略…...
MYSQL三大日志、隔离级别（MVCC+锁机制实现）
MySQL三大日志 Undo Log（回滚日志） 作用 事务回滚时恢复数据到修改前的状态。 支持 MVCC，为读操作提供历史版本数据。 存储 存放在 undo tablespace 中，通过回滚段管理。 格式 undo log 格式都有一个 roll_point…...
聚焦智能体未来，领驭科技在微软创想未来峰会大放异彩
2025年4月23日，微软创想未来峰会在北京中关村国际创新中心盛大举行。作为微软中国南区核心合作伙伴及HKCSP 1T首批授权云服务商，深圳领驭科技有限公司受邀参会，携瀚鹏工业AI应用解决方案亮相峰会，与全球AI领袖及行业精英共话智能体…...
043-代码味道-循环依赖
代码味道-循环依赖 代码异味之循环依赖：定义、特征与解决方案 一、循环依赖的定义与特征 循环依赖（Cyclic Dependencies）是指两个或多个软件模块之间形成相互依赖的闭环关系。这种代码味道会导致： 编译/构建困难：模…...
技术沙龙：Mybatis中resultMap使用案例分享
目录 一、联表查询和单表查询优劣分析 1.1 联表查询的优缺点 优点： 缺点： 1.2 单表查询的优缺点 优点： 缺点： 1.3 适用场景建议 联表查询更适合： 单表查询更适合： 1.4 优化建议 1.5 总结 …...
Linux基础篇、第一章_01_3安装虚拟机手动安装部署Ubuntu22.04服务器
题目安装部署Ubuntu22.04服务器 版本号: 1.0,0 作者: 老王要学习 日期: 2025.04.29 适用环境: Ubuntu22.04 文档说明 本文档聚焦 Ubuntu 22.04 服务器的安装部署，详细介绍了从虚拟机创建、系统安装、基础配置（如更新国内源、安装常用软件、修改静态 IP、…...
dma_request_slave_channel_compat 与 dma_request_channel 的区别
1.代码示例 dma_request_channel #define dma_request_channel(mask, x, y) \__dma_request_channel(&(mask), x, y, NULL)struct dma_chan *__dma_request_channel(const dma_cap_mask_t *mask,dma_filter_fn fn, void *fn_param,struct device_node *np) {struct dma_d…...