JavaScript笔记8-DOM中的事件、获取元素、操作元素

JavaScript笔记8-DOM中的事件、获取元素、操作元素
目录

1.API和Web API

2.DOM简介

3.获取元素

3.1 根据 ID 获取

3.2 根据标签名获取

3.3 根据类名返回元素对象集合

3.4 根据选择器返回元素

3.5 获取特殊元素（body，html）

4.事件

5.操作元素

5.1 改变元素内容

5.2 常用元素的属性操作

5.3 表单元素的属性操作

5.4 样式属性操作

5.4.1 element.style 行内样式操作

5.4.2 element.className 类名样式操作

5.5 排他思想

5.6 自定义属性的操作

5.5 H5自定义属性

1.API和Web API

JavaScript的组成：
- ECMAScript：是计算机组织规定的JavaScript基础语法标准。
- DOM：浏览器对象模型。
- BOM：文档对象模型。
其中，DOM和BOM才能使我们与网页进行交互，统称为Web APIs。Web APIs标准由w3c规定。

API（应用程序编程接口）：API就是给程序员提供的一种接口，是一些预先定义的函数，程序员只需要简单地调用这些函数就可以完成复杂的工作。

Web API：针对于浏览器提供的接口，主要针对浏览器做交互效果。

2.DOM简介

DOM：文档对象模型（Document Object Model），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
- 文档：一个页面就是一个文档，DOM 中使用 document 表示。
- 元素：页面中的所有标签都是元素，DOM 中使用 element 表示。
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示。
3.获取元素

DOM在我们实际开发中主要用来操作元素。
- 获取页面中的元素可以使用以下几种方式:
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
3.1 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。
```
document.getElementById('id');
```
使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

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

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
```
document.getElementsByTagName('标签名');
```
注意：
- 1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
- 2. 得到元素对象是动态的
```
html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<ul>
			<li>好好学习，天天向上1li>
			<li>好好学习，天天向上2li>
			<li>好好学习，天天向上3li>
			<li>好好学习，天天向上4li>
		ul>
		
		<ol id="ol">
			<li>加油1li>
			<li>加油2li>
			<li>加油3li>
			<li>加油4li>
		ol>
		
		<script>
			// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
			var lis = document.getElementsByTagName('li');
			console.log(lis); //HTMLCollection(8) [li, li, li, li, li, li, li, li]
			console.log(lis[0]); //
好好学习，天天向上1
```
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]); //8个li分别输出
}
// 3. 如果页面中只有一个li 返回的还是伪数组的形式
// 4. 如果页面中没有这个元素返回的是空的伪数组的形式
// 5. 想要指定父元素下的元素：element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
// var ol = document.getElementsByTagName('ol'); // [ol]
// console.log(ol[0].getElementsByTagName('li'));
//以上通常下面这样写法：
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li')); //HTMLCollection(4) [li, li, li, li]
script>
body>
html>

3.3 根据类名返回元素对象集合

document.getElementsByClassName(‘类名’)；

例子：类名返回


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div class="box">盒子1div>
		<div class="box">盒子2div>
		<div id="nav">
			<ul>
				<li>商品li>
				<li>价格li>
			ul>
		div>
		<script>
			//  getElementsByClassName 根据类名获得某些元素集合
			var boxs = document.getElementsByClassName('box');
			console.log(boxs); //HTMLCollection(2) [div.box, div.box]
		script>
	body>
html>

3.4 根据选择器返回元素

根据指定选择器返回第一个元素对象：

document.querySelector('选择器');

根据指定选择器返回所有元素：

document.querySelectorAll('选择器');

例子：选择器返回


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div class="box">盒子1div>
		<div class="box">盒子2div>
		<div id="nav">
			<ul>
				<li>商品li>
				<li>价格li>
			ul>
		div>
		<script>
			// 1. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
			var firstBox = document.querySelector('.box');
			console.log(firstBox); //盒子1
			var nav = document.querySelector('#nav');
			console.log(nav); //
			var li = document.querySelector('li');
			console.log(li); //
首页

// 2. querySelectorAll()返回指定选择器的所有元素对象集合

			var allBox = document.querySelectorAll('.box');

			console.log(allBox); //NodeList(2) [div.box, div.box]

			var lis = document.querySelectorAll('li');

			console.log(lis); //NodeList(2) [li, li]

