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

Html5新特性_js 给元素自定义属性_json 详解_浅克隆与深克隆

news 来源：原创 2025/7/18 23:06:51

文章目录

1. html5新特性
2.用 js 给元素自定义属性
3.json
- 3.1 json与普通对象的区别
- 3.2 json对象与 js对象的转化
4.浅克隆和深克隆

1. html5新特性

html5中引入了新的特性（新的标签），下面的新标签是新的结构标签，不过不太常用

header 头部
footer 页尾部
nav 导航内容
section 文章中的一块内容
aside 侧边框

接下来，介绍input新标签

通过type属性控制，输入框内容，通过value控制默认内容,maxlength 是最长位数

 <!-- text 文本类型 --><input type="text"><br><!-- color 调色板  --><input type="color"><br><!-- date 日期 --><input type="date" value="2025-05-30"><br><!-- time 时间 --><input type="time" value="13:30"><br><!-- search 搜索 --><input type="search"><br><!-- range 进度条 --><input type="range"><br><!-- tel 手机号 --><input type="tel" maxlength="11"><br><!-- file 文件 --><input type="file">

在这里插入图片描述

2.用 js 给元素自定义属性

注意这个自定义属性,不是 css 中的属性,是指一个对象的设置的新的变量,和 css 中属性不是一个概念
下面 dom 的意思是我们通过 dom 下方法取得某个具体对象的统一写法

html5 中新引入了 dateset 的方法,Attribute 的写法早已有之

设置属性
dom.dateset.属性名=‘属性值’
dom.setAttribute(‘属性名’,‘属性值’)
读取属性
dom.dateset.属性名
dom.getAttribute(“属性名”)

实例如下:
操作 DOM 元素，必须先用 JS 获取它

<!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>.box{width: 100px;height: 100px;border: 3px solid black;}</style>
</head>
<body><div class="box">box</div><script>var box=document.getElementsByClassName("box")[0];//新建属性box.dataset.width="500";//取得元素属性console.log(box.dataset.width);</script>
</body></html>

输出结果:500

3.json

3.1 json与普通对象的区别

JSON 对象 vs 普通 JavaScript 对象的区别:
在这里插入图片描述
简单来说,json 会把普通对象变为字符串,方便进行数据交换.但是普通对象中的函数,未定义的东西,json 是不管的.

json 对象的定义:

// json对象
var 名字 = '{"属性名"：“属性值”}'
//注意：单引包双引 或者 双引包单引

3.2 json对象与 js对象的转化

// 将json对象如何转成js对象
var newObj1 = JSON.parse(obj1);
// 将js对象转成json对象
var newObj = JSON.stringify(obj);

parse:英文含义为语法分析

实例如下:

<script>
// 1.声明一个新的 js 对象
var obj = {
name:'Tom',
age:11,
telephone:"123124"
}
//2.将 js 对象转换为 json 对象
var newobj=JSON.stringify(obj);
console.log(obj);
console.log(newobj);
</script>

在这里插入图片描述

4.浅克隆和深克隆

浅克隆是指,那些对象中的引用对象,例如(对象,数组),会直接修改他们原本的值,不是真正意义的另一个,而是共用一个地址.

手动模拟浅克隆:

