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>
为什么要区分数组和对象?
因为有些方法数组能用,假如你都是按照对象方法进行拷贝的,就会让一些原本能用的方法失效