script>

body>

html>

3.5 获取特殊元素（body，html）

获取body元素：

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

获取html元素：

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

例子：获取body，html元素


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script>
			// 1.获取body 元素
			var bodyEle = document.body;
			console.log(bodyEle); //
			console.dir(bodyEle);
			// 2.获取html 元素
			var htmlEle = document.documentElement;
			console.log(htmlEle); //
		script>
	body>
html>

4.事件

事件：用户点击某按钮时产生一个事件，然后去执行某些操作。

4.1 事件三要素：

事件源：谁，件被触发的对象，如按钮。
事件类型：什么事件，如何触发，比如鼠标点击(onclick) ，或鼠标经过或键盘按下。
事件处理程序：做啥，通过一个函数赋值的方式来完成。

例子：点击一个按钮，弹出对话框


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<button id="btn">点开有惊喜button>
		<script>
			// 点击一个按钮，弹出对话框
			var btn = document.getElementById('btn');
			btn.onclick = function() {
				alert('你是最棒的人');
			}
		script>
	body>
html>

4.2 执行事件的步骤

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

例子：


	<body>
		<div>biu~div>
		<script>
			// 执行事件步骤
			// 点击div 控制台输出 我被选中了
			// 1. 获取事件源
			var div = document.querySelector('div');
			// 2.绑定事件 注册事件
			// div.onclick 
			// 3.添加事件处理程序 
			div.onclick = function() {
				console.log('biu~biu~');
			}
		script>
	body>

点击20次：

5.操作元素

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

5.1 改变元素内容

改变元素从起始位置到终止位置的内容

element.innerText

element.innerHTML

innerText 和 innerHTML的区别：

innerText不识别html标签，非标准，去除空格和换行。
innerHTML识别html标签，W3C标准，保留空格和换行的，

例子1：两者区别


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变元素内容title>
		<style>
			div,
			p {
				width: 300px;
				height: 30px;
				line-height: 30px;
				color: black;
				background-color: lightyellow;
			}
		style>
	head>
	<body>
		<div id="box1">div><br>
		<div id="box2">div>
		<p>
			但愿人长久
			<span>千里共婵娟span>
		p>
		<script>
			// innerText 和 innerHTML的区别 
			// 1. innerText 不识别html标签 非标准  去除空格和换行
			var div1 = document.getElementById('box1');
			div1.innerText = '明天是： 中秋节';
			// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
			var div2 = document.getElementById('box2');
			div2.innerHTML = '明天是： 中秋节';
			
			// 这两个属性是可读写的  可以获取元素里面的内容
			var p = document.querySelector('p');
			console.log(p.innerText); //只有文字
			console.log(p.innerHTML); //标签加文字
		script>
	body>
html>

例子2：改变元素内容


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变元素内容title>
		<style>
			div,
			p {
				width: 300px;
				height: 30px;
				line-height: 30px;
				color: #fff;
				background-color: gray;
			}
		style>
	head>
	<body>
		<button>显示当前系统时间button>
		<div>年月日星期div>
		<p>123p>
		<script>
			// 当我们点击了按钮，  div里面的文字会发生变化
			// 1. 获取元素 
			var btn = document.querySelector('button');
			var div = document.querySelector('div');
			// 2.注册事件
			btn.onclick = function() {
				div.innerHTML = getDate();
			}
			//日期函数
			function getDate() {
				var date = new Date();
				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.innerHTML = getDate();
		script>
	body>
html>

5.2 常用元素的属性操作

innerText、innerHTML 改变元素内容
src、href
id、alt、title

例子3：改变元素属性

实现：点击三国按钮，图片变成三国演义，点击西游记按钮，图片变成西游记。鼠标放在图片上时有书名title。


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			img {
				width: 200px;
			}
		style>
	head>
	<body>
		<button id="sanguo">三国演义button>
		<button id="xiyou">西游记button> <br>
		<img src="pic/sanguo.jpg" alt="" title="三国演义">
		
		<script>
			// 修改元素属性  src
			// 1. 获取元素
			var sanguo = document.getElementById('sanguo');
			var xiyou = document.getElementById('xiyou');
			var img = document.querySelector('img');
			// 2. 注册事件  处理程序
			xiyou.onclick = function() {
				img.src = 'pic/xiyou.jpg';
				img.title = '西游记';
			}
			sanguo.onclick = function() {
				img.src = 'pic/sanguo.jpg';
				img.title = '三国演义';
			}
		script>
	body>
html>

例子4：时显示不同图片,显示不同问候语

实现：如果上午/下午/晚上时间打开页面，显示上午/下午/晚上好，显示上午/下午/晚上的图片。


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			img {
				width: 100px;
			}
		style>
	head>
	<body>
		<img src="pic/zao.jpg" alt="">
		<div>上午好div>
		<script>
			// 根据系统不同时间来判断，所以需要用到日期内置对象
			// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
			// 需要一个div元素，显示不同问候语，修改元素内容即可
			// 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 = 'pic/zao.jpg';
				div.innerHTML = '上午好，要好好学习哦~';
			} else if (h < 18) {
				img.src = 'pic/wu.gif';
				div.innerHTML = '下午好，学累了可以午休一下哦~';
			} else {
				img.src = 'pic/wan.jpg';
				div.innerHTML = '晚上好，记得早点睡觉~';
			}
		script>
	body>
