Html5新特性_js 给元素自定义属性_json 详解

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

文章目录

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>