JavaScript DOM操作与事件基础-优快云博客

本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/118939914

这篇博客主要介绍了JavaScript中的简单类型与复杂类型，包括栈和堆的区别，以及简单类型和复杂类型传参的原理。接着讲解了API和Web API的概念，并深入探讨了DOM的基本操作，如获取元素、事件基础、元素内容和属性的修改。还涵盖了H5自定义属性的使用，以及通过DOM实现的排他算法、全选反选等实际应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型

string、number、Boolean、undefined、null

引用类型：复杂数据类型，在存储变量中存储的仅仅是地址（引用），因此叫做引用数据类型

通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 简单数据类型 null 返回的是一个空的对象 object
			var timer = null;
			console.log(typeof timer); // object
			// 如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给null
			// 1.简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
			// 2.复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
		</script>
	</head>
	<body>
	</body>
</html>

栈和堆

栈堆空间分配区别：

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面
堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收

复杂数据类型存放到堆里面

注意：JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言

简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量

function fn(a) {
	a++;
	console.log(a);
}
var x = 10;
fn(x);
console.log(x);

复杂类型传参

函数的形参也可以看做时一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给形参，形参和实参其实保存的是同一个地址，所以操作的是同一个对象

function Person(name) {
    this.name = name;
}
function f1(x) {	// x = p
    console.log(x.name);
    x.name = '张学友';
    console.log(x.name);
}
var p = new Person('刘德华');
console.log(p.name);
f1(p);
console.log(p.name);

API 和 Web API

API（Application Programming Interface，应用程序编程接口），是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

MDN详细API：https://developer.mozilla.org/zh-CN/docs/Web/API

DOM

简介

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

DOM树

在这里插入图片描述

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中的所有标签都是元素，DOM中使用element表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看做是对象

获取元素

获取页面中的元素可以使用以下几种方式

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

根据ID获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="time">2019-9-9</div>
		<script type="text/javascript">
			// 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
			// 2.get 获得 element 元素 by 通过
			// 3.参数id是大小写敏感的字符串
			// 4.返回的是一个元素对象
			var timer = document.getElementById('time');
			console.log(timer);
			console.log(typeof timer); // object
			// 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
			console.dir(timer);
		</script>
	</body>
</html>

根据标签名获取

根据getElementsByTagName()方法可以返回带有指定签名的对象的集合

document.getElementsByTagName('标签名');

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
得到元素对象是动态的

还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>最带琴女36E</li>
			<li>最带琴女37E</li>
			<li>最带琴女38E</li>
			<li>最带琴女39E</li>
			<li>最带琴女40E</li>
		</ul>
		
		<ol>
			<li>大大大</li>
			<li>大大大</li>
			<li>大大大</li>
			<li>大大大</li>
			<li>大大大</li>
		</ol>
		<script type="text/javascript">
			// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
			var lis = document.getElementsByTagName('li');
			console.log(lis);
			console.log(lis[0]);
			// 2.我们想要依次打印里面的元素对象，可以采取遍历的方式
			for (var i = 0; i < lis.length; i++) {
				console.log(lis[i]);
			}
			// 3.如果页面中只有一个li 返回的还是伪数组的形式
			// 4.如果页面中没有这个元素 返回的是空的伪数组的形式
			
			// 5.element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
			var ol = document.getElementsByTagName('ol'); // [ol]
			console.log(ol[0].getElementsByTagName('li'));
		</script>
	</body>
</html>

通过HTML5新增的方法获取

document.getElementsByClassName('类名'); //  根据类名返回元素对象集合

document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

document.querySelectorAll('选择器'); // 根据指定选择器返回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<ul>
				<li id="nav">首页</li>
				<li>产品</li>
			</ul>
		</div>
		<script type="text/javascript">
			// 1.getElementsByClassName 根据类名获得某些元素集合
			var boxs = document.getElementsByClassName('box');
			console.log(boxs);
			// 2.querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
			var firstBox = document.querySelector('.box');
			console.log(firstBox);
			var nav = document.querySelector('#nav');
			console.log(nav);
			var li = document.querySelector('li');
			console.log(li);
			// 3.querySelectorAll()返回指定选择器的所有元素对象集合
			var allBox = document.querySelectorAll('.box');
			console.log(allBox);
			var lis = document.querySelectorAll('li');
			console.log(lis);
		</script>
	</body>