html>

5.3 表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：type、value、checked、selected、disabled

例子5：修改表单value和disabled属性

普通盒子文本是通过innerHTML修改的，而表单里面的值文字内容是通过value来修改的。


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

例子6：密码框显示，点击眼睛，显示或隐藏密码。


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.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">
			<img src="pic/close.png" alt="" id="eye">
			<input type="password" name="" id="pwd">
		div>
		
		<script>
			// 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 = 'pic/open.png';
					flag = 1; // 赋值操作
				} else {
					pwd.type = 'password';
					eye.src = 'pic/close.png';
					flag = 0;
				}
			}
		script>
	body>
html>

5.4 样式属性操作

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

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

注意：

JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor
JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

5.4.1 element.style 行内样式操作

如果样式比较少或者功能简单的情况下使用 element.style 获得修改元素样式。

例子7：点击元素，样式改变


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

例子8：关闭广告


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.box {
				position: relative;
				width: 74px;
				height: 88px;
				border: 1px solid #ccc;
				margin: 100px auto;
				font-size: 12px;
				text-align: center;
				color: #f40;
				/* display: block; */
			}
			
			.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="pic/guang.jpg" alt="">
			<i class="close-btn">×i>
		div>
		<script>
			// 1. 获取元素 
			var btn = document.querySelector('.close-btn');
			var box = document.querySelector('.box');
			// 2.注册事件 程序处理
			btn.onclick = function() {
				box.style.display = 'none';
			}
		script>
	body>
html>

例子9：显示隐藏文本框内容


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

5.4.2 element.className 类名样式操作

如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名。

例子10：更改元素的类名


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: pink;
			}
			
			.change {
				background-color: lightblue;
				color: wheat;
				font-size: 25px;
				margin-top: 100px;
			}
		style>
	head>
	<body>
		<div class="first">文本div>
		<script>
			// 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
			var test = document.querySelector('div');
			test.onclick = function() {
				// this.style.backgroundColor = 'purple';
				// 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>

例子11：密码框验证信息

①首先判断的事件是表单失去焦点 onblur
②如果输入正确则提示正确的信息颜色为绿色小图标变化
③如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
④因为里面变化样式较多，我们采取className修改样式


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			div {
				width: 600px;
				margin: 100px auto;
			}
			
			.message {
				display: inline-block;
				font-size: 12px;
				color: lightgray;
				background: url(pic/mess.png) no-repeat left center;
				padding-left: 20px;
			}
			
			.wrong {
				color: red;
				background-image: url(pic/wrong.png);
			}
			
			.right {
				color: green;
				background-image: url(pic/right.png);
			}
		style>
	head>
	<body>
		<div class="register">
			<input type="password" class="ipt">
			<p class="message">请输入6~16位密码p>
		div>
		
		<script>
			// 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 = '您输入的位数不对要求6~16位';
				}else {
					message.className = 'message right';
					message.innerHTML = '您输入的正确';
				}
			}
		script>
	body>
html>

5.5 排他思想