<!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><script>const original = {name: "Alice",age: 25,info: {   //information 的简写city: "Beijing"}};const shallowCopy = {};for (let key in original) {shallowCopy[key] = original[key]; // 不过滤，直接复制}shallowCopy.info.city="xian";console.log(original.info.city);console.log(shallowCopy.info.city);</script>
</body></html>

在这里插入图片描述
深克隆讲解:

深克隆指的是：不仅复制对象的第一层属性，还会递归地复制所有嵌套的对象和数组，确保新对象和原对象之间完全独立、互不影响。

手动递归实现深克隆:

 <script>const original = {name: "Alice",age: 25,info: {   //information 的简写city: "Beijing"}};function deepClone(obj) {if (typeof obj !== 'object') return obj;const clone = Array.isArray(obj) ? [] : {};//判断是对象还是数组for (let key in obj) {clone[key] = deepClone(obj[key]); }return clone;}var deep=deepClone(original);deep.info.city="xian";console.log(original.info.city);console.log(deep.info.city);</script>

为什么要区分数组和对象?
因为有些方法数组能用,假如你都是按照对象方法进行拷贝的,就会让一些原本能用的方法失效
在这里插入图片描述

Html5新特性_js 给元素自定义属性_json 详解_浅克隆与深克隆

文章目录 1. html5新特性2.用 js 给元素自定义属性3.json3.1 json与普通对象的区别3.2 json对象与 js对象的转化 4.浅克隆和深克隆 1. html5新特性 html5中引入了新的特性（新的标签），下面的新标签是新的结构标签，不过不太常用 h…...

编程日记 2025/7/18 23:06:51

一般纯软工程学习路径

基础阶段一：基本熟悉工具链代码托管流程和配置代码托管基本 1. 成见和管理代码库（组） 2. 成员配置和权限配置代码迁移 1. 手工迁移 2. 脚本自动化迁移代码提交 1. SSH key配置 2. 代码提交commit message 管理需求单 MR合并请求 1. 合并请…...

编程日记 2025/7/13 1:30:05

ES6基础特性

1.定时器 ——延时定时器 setTimeout（function（）>{ },2000） ——间隔执行定时器 setInterval（function（）>{ },2000） *定时器方法都返回唯一标识编号id&…...

编程日记 2025/7/18 23:00:04

SSTI记录

SSTI(Server-Side Template Injection，服务器段模板注入) 当前使用的一些框架，如python的flask、php的tp、java的spring，都采用成熟的MVC模式，用户的输入会先进入到Controller控制器，然后根据请求的类型和请求的指令发…...

编程日记 2025/7/18 7:09:49

Go语言爬虫系列教程（一）爬虫基础入门

Go爬虫基础入门 1. 网络爬虫概念介绍 1.1 什么是网络爬虫网络爬虫（Web Crawler），又称网页蜘蛛、网络机器人，是一种按照一定规则自动抓取互联网信息的程序或脚本。其核心功能是模拟人类浏览网页的行为，通过发送网络…...

编程日记 2025/7/18 15:07:03

c/c++爬虫总结

GitHub 开源 C/C 网页爬虫探究：协议、实现与测试网页爬虫，作为一种自动化获取网络信息的强大工具，在搜索引擎、数据挖掘、市场分析等领域扮演着至关重要的角色。对于希望深入理解网络工作原理和数据提取技术的 C/C 开发者，尤其是…...

编程日记 2025/7/18 22:56:35

【HarmonyOS 5】鸿蒙碰一碰分享功能开发指南

【HarmonyOS 5】鸿蒙碰一碰分享功能开发指南一、前言碰一碰分享的定义在 HarmonyOS NEXT 系统中，华为分享推出的碰一碰分享功能，为用户带来了便捷高效的跨端分享体验。开发者通过简单的代码实现，就能调用系统 API 拉起分享卡片模板&…...

编程日记 2025/7/18 22:49:02

vue H5解决安卓手机软键盘弹出,页面高度被顶起

开发中安卓机上遇到的软键盘弹出导致布局问题直接上代码_ 在这里插入代码片 <div class"container"><div class"appContainer" :style"{height:isKeyboardOpen? Heights :inherit}"><p class"name"><!-- 绑定…...

编程日记 2025/7/14 19:19:29

【pypi镜像源】使用devpi实现python镜像源代理（缓存加速，私有仓库，版本控制）

【pypi镜像源】使用devpi实现python镜像源代理（缓存加速，私有仓库，版本控制） 文章目录 1、背景与目标2、devpi-server 服务端搭建3、devpi 镜像源使用 1、背景与目标背景1（访问速度优化）： 直…...

编程日记 2025/7/18 4:47:21

Spring Bean有哪几种配置方式？

大家好，我是锋哥。今天分享关于【Spring Bean有哪几种配置方式？】面试题。希望对大家有帮助； Spring Bean有哪几种配置方式？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Spring Bean的配置方式主要有三种&#xff…...

编程日记 2025/7/18 22:57:25

无人机信号线被电磁干扰导致停机

问题描述： 无人机飞控和电调之间使用PWM信号控制时候，无人机可以正常起飞，但是在空中悬停的时候会出现某一个电机停机，经排查电调没有启动过流过压等保护，定位到电调和飞控之间的信号线被干扰问题。信号线被干扰&am…...

编程日记 2025/7/14 12:37:58

RWA开发全解析：技术架构、合规路径与未来趋势

RWA开发全解析：技术架构、合规路径与未来趋势 ——2025年真实世界资产代币化的创新逻辑与实践指南一、RWA的核心定义与爆发逻辑 1. 什么是RWA？ RWA（Real World Asset Tokenization）是通过区块链技术将现实资产（房地…...

编程日记 2025/7/18 16:43:05

消息队列作用及RocketMQ详解（1）

目录 1 什么是消息队列 2 为什么要使用消息队列 2.1 异步处理 2.2 解耦 2.3 削峰填谷 3. 如何选择消息队列？ 4. RocketMQ 4.1 生产者 4.2 消费者 4.3 主题 4.4 NameSever 4.5 Broker 5. 生产者发送消息 5.1 普通消息发送 5.1.1 同步发送 5.1.2 异步发送 5…...

编程日记 2025/7/18 23:02:12

DICOM 网络服务实现：医学影像传输与管理的技术实践

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C++, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C++、C#等开发语言，熟悉Java常用开发技术，能熟练应用常用数据库SQL server,Oracle,mysql,postgresql等进行开发应用…...

编程日记 2025/7/15 4:35:09

恰到好处TDR

了解我的人都知道我喜欢那些从 1 到 10 到 11 的东西。对于那里的年轻人，参见 Spinal Tap，1984 年。但是有没有把它调得太高这样的事情呢？我收到并回答了很多关于使用时域反射仪 （TDR） 进行测量的问题。我需要多少带宽…...

编程日记 2025/7/18 22:49:02

kubernetes服务自动伸缩-VPA

实验环境安装好k8s集群一、准备工作 1、部署Metrics Server VPA 依赖 Metrics Server 来获取 Pod 的资源使用数据。首先需要部署 Metrics Server 下载地址（需要连接VPN）：wget https://github.com/kubernetes-sigs/metrics-server/relea…...

编程日记 2025/7/18 22:58:19

目录 1.时间戳1.1 Unix时间戳1.2 UTC/GMT1.3 时间戳转换**1.** time_t time(time_t*)**2.** struct tm* gmtime(const time_t*)**3.** struct tm* localtime(const time_t*)**4.** time_t mktime(struct tm*)**5.** char* ctime(const time_t*)**6.** char* asctime(const stru…...

编程日记 2025/7/18 22:49:59

OSCP - Hack The Box - Sau

主要知识点 CVE-2023-27163漏洞利用systemd提权具体步骤执行nmap扫描，可以先看一下55555端口 Nmap scan report for 10.10.11.224 Host is up (0.58s latency). Not shown: 65531 closed tcp ports (reset) PORT STATE SERVICE VERSION 22/tcp o…...

编程日记 2025/7/18 22:54:44

C++色彩博弈的史诗：红黑树

文章目录 1.红黑树的概念2.红黑树的结构3.红黑树的插入4.红黑树的删除5.红黑树与AVL树的比较6.红黑树的验证希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力！ 红黑树是一种自平衡二叉查找树，每个节点都带有颜色属性，颜色或为…...

编程日记 2025/7/17 23:47:57

14.three官方示例+编辑器+AI快速学习webgl_buffergeometry_instancing_interleaved

本实例主要讲解内容这个Three.js示例展示了如何结合使用索引几何体、GPU实例化和交错缓冲区来高效渲染大量相同模型的不同实例。通过这种技术组合，我们可以在保持较低内存占用的同时渲染数千个独立变换的对象。核心技术包括： 索引几何体的实例化渲染…...

编程日记 2025/7/18 22:49:58

「华为」人形机器人赛道投资首秀！

温馨提示：运营团队2025年最新原创报告（共210页） —— 正文： 近日，【华为】完成具身智能赛道投资首秀，继续加码人形机器人赛道布局。 2025年3月31日，具身智能机器人头部创企【千寻智能&#x…...

编程日记 2025/7/18 1:48:47

GitHub 趋势日报 (2025年05月11日)

本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1harry0703/MoneyPrinterTurbo利用ai大模型，一键生成高清短视频使用…...

编程日记 2025/7/18 22:52:41

MySQL查询优化100条军规

概述以下是MySQL查询优化的关键军规，分为不同类别，帮助您系统化提升数据库性能资料已经分类整理好，喜欢的朋友自取：https://pan.quark.cn/s/f52968c518d3 一、索引优化为WHERE、JOIN、ORDER BY字段建索引联合索引遵循最左前缀…...

编程日记 2025/7/18 10:14:53

WEBSTORM前端 —— 第3章：移动 Web —— 第1节：平面转换、渐变

目录一.平面转换二.平面转换 – 平移 ①属性 ②取值 ③技巧三.平移实现居中效果四.案例——双开门效果五.平面转换 – 旋转 ①属性 ②技巧六.平面转换 – 改变转换原点 ①属性 ②取值七.案例-时钟八.平面转换 – 多重转换九.平面转换 – 缩放 ①属性 …...

编程日记 2025/7/18 8:58:09

1.10-数据传输格式

1.10-数据传输格式在对网站进行渗透测试时，使用目标服务器规定的数据传输格式来进行 payload 测试非常关键如果不按规定格式发送数据，服务器可能直接拒绝请求或返回错误响应，比如： 接口要求 JSON 格式，而你用的是…...

编程日记 2025/7/18 19:48:05

Python制作Dashboard【待续】

运行环境：jupyter notebook (python 3.12.7)...

编程日记 2025/6/29 4:59:04

物理：海市蜃楼是宇宙背景辐射吗？

宇宙背景辐射（特别是宇宙微波背景辐射，CMB）与海市蜃楼是两种完全不同的现象，它们的物理机制、来源和科学意义截然不同。以下是详细的解释： 1. 宇宙微波背景辐射（CMB）的本质起源：CMB是大爆炸理论的关键证据之一。它形成于宇宙诞生后约38万年（即“最后散射时期”），当…...

编程日记 2025/7/17 13:29:14

联想 SR550 服务器，配置 RAID 5教程！

今天的任务，是帮客户的一台联想Lenovo thinksystem x SR550 服务器，配置RAID 5，并安装windows server 2019操作系统。那么依然是按照我的个人传统，顺便做一个教程，分享给有需要的粉丝们。第一步，服务器开机…...

编程日记 2025/7/16 21:53:23

Docker-配置私有仓库（Harbor）

配置私有仓库（Harbor） 一、环境准备安装 Docker 三、安装docker-compose四、准备Harbor五、配置证书六、部署配置Harbor七、配置启动服务八、定制本地仓库九、测试本地仓库 Harbor(港湾)，是一个用于存储和分发 Docker 镜像的企业级 Regi…...

编程日记 2025/7/14 17:11:40

1.5 连续性与导数

一、连续性的底层逻辑（前因） 为什么需要研究连续性？ 数学家在研究函数图像时发现两类现象：有些函数能用一笔画完不断开（如抛物线），有些则会出现"断崖"“跳跃"或"无底洞”&a…...

编程日记 2025/7/18 23:04:49

Day22打卡-复习

复习日仔细回顾一下之前21天的内容，没跟上进度的同学补一下进度。作业： 自行学习参考如何使用kaggle平台，写下使用注意点，并对下述比赛提交代码泰坦尼克号人员生还预测https://www.kaggle.com/competitions/titanic/overview K…...

编程日记 2025/7/18 22:54:44

配置Hadoop集群环境准备

（一）Hadoop的运行模式一共有三种： 本地运行。伪分布式完全分布式 （二）Hadoop的完全分布式运行要模拟这个功能，我们需要做好如下的准备。 1）准备3台客户机（关闭防火墙、静态IP、…...

编程日记 2025/7/18 22:55:42

HTTPS全解析：从证书签发到TLS握手优化

HTTPS（超文本传输安全协议本质上是HTTP的安全版本。标准的HTTP协议仅规范了客户端与服务器之间的通信格式，但所有数据传输都是明文的，容易被中间人窃听和篡改。HTTPS通过加密传输数据解决了这一安全问题。 HTTPS可以理解为"HTTPTLS/SS…...

编程日记 2025/7/14 8:00:34

#将一个 .c 文件转变为可直接运行的文件过程及原理

将一个 .c 文件（C语言源代码）转变为可直接运行的可执行文件，涉及从源代码到机器码的编译和链接过程。以下是详细的过程与原理，分为步骤说明： 一、总体流程 .c 文件到可执行文件的过程通常包括以下几个阶段&#xff1a…...

编程日记 2025/7/18 8:01:57

【软件学习】GeneMiner 2：系统发育基因组学的一体化全流程分析工具

【软件学习】GeneMiner 2—— 系统发育基因组学的一体化全流程分析工具文章目录【软件学习】GeneMiner 2—— 系统发育基因组学的一体化全流程分析工具前言一、软件了解二、软件安装三、软件使用示例演示3.1 快速掌握使用方法3.2 获取质体基因组和质体基因3.3 单拷贝基因建树…...

编程日记 2025/7/14 4:55:55

聊一聊AI对接口测试的潜在影响有哪些？

目录一、自动化测试用例生成二、缺陷预测与根因分析三、自适应测试维护四、实时监控与自适应优化五、性能与安全测试增强六、测试结果分析与报告七、持续测试与DevOps集成八、挑战与局限性九、未来趋势使用AI可以自动化测试用例生成、异常检测、结果分析…...

编程日记 2025/7/18 1:31:30

wordcount在mapreduce的例子

1.启动集群 2.创建项目项目结构为： 3.pom.xml文件为 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://mave…...

编程日记 2025/7/17 19:58:15

CSS3 遮罩

在网页设计中，我们经常需要实现一些特殊的视觉效果来增强用户体验。CSS3 遮罩（mask）允许我们通过控制元素的可见区域来创建各种精美的视觉效果。本文将带你全面了解 CSS3 遮罩的功能和应用。什么是 CSS3 遮罩？ CSS3 遮罩是一种…...

编程日记 2025/7/17 23:47:57

HTTP协议解析：Session/Cookie机制与HTTPS加密体系的技术演进(一)

一.HTTP协议我们上篇文章已经提到了对于自定义协议的序列化与反序列化。那么有没有什么比较成熟的，大佬们写的应用层协议，供我们参考使用呢?HTTP(超文本传输协议)就是其中之一。在互联网世界中， HTTP（HyperText Transfer Prot…...

编程日记 2025/7/18 18:38:31

Matlab 234-锂电池充放电仿真

1、内容简介 Matlab 234-锂电池充放电仿真可以交流、咨询、答疑 2、内容说明略锂离子电池已经广泛应用于我国目前电子产品市场，当下手机市场和新能源市场对于锂离子电池的大量需求，推动了锂离子电池的发展，我国已经成为世界上锂离子电池…...

编程日记 2025/7/14 23:20:51

std::move 和 std::forward

关联点都是执行转换(cast)的函数（函数模板），不产生任何可执行代码。且都可以把实参转换成右值。 std::move无条件将实参（const除外 ）转换成右值引用，std::forward 条件返回右值引用 _EXPORT_STD template…...

编程日记 2025/7/16 16:37:26

工业协议跨界实录：零基础玩转PROFINET转EtherCAT主站智能网关

工业自动化领域的金字塔就是工业通信行业，用的最多的便是协议转换模块，通俗来说，网关就像一个“语言翻译器”，能把一种通信语言转换成另一种，满足实际通信需求，还能保护投资。PROFINET 转EtherCAT 网关WL-P…...

编程日记 2025/7/18 9:12:48

开源链动2+1模式AI智能名片S2B2C商城小程序赋能新微商服务能力升级研究

摘要：本文聚焦新微商服务能力升级路径，探讨开源链动21模式、AI智能名片与S2B2C商城小程序在重构培训体系、激励机制及用户服务中的协同作用。研究显示，新微商通过“技术赋能-机制创新-服务深化”三维变革，将传统微商的“产品压货”…...

编程日记 2025/7/17 4:14:35

vue3配置element-ui的使用

今天阐述一下如何在vue中进行配置使用element-ui； 一，配置下载Element 1.首页在电脑上下载好vue，以及npm，可以去相关的官方进行下载。 2.进行配置命令 npm install element-plus --save如报错： npm error code ERE…...

编程日记 2025/7/18 13:13:00

39-绘制渐变的文字

39-绘制渐变的文字_哔哩哔哩_bilibili39-绘制渐变的文字是一次性学会 Canvas 动画绘图（核心精讲50个案例）2023最新教程的第40集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibi…...

编程日记 2025/7/17 21:41:00

HBase进阶之路：从原理到实战的深度探索

目录一、HBase 核心概念再梳理 1.1 RowKey 1.2 Column Family 1.3 Region 二、架构与运行机制剖析 2.1 架构组件详解 2.1.1 Client 2.1.2 Zookeeper 2.1.3 Master 2.1.4 RegionServer 2.1.5 HDFS 2.2 数据读写流程深度解析 2.2.1 数据写入流程 2.2.2 数据读取流…...

编程日记 2025/7/16 12:24:41

使用 AddressSanitizer 检测栈内存越界错误

一、概述在 C/C 编程中，栈内存越界是一种常见而危险的内存错误，通常发生在局部变量数组被访问时索引越界。由于栈空间的结构特点，越界写入可能覆盖返回地址或其他局部变量，导致不可预测的行为甚至程序崩溃。传统的调试手段难以定…...

编程日记 2025/7/18 12:32:21

【技巧】离线安装docker镜像的方法

回到目录【技巧】离线安装docker镜像的方法 0. 为什么需要离线安装？ 第一、由于docker hub被墙，所以拉取镜像需要配置国内镜像源第二、有一些特殊行业服务器无法接入互联网，需要手工安装镜像 1. 可以正常拉取镜像服务器操作服务器…...

编程日记 2025/7/13 8:53:10

vue实现与后台springboot传递数据【传值/取值 Axios 】

vue实现与后台springboot传递数据【传值/取值】提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每…...

编程日记 2025/7/14 1:36:39

Git日志信息

Git日志信息 1. log log 命令用于查看 git 的各种日志信息，在使用 log 后，git 会进入 vim 模式，此时退出日志模式需要按下 q 键。可以通过小箭头来浏览未显示出来的内容。 1.1 查看日志信息 git log git log --prettyoneline #美观输出日…...

编程日记 2025/7/13 20:17:52