</html>

获取特殊元素

获取body元素

document.body // 返回body元素对象

获取HTML元素

document.documentElement // 返回html元素对象

事件基础

事件三要素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">阿波</button>
		<script type="text/javascript">
			// 点击一个按钮，弹出对话框
			// 1.事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
			// 事件源 事件被触发的对象 谁 在这个案例里是按钮
			var btn = document.getElementById('btn');
			// 事件类型 如何触发 什么事件 比如鼠标点击（onclick） 还是鼠标经过 还是键盘按下
			// 事件处理程序 通过一个函数赋值的方式 完成
			btn.onclick = function() {
				alert('帅！');
			}
		</script>
	</body>
</html>

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div>123</div>
		<script type="text/javascript">
			// 执行事件步骤
			// 点击div 控制台输出 我被选中了
			// 1.获取事件源
			var div = document.querySelector('div');
			// 2.绑定事件 注册事件1
			// div.onclick
			// 3.添加事件处理程序
			div.onclick = function() {
				console.log('我被选中了');
			}
		</script>
	</head>
	<body>
	</body>
</html>

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

JavaScript的DOM操作可以改变网页的内容、结构、样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

改变元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div,
			p {
				width: 300px;
				height: 30px;
				line-height: 30px;
				color: #fff;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<button>显示当前系统时间</button>
		<div>某个时间</div>
		<p>1123</p>
		<script type="text/javascript">
			// 当我们点击了按钮，div里面的文字会发生变化
			// 1.获取元素
			var btn = document.querySelector('button');
			var div = document.querySelector('div');
			// 2.注册事件
			btn.onclick = function() {
				// div.innerText = '2077-7-7';
				div.innerText = getDate();
			}
			
			function getDate() {
				var date = new Date();
				// 我们写一个2021年 7月 3日 星期六
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var dates = date.getDate();
				var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
				var day = date.getDay();
				return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
			}
			// 我们元素可以不用添加事件
			var p = document.querySelector('p');
			p.innerText = getDate(); // 2021年 7月 3日 星期六
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div></div>
		<p>
			我是文字
			<span>123</span>
		</p>
		<script type="text/javascript">
			// innerText 和 innerHTML的区别
			// 1.innerText 不识别html标签 非标准
			var div = document.querySelector('div');
			// div.innerText = '<strong>今天是：</strong> 2019';
			// 2.innerHTML 识别html标签 W3C标准
			div.innerHTML = '<strong>今天是：</strong> 2019';
			// 这两个属性是可续写的 可以获取元素里面的内容
			var p = document.querySelector('p');
			console.log(p.innerText);
			console.log(p.innerHTML);
		</script>
	</body>
</html>

常用元素的属性操作

1.innerText\innerHTML 改变元素内容
2.src、href
3.id、alt、title

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				width: 300px;
			}
		</style>
	</head>
	<body>
		<button id="sona">娑娜</button>
		<button id="gewen">格温</button>
		<br>
		<img src="../img/娑娜.jpg" >
		
		<script type="text/javascript">
			// 修改元素属性 src
			// 1.获取元素
			var sona = document.getElementById('sona');
			var gewen = document.getElementById('gewen');
			var img = document.querySelector('img');
			// 2.注册事件 处理程序
			gewen.onclick = function() {
				img.src = '../img/格温.jpg';
				img.title = '灵罗娃娃'
			}
			sona.onclick = function() {
				img.src = '../img/娑娜.jpg';
				img.title = '琴瑟仙女'
			}
		</script>
	</body>
</html>

在这里插入图片描述

案例

分时显示不同图片，显示不同的问候语

根据不同时间，页面显示不同图片，同时显示不同的问候语

分析：