排他思想：首先先排除其他人，然后才设置自己的样式。

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

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

例子1：按钮排他，点击一个按钮就变成粉色


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<button>按钮1button>
		<button>按钮2button>
		<button>按钮3button>
		<button>按钮4button>
		<button>按钮5button>
		<script>
			//排他思想：首先先排除其他人，然后才设置自己的样式 
			// 1. 获取所有按钮元素
			var btns = document.getElementsByTagName('button');// btns得到的是伪数组  里面的每一个元素 btns[i]
			for (var i = 0; i < btns.length; i++) {
				btns[i].onclick = function() {
					// (1) 我们先把所有的按钮背景颜色去掉  排除所有
					for (var i = 0; i < btns.length; i++) {
						btns[i].style.backgroundColor = '';
					}
					// (2) 然后才让当前的元素背景颜色为pink 留下自己
					this.style.backgroundColor = 'pink';
				}
			}
		script>
	body>
html>

例子2：背景换肤，点击一个图片背景就随之改变。


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background: url(pic/bg1.jpg) no-repeat center top;
				background-size: 100%;
			}
			
			li {
				list-style: none;
			}
			
			.bg {
				overflow: hidden;
				margin: 100px auto;
				background-color: #fff;
				width: 410px;
				padding-top: 3px;
			}
			
			.bg li {
				float: left;
				margin: 0 1px;
				cursor: pointer;
			}
			
			.bg img {
				width: 100px;
			}
		style>
	head>
	<body>
		<ul class="bg">
		    <li><img src="pic/bg1.jpg">li>
		    <li><img src="pic/bg2.jpg">li>
		    <li><img src="pic/bg3.jpg">li>
		    <li><img src="pic/bg4.jpg">li>
		ul>
		<script>
			// 1. 获取元素 
			var imgs = document.querySelector('.bg').querySelectorAll('img');
			// console.log(imgs);
			// 2. 循环注册事件 
			for (var i = 0; i < imgs.length; i++) {
				imgs[i].onclick = function() {
					// this.src 就是我们点击图片的路径   比如点第二个就是pic/bg2.jpg
					// 把这个路径 this.src 给body 就可以了
					document.body.style.backgroundImage = 'url(' + this.src + ')';
				}
			}
		script>
	body>
html>

例子3：表格隔行换色，随着鼠标经过表格每一行会变色。


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			table {
				width: 800px;
				margin: 100px auto;
				text-align: center;
				border-collapse: collapse;
				font-size: 14px;
			}
			
			thead tr {
				height: 30px;
				background-color: lightskyblue;
			}
			
			tbody tr {
				height: 30px;
			}
			
			tbody td {
				border-bottom: 1px solid #d7d7d7;
				font-size: 12px;
				color: blue;
			}
			
			.bg {
				background-color: pink;
			}
		style>
	head>
	<body>
		<table>
			<thead>
				<tr>
					<th>代码th>
					<th>名称th>
					<th>最新公布净值th>
					<th>累计净值th>
					<th>前单位净值th>
					<th>净值增长率th>
				tr>
			thead>
			<tbody>
				<tr>
					<td>003526td>
					<td>xxx银行x个月定期开放债券td>
					<td>1.075td>
					<td>1.079td>
					<td>1.074td>
					<td>+0.047%td>
				tr>
				<tr>
					<td>003526td>
					<td>xxx银行x个月定期开放债券td>
					<td>1.075td>
					<td>1.079td>
					<td>1.074td>
					<td>+0.047%td>
				tr>
				<tr>
					<td>003526td>
					<td>xxx银行x个月定期开放债券td>
					<td>1.075td>
					<td>1.079td>
					<td>1.074td>
					<td>+0.047%td>
				tr>
				<tr>
					<td>003526td>
					<td>xxx银行x个月定期开放债券td>
					<td>1.075td>
					<td>1.079td>
					<td>1.074td>
					<td>+0.047%td>
				tr>
				<tr>
					<td>003526td>
					<td>xxx银行x个月定期开放债券td>
					<td>1.075td>
					<td>1.079td>
					<td>1.074td>
					<td>+0.047%td>
				tr>
				<tr>
					<td>003526td>
					<td>xxx银行x个月定期开放债券td>
					<td>1.075td>
					<td>1.079td>
					<td>1.074td>
					<td>+0.047%td>
				tr>
			tbody>
		table>
		<script>
			// 1.获取元素 获取的是 tbody 里面所有的行
			var trs = document.querySelector('tbody').querySelectorAll('tr');
			// 2. 利用循环绑定注册事件
			for (var i = 0; i < trs.length; i++) {
				// 3. 鼠标经过事件 onmouseover
				trs[i].onmouseover = function() {
						this.className = 'bg';
					}
				// 4. 鼠标离开事件 onmouseout
				trs[i].onmouseout = function() {
					this.className = '';
				}
			}
		script>
	body>