根据系统不同时间来判断，所以需要用到日期内置对象
利用多分支语句来设置不同的图片
需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
需要一个div元素，显示不同问候语，修改元素内容即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				width: 512px;
			}
		</style>
	</head>
	<body>
		<img src="../img/1.jpg" >
		<div>上午好</div>
		<script type="text/javascript">
			// 1.获取元素
			var img = document.querySelector('img');
			var div = document.querySelector('div');
			// 2.得到当前的小时数
			var date = new Date();
			var h = date.getHours();
			// 3.判断小时数改变图片和文字信息
			if(h < 12) {
				img.src = '../img/1.jpg';
				div.innerHTML = '亲，上午好';
			} else if (h < 18) {
				img.src = '../img/3.jpg';
				div.innerHTML = '亲，下午好';
			} else {
				img.src = '../img/2.jpg';
				div.innerHTML = '亲，晚上好';
			}
		</script>
	</body>
</html>

表单元素的属性操作

利用DOM可以操作如下表单元素的属性

type、value、checked、selected、disabled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>按钮</button>
		<input type="text" value="输入内容">
		<script>
			// 1.获取元素
			var btn = document.querySelector('button');
			var input = document.querySelector('input');
			// 2.注册事件 处理程序
			btn.onclick = function() {
				// input.innerHTML = '点击了'; 这个是 普通盒子 比如 div 标签里面的内容
				// 表单里面的值 文字内容 是通过value来修改的
				input.value = '被点击了';
				// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
				// btn.disabled = true
				this.disabled = true;
				// this指向的是事件函数的调用者 btn
			}
		</script>
	</body>
</html>

案例

仿京东显示密码，点击按钮将密码框切换为文本框，并且可以查看密码明文

分析：