html>

例子4：表单全选或反选

1. 点击上面全选复选框，下面所有的复选框都选中（全选）。
2. 再次点击全选复选框，下面所有的复选框都不中选（取消全选）。
3. 如果下面复选框全部选中，上面全选按钮就自动选中。
4. 如果下面复选框有一个没有选中，上面全选按钮就不选中。
5. 所有复选框一开始默认都没选中状态。


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.wrap {
				width: 300px;
				margin: 100px auto 0;
			}
			
			table {
				border-collapse: collapse;
				border-spacing: 0;
				border: 1px solid #c0c0c0;
				width: 300px;
			}
			
			th,
			td {
				border: 1px solid #d0d0d0;
				color: #404060;
				padding: 10px;
			}
			
			th {
				background-color: #55aa7f;
				font: bold 16px "微软雅黑";
				color: #fff;
			}
			
			td {
				font: 14px "微软雅黑";
			}
			
			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="cbAll" />
						th>
						<th>商品th>
						<th>价钱th>
					tr>
				thead>
				<tbody id="tb">
					<tr>
						<td>
							<input type="checkbox" />
						td>
						<td>手机td>
						<td>3000td>
					tr>
					<tr>
						<td>
							<input type="checkbox" />
						td>
						<td>平板td>
						<td>5000td>
					tr>
					<tr>
						<td>
							<input type="checkbox" />
						td>
						<td>电脑td>
						<td>6000td>
					tr>
					<tr>
						<td>
							<input type="checkbox" />
						td>
						<td>手表td>
						<td>600td>
					tr>
		
				tbody>
			table>
		div>
		<script>
			// 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
			// 获取元素
			var cbAll = document.getElementById('cbAll'); // 全选按钮
			var tbs = document.getElementById('tb').getElementsByTagName('input'); // 下面所有的复选框
			// 注册事件
			cbAll.onclick = function() {
					// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
					console.log(this.checked);
					for (var i = 0; i < tbs.length; i++) {
						tbs[i].checked = this.checked;
					}
				}
				// 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
			for (var i = 0; i < tbs.length; i++) {
				tbs[i].onclick = function() {
					// flag 控制全选按钮是否选中
					var flag = true;
					// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
					for (var i = 0; i < tbs.length; i++) {
						if (!tbs[i].checked) {
							flag = false;
							break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
						}
					}
					cbAll.checked = flag;
				}
			}
		script>
	body>
html>

5.6 自定义属性的操作

1. 获取属性值

element.属性：获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’);：主要获得程序员自定义的属性。

2. 设置属性值

element.属性 = ‘值’ ，设置内置属性值。
element.setAttribute('属性', '值');主要设置自定义的属性。

3. 移除属性

element.removeAttribute('属性');

例子1：自定义属性操作


<body>
	<div id="demo" index="1" class="nav">div>
	<script>
		var div = document.querySelector('div');
		// 1. 获取元素的属性值
		// (1) element.属性
		console.log(div.id); //demo
		//(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
		console.log(div.getAttribute('id')); //demo
		console.log(div.getAttribute('index')); //1
		// 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>