核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				position: relative;
				width: 400px;
				border: 1px solid #ccc;
				margin: 100px auto;
			}
			.box input {
				width: 370px;
				height: 30px;
				border: 0;
				outline: none;
			}
			.box img {
				position: absolute;
				top: 2px;
				right: 2px;
				width: 24px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<label for="">
				<img src="../img/眼1.jpeg" id="eye" >
			</label>
			<input type="password" id="pwd">
		</div>
		<script type="text/javascript">
			// 1.获取元素
			var eye = document.getElementById('eye');
			var pwd = document.getElementById('pwd');
			// 2.注册事件 处理程序
			var flag = 0;
			eye.onclick = function() {
				// 点击一次之后 flag一定要变化
				if(flag == 0) {
					pwd.type = 'text';
					eye.src = '../img/眼1.jpeg';
					flag = 1; // 赋值操作
				} else {
					pwd.type = 'password';
					eye.src = '../img/眼2.jpg';
					flag = 0;
				}
			}
		</script>
	</body>
</html>

样式属性操作

可以通过JS修改元素的大小、颜色、位置等样式

1.element.style          行内样式操作
2.element.className      类名样式操作

注意：

JS里面的样式采取驼峰命名法比如 forntSize、backgroundColor
JS修改style样式操作，产生的是行内样式，css权重比较高
如果样式修改较多，可以采取操作类名方式更改元素样式
class因为是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			// 1.获取元素
			var div = document.querySelector('div');
			// 2.注册事件 处理程序
			div.onclick = function() {
				// div.style里面的属性 采取驼峰命名法
				this.style.backgroundColor = 'purple';
				this.style.width = '250px';
			}
		</script>
	</body>
</html>

在这里插入图片描述

案例

仿淘宝关闭二维码案例

核心思路：利用样式的显示和隐藏完成，display：none隐藏元素display：block显示元素
点击按钮，就让这个二维码盒子隐藏起来即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				position: relative;
				width: 74px;
				height: 88px;
				border: 1px solid #ccc;
				margin: 100px auto;
				font-size: 12px;
				text-align: center;
				color: #f40;
			}
			.box img {
				width: 60px;
				margin-top: 5px;
			}
			.close-btn {
				position: absolute;
				top: -1px;
				left: -16px;
				width: 14px;
				height: 14px;
				border: 1px solid #ccc;
				line-height: 14px;
				font-family: Arial, Helvetica, sans-serif;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			淘宝二维码
			<img src="../img/2维码.jpg" >
			<i class="close-btn">x</i>
		</div>
		<script type="text/javascript">
			// 1.获取元素
			var btn = document.querySelector('.close-btn');
			var box = document.querySelector('.box');
			// 2.注册事件 程序处理
			btn.onclick = function() {
				box.style.display = 'none';
			}
		</script>
	</body>
</html>

案例2

显示隐藏文本框内容

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input {
				color: #999;
			}
		</style>
	</head>
	<body>
		<input type="text" value="手机">
		<script type="text/javascript">
			// 1.获取资源
			var text = document.querySelector('input');
			// 2.注册事件 获得焦点事件 onfocus
			text.onfocus = function() {
				// console.log('得到焦点');
				if(this.value === '手机') {
					this.value = '';
				}
				// 获得焦点需要把文本框里面的文字颜色变黑
				this.style.color = '#333';
			}
			// 3.注册事件 失去焦点事件 onblur
			text.onblur = function() {
				// console.log('失去焦点');
				if(this.value === '') {
					this.value = '手机';
				}
				// 失去焦点需要把文本框里面的文字颜色变浅色
				this.style.color = '#999';
			}
		</script>
	</body>
</html>

使用className修改样式属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.change {
				background-color: purple;
				color: #fff;
				font-size: 25px;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="first">文本</div>
		<script type="text/javascript">
			// 1.使用element.style获得修改元素样式 如果样式比较少 或者 功能简单 的情况下使用
			var test = document.querySelector('div');
			test.onclick = function() {
				// this.style.backgroundColor = 'pueple';
				// this.style.color = '#fff';
				// this.style.fontSize = '25px';
				// this.style.marginTop = '100px';
				// 让我们当前元素的类名改为了change
				
				// 2.我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
				// 3.如果想要保留原先的类名，我们可以这么做 多类名选择器
				// this.className = 'change';
				this.className = 'first change';
			}
		</script>
	</body>
</html>

案例

密码框格式提示错误信息：用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div {
				width: 600px;
				margin: 100px auto;
			}
			.message {
				display: inline-block;
				font-size: 12px;
				color: #999;
				background:url(../img/眼1.jpeg) no-repeat left center;
				padding-left: 20px;
			}
			.wrong {
				color: red;
				background-image: url(../img/眼2.jpg);
			}
			.right {
				color: green;
				background-image: url(../img/眼1.jpeg);
			}
		</style>
	</head>
	<body>
		<div class="register">
			<input type="password" class="ipt">
			<p class="message">请输入6~16位密码</p>
		</div>
		<script type="text/javascript">
			// 1.获取元素
			var ipt = document.querySelector('.ipt');
			var message = document.querySelector('.message');
			// 2.注册事件
			ipt.onblur = function() {
				// 根据表单里面值的长度 ipt.value.length
				if (this.value.length < 6 || this.value.length > 16) {
					// console.log('错误');
					message.className = 'message wrong';
					message.innerHTML = '输入错误';
				} else {
					message.className = 'message right';
					message.innerHTML = '输入正确';
				}
			}
		</script>
	</body>
</html>

排他算法

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他算法

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
		<script type="text/javascript">
			// 1.获取所有按钮元素
			var btns = document.getElementsByTagName('button');
			// btns得到的是伪数组 里面的每一个元素 btns[i]
			for (var i = 0; i < btns.length; i++) {
				btns[i].onclick = function() {
					// 先把所有的按钮背景颜色去掉
					for (var i = 0; i < btns.length; i++) {
						btns[i].style.backgroundColor = '';
					}
					// 然后才让当前的元素背景颜色位pink
					this.style.backgroundColor = 'pink';
				}
			}
		</script>
	</body>
</html>

百度换肤效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background: url(../img/01.jpg) no-repeat center top;
			}
			li {
				list-style: none;
			}
			.baidu {
				overflow: hidden;
				margin: 100px auto;
				background-color: #fff;
				width: 410px;
				padding-top: 3px;
			}
			.baidu li {
				float: left;
				margin: 0 1px;
				cursor: pointer;
			}
			.baidu img {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<ul class="baidu">
			<li><img src="../img/01.jpg" ></li>
			<li><img src="../img/002.jpg" ></li>
			<li><img src="../img/003.png" ></li>
			<li><img src="../img/004.jpg" ></li>
		</ul>
		<script type="text/javascript">
			// 1.获取元素
			var imgs = document.querySelector('.baidu').querySelectorAll('img');
			// console.log(imgs);
			// 2.循环注册事件
			for (var i = 0; i < imgs.length; i++) {
				imgs[i].onclick = function() {
					// this.src 就是点击图片的路径 images/01.jpg
					// console.log(this.src);
					// 把这个路径this.src给body就可以了
					document.body.style.backgroundImage = 'url(' + this.src + ')';
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

全选反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap {
				margin: 200px 600px;
			}
			thead th {
				color: #fff;
				background-color: deepskyblue;
			}
			tbody tr {
				background-color: #f0f0f0;
			}
			tbody tr:hover {
				cursor: pointer;
				background-color: #fafafa;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<table>
				<thead>
					<tr>
						<th>
							<input type="checkbox" id="j_cbAll" />
						</th>
						<th>商品</th>
						<th>价钱</th>
					</tr>
				</thead>
				<tbody id="j_tb">
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>iPhone13</td>
						<td>10000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>iPad Pro</td>
						<td>5000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>iPad Air</td>
						<td>2000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>Apple Watch</td>
						<td>2000</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			// 1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
			// 获取元素
			var j_cbAll = document.getElementById('j_cbAll');// 全选按钮
			var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
			// 注册事件
			j_cbAll.onclick = function() {
				// this.checked 得到当前复选框的选中状态如果是true 就是选中，如果是false就是未选中
				console.log(this.checked);
				for (var i = 0; i < j_tbs.length; i++) {
					j_tbs[i].checked = this.checked;
				}
			}
			// 2.下面复选框需要全部选中，上面全选才能选中做法，给下面所有复选框绑定点击事件,每次点击，都要循环查看
			for (var i = 0; i < j_tbs.length; i++) {
				j_tbs[i].onclick = function() {
					// flag控制全选按钮是否选中
					var flag = true;
					// 每次点击下面的复选框都需要循环检查这4个小按钮是否全被选中
					for (var i = 0; i < j_tbs.length; i++) {
						if (!j_tbs[i].checked) {
							flag = false;
							break;// 退出循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断
						}
					}
					j_cbAll.checked = flag;
				}
			}
		</script>
	</body>
</html>

自定义属性的操作

获取属性值

element.属性获取属性值

element.getAttribute(‘属性’);

区别

element.属性获取内置属性值（元素本身自带的属性）

element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性

设置属性值

element.属性 = ‘值’ 设置内置属性值

element.setAttribute(‘属性’,‘值’);

区别

element.属性设置内置属性值

element.setAttribute(‘属性’); 主要设置自定义的属性（标准）

移除属性

element.removeAttribute(‘属性’);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="demo" index="1" class="nav"></div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			// 1.获取元素的属性值
			// (1) element.属性
			console.log(div.id);
			// (2) element.getAttribute('属性') get得到获取 attribute属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
			console.log(div.getAttribute('id'));
			console.log(div.getAttribute('index'));
			// 2.设置元素属性值
			// (1) element.属性 = '值'
			div.id = 'test';
			div.className = 'navs';
			// (2) element.setAttribute('属性','值'); 主要针对于自定义属性
			div.setAttribute('index',2);
			div.setAttribute('class','footer'); // class 特殊 这里面写的就是class不是className
			// 3.移除属性 removeAttribute(属性)
			div.removeAttribute('index');
		</script>
	</body>
</html>

tab选项卡案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入CSS -->
		<link rel="stylesheet" type="text/css" href="imgs/index.css"/>
		<!-- 让所有的a标签的默认跳转方式都为blank（跳转新窗口打开） -->
	</head>
	<body>
		<!-- 最外边的盒子 -->
		<div class="tab_contents">
			<ul class="tab_nav">
				<li class="tabNav_active">
					<img src="imgs/sona1.jpg" >
					<h2>琴瑟仙女</h2>
				</li>
				<li>
					<img src="imgs/gw1.jpg" >
					<h2>灵罗娃娃</h2>
				</li>
				<li>
					<img src="imgs/ven1.jpg" >
					<h2>暗夜猎手</h2>
				</li>
				<li>
					<img src="imgs/kat1.jpg" >
					<h2>不祥之刃</h2>
				</li>
				<li>
					<img src="imgs/niko1.jpg" >
					<h2>万花通灵</h2>
				</li>
			</ul>
			
			<ul class="tab_box">
				<li class="tabBox_active">
					<img src="imgs/sona2.jpg" >
					<div>
						<h2>娑娜</h2>
						<p>
							娑娜是一位弦乐演奏家，“叆华”的优美和弦与多变曲调就是她唯一的语言。
							这种文雅的举止让她深得德玛西亚贵族的宠爱，不过有人猜测她迷人的旋律其实是在施放魔法——这在王国境内是如履薄冰。
							在外人看来她一言不发，但娑娜最亲密的同伴却能读懂她。娑娜弹拨的和声不仅能够安抚受伤的盟友，而且还能打击掉以轻心的敌人。
						</p>
						<button>
							<a href="https://yz.lol.qq.com/zh_CN/champion/sona/">
								Look at all >
							</a>
						</button>
					</div>
				</li>
				<li>
					<img src="imgs/gw2.png" >
					<div>
						<h2>格温</h2>
						<p>
							格温是一个被魔法赋予了生命的玩偶，而她所挥使的正是当初创造了她自己的工具。
							格温无比珍惜这份机缘，踏出的每一步都承载着曾经主人的爱意。格温拥有控制“圣霭”的能力。
							这是一种来自远古的庇护性法术，她的剪刀、衣针和缝线都因圣霭而得到了庇佑。
							即便有这么多新奇的事物等待着格温，她既感到兴奋，但又带着强烈的使命感，决心拯救在这个破碎世界里艰难挣扎的人们。
						</p>
						<button>
							<a href="https://yz.lol.qq.com/zh_CN/champion/gwen/">
								Look at all >
							</a>
						</button>
					</div>
				</li>
				<li>
					<img src="imgs/ven2.jpeg" >
					<div>
						<h2>薇恩</h2>
						<p>
							肖娜·薇恩是一位无情的德玛西亚怪物猎手。终其一生，她都在寻找杀害她全家的恶魔。
							她的手臂上装着十字弩，心中燃烧着熊熊的复仇怒火，从暗影中射出圣银弩箭的风暴，
							薇恩只有在杀死那些为黑暗魔法所控制的人和生物时，才能真正感到愉悦。
						</p>
						<button>
							<a href="https://yz.lol.qq.com/zh_CN/champion/vayne/">
								Look at all >
							</a>
						</button>
					</div>
				</li>
				<li>
					<img src="imgs/kat2.jpg" >
					<div>
						<h2>卡特琳娜</h2>
						<p>
							果断坚决、心狠手辣，卡特琳娜是诺克萨斯的顶尖刺客。
							作为传奇将军杜·克卡奥的长女，她凭借出其不意的迅猛刺杀很快声名鹊起。
							强烈的野心曾经驱使她挑战重兵把守的暗杀目标，甚至不惜冒险让友军暴露在危险中。
							不过无论是怎样的任务，卡特琳娜都会毫不迟疑地在锯刃匕首的风暴中履行自己的使命。
						</p>
						<button>
							<a href="https://yz.lol.qq.com/zh_CN/champion/katarina/">
								Look at all >
							</a>
						</button>
					</div>
				</li>
				<li>
					<img src="imgs/niko2.png" >
					<div>
						<h2>妮蔻</h2>
						<p>
							妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，
							甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，
							但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。
						</p>
						<button>
							<a href="https://yz.lol.qq.com/zh_CN/champion/neeko/">
								Look at all >
							</a>
						</button>
					</div>
				</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			/*
			*
			* 思路：
			* 循环遍历导航条
			* 点击导航条切换类名 进行 显示和隐藏
			* 
			**/
			
			var	tabNavItem = document.querySelectorAll('.tab_nav>li');
			var tabBoxItem = document.querySelectorAll('.tab_box>li');
			
			var tabNavActive = document.querySelector('.tabNav_active');
			var tabBoxActive = document.querySelector('.tabBox_active');
			
			tabNavItem.forEach(function(item,index) {
				item.onmouseenter = function() {
					
					tabNavActive.className = '';
					this.className = 'tabNav_active';
					tabNavActive = this;
					tabBoxActive.className = '';
					tabBoxItem[index].className = 'tabBox_active';
					tabBoxActive = tabBoxItem[index];
				}
			})
		</script>
	</body>
</html>

* {
	margin: 0;
	padding: 0;
}

html,body {
	width: 100%;
	/* 
		vh就是当前屏幕可见高度的1%，也就是说
		
		height:100vh == height:100%;
		
		但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，
		
		但是设置height:100vh，该元素会被撑开屏幕高度一致。
	 */
	height: 100vh;
	background: #282c34;
	/* 让盒子进行flex(弹性布局)布局，并且居中显示 */
	display: flex;
	/* 1.justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
	justify-content: center;
	/* 2.align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
	align-items: center;
}
/* 去除小圆点 */
.tab_contents ul {
	list-style: none;
}

.tab_contents {
	width: 700px;
	height: 200px;
	/* background: white; */
}
.tab_contents .tab_nav {
	display: flex;
}
.tab_contents .tab_nav li {
	padding: 10px 20px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background: #e5e9ea;
	margin-right: 2px;
	color: #607291;
	cursor: pointer;
	display: flex;
	position: relative;
	overflow: hidden;
}
.tab_contents .tab_nav li img {
	width: 20px;
	margin-right: 5px;
	/* 设置不透明级别 */
	opacity: 0.3;
	transition: opacity 0.3s;
}
.tab_contents .tab_nav li h2 {
	font-size: 14px;
}
.tab_contents .tab_nav li:hover img {
	opacity: 1 !important;
}
.tab_contents .tabNav_active {
	background: #f9f9f9 !important;
}

/* 面板 */
.tab_contents .tab_box {
	position: relative;
	/* 最小高度 */
	min-height: 150px;
	background: #f9f9f9;
	padding: 2em;
	color: #607291;
}
.tab_contents .tab_box li {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	padding: 15px;
	box-sizing: border-box;
	/* 
	 display 不支持动画切换
	 */
	/* display: none; */
	
	opacity: 0;
	visibility: hidden;
	transition: all 1s ease;
}
.tab_contents .tab_box .tabBox_active {
	/* display: flex; */
	opacity: 1;
	visibility: visible;
}
.tab_contents .tab_box li img {
	width: 128px;
}
.tab_contents .tab_box li div {
	width: 100%;
	/* height: 128px; */
	position: relative;
	margin-left: 20px;
}
.tab_contents .tab_box li p {
	text-indent: 2em;
	margin: 20px 0;
	line-height: 1.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.tab_contents .tab_box li button {
	margin-top: 20px;
	width: 110px;
	height: 25px;
	border: #607291 solid 1px;
	background: transparent;
	float: right;
}
.tab_contents .tab_box li button a {
	text-decoration: none;
	color: #607291;
}

H5自定义属性

自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

自定义属性获取是通过getAttribute(‘属性’)获取

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

h5给我们新增了自定义属性：

设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

比如：<div data-index= '1'></div>

或者使用JS设置

element.setAttribute('data-index',2)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div getTime="20" data-index="2" data-list-name="andy"></div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			//console.log(div.getTime);
			console.log(div.getAttribute('getTime'));
			div.setAttribute('data-time',20);
			console.log(div.getAttribute('data-index'));
			console.log(div.getAttribute('data-list-name'));
			// h5新增的获取自定义属性的方法
			// dataset 是一个集合里面存放了所有data开头的自定义属性
			console.log(div.dataset);
			console.log(div.dataset.index);
			console.log(div.dataset['index']);
			// 如果自定义属性里面有多个-链接的单词，我们获取的时候采用 驼峰命名法
			console.log(div.dataset.listName);
			console.log(div.dataset['listName']);
		</script>
	</body>
</html>