例子2：tab 栏切换。当鼠标点击上面相应的选项卡（tab），下面内容跟随变化。


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style-type: none;
			}
			
			.tab {
				width: 978px;
				margin: 100px auto;
			}
			
			.tab_list {
				height: 39px;
				border: 1px solid #ccc;
				background-color: #f1f1f1;
			}
			
			.tab_list li {
				float: left;
				height: 39px;
				line-height: 39px;
				padding: 0 20px;
				text-align: center;
				cursor: pointer;
			}
			
			.tab_list .current {
				background-color: #c81623;
				color: #fff;
			}
			
			.item_info {
				padding: 20px 0 0 20px;
			}
			
			.item {
				display: none;
			}
		style>
	head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">书籍简介li>
					<li>作者介绍li>
					<li>作品鉴赏li>
					<li>艺术特色li>
					<li>作品影响li>
				ul>
			div>
			<div class="tab_con">
				<div class="item" style="display: block;">
					该书以中国70年代中期到80年代中期十年间为背景，通过复杂的矛盾纠葛，以孙少安和孙少平两兄弟为中心，刻画了当时社会各阶层众多普通人的形象；劳动与爱情、挫折与追求、痛苦与欢乐、日常生活与巨大社会冲突纷繁地交织在一起，深刻地展示了普通人在大时代历史进程中所走过的艰难曲折的道路。
				div>
				<div class="item">
					路遥（1949—1992），原名王卫国，中国当代农村作家。1949年12月23日生于陕西榆林市清涧县石咀驿乡王家堡村一个贫困的农民家庭，7岁时因为家里困难被过继给延川县农村的伯父；1969年回乡务农。1973年进入延安大学中文系学习，其间开始文学创作。
				div>
				<div class="item">
					《平凡的世界》是用温暖的现实主义的方式来讴歌普通劳动者的文学作品。与《人生》相比，《平凡的世界》更具有人性的高度，作家把苦难转化为一种前行的精神动力。描写苦难的新时期作家不乏其人，但真正把苦难转化为一种精神动力的作家却并不多，路遥当属其中之一。这部小说在展示普通小人物艰难生存境遇的同时，极力书写了他们克服重重困难的美好心灵与坚韧不拔的奋斗精神。作品中的主人公孙少安、孙少平是挣扎在贫困线上的青年人，但他们自强不息，依靠自己的顽强毅力与命运抗争，追求自我的道德完善。其中，孙少安是立足于乡土矢志改变命运的奋斗者；而孙少平是拥有现代文明知识、渴望融入城市的“出走者”。他们的故事构成了中国社会普通人人生奋斗的两极经验。
				div>
				<div class="item">
					作品的时间跨度从1975年初到1985年，它全景式地反映了这十年间我国城乡社会生活的巨大历史性变迁。如此庞大的工程，路遥采用了“三线组合法”，即在情节的发展和人物的活动上安排了三条线索，三条线索都以时间为序，并将这十年间我国所发生的一些重大的历史事件也列入其中。
				div>
				<div class="item">
					2018年9月27日，《平凡的世界》入选由中国作协《小说选刊》杂志社、中国小说学会、人民日报海外网主办，青岛市作家协会承办的中国改革开放四十周年最有影响力小说。
				div>
		
			div>
		div>
		<script>
			// 获取元素
			var tab_list = document.querySelector('.tab_list');
			var lis = tab_list.querySelectorAll('li');
			var items = document.querySelectorAll('.item');
			// for循环绑定点击事件
			for (var i = 0; i < lis.length; i++) {
				// 开始给5个小li 设置索引号 
				lis[i].setAttribute('index', i);
				lis[i].onclick = function() {
					// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
		
					// 干掉所有人 其余的li清除 class 这个类
					for (var i = 0; i < lis.length; i++) {
						lis[i].className = '';
					}
					// 留下我自己 
					this.className = 'current';
					// 2. 下面的显示内容模块
					var index = this.getAttribute('index');
					console.log(index);
					// 干掉所有人 让其余的item 这些div 隐藏
					for (var i = 0; i < items.length; i++) {
						items[i].style.display = 'none';
					}
					// 留下我自己 让对应的item 显示出来
					items[index].style.display = 'block';
				}
			}
		script>
	body>
html>

5.5 H5自定义属性

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

自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性：

1. 设置H5自定义属性

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

比如

或者使用 JS 设置
element.setAttribute(‘data-index’, 2)

2. 获取H5自定义属性

兼容性获取 element.getAttribute(‘data-index’);

H5新增 element.dataset.index 或者 element.dataset[‘index’]。

1.API和Web API

2.DOM简介

3.获取元素

3.1 根据 ID 获取

3.2 根据标签名获取