⑥JavaScript DOM介绍及DOM相关操作（HTML+CSS+JavaScript简单组合运用）

本文链接：https://blog.csdn.net/qq_45613931/article/details/105376397

JavaScript

DOM介绍
DOM操作（html+css+javascript 简单组合运用）

本人是个新手，写下博客用于自我复习、自我总结。
如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

在最开始我们说过，一个完整的JavaScript实现应该由以下三个部分构成：ECMAScript DOM BOM。接下来开始介绍DOM。

DOM介绍

• DOM，全称Document Object Model文档对象模型。

• JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

• 文档：表示的就是整个的HTML网页文档

• 对象：表示将网页中的每一个部分都转换为了一个对象。

• 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。

节点 ※

• 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。

• 比如：html标签、属性、文本、注释、整个文档等都是一个节点。

• 虽然都是节点，但是实际上他们的具体类型是不同的。

• 比如：标签称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。

• 节点的类型不同，属性和方法也都不尽相同。
在这里插入图片描述

文档节点（document）

• 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。

• document对象作为window对象的属性存在的，我们不用获取可以直接使用。

• 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

元素节点（Element）

• HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。

• 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。

• 比如：
document.getElementById()
根据id属性值获取一个元素节点对象。

文本节点（Text）

• 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。

• 它包括可以字面解释的纯文本内容。

• 文本节点一般是作为元素节点的子节点存在的。

• 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。

• 例如：
元素节点.firstChild;
获取元素节点的第一个子节点，一般为文本节点。

属性节点（Attr）

• 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

• 可以通过元素节点来获取指定的属性节点。

• 例如：
元素节点.getAttributeNode("属性名");

• 注意：我们一般不使用属性节点。

使用到的相关属性和方法 ※

获取元素节点

• 通过document对象调用

getElementById()
– 通过id属性获取一个元素节点对象
getElementsByTagName()
– 通过标签名获取一组元素节点对象
getElementsByName()
– 通过name属性获取一组元素节点对象

获取元素节点的子节点

• 通过具体的元素节点调用

getElementsByTagName()
– 方法，返回当前节点的指定标签名后代节点
childNodes
– 属性，表示当前节点的所有子节点
firstChild
– 属性，表示当前节点的第一个子节点
lastChild
– 属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

• 通过具体的节点调用

parentNode
– 属性，表示当前节点的父节点
previousSibling
– 属性，表示当前节点的前一个兄弟节点
nextSibling
– 属性，表示当前节点的后一个兄弟节点

节点的修改

• 主要指对元素节点的操作。

• 创建节点document.createElement(标签名)

• 删除节点父节点.removeChild(子节点)

• 替换节点父节点.replaceChild(新节点 , 旧节点)

• 插入节点父节点.appendChild(子节点) / 父节点.insertBefore(新节点 , 旧节点)

元素节点的属性

• 获取，元素对象.属性名
例：
element.value
element.id
element.className

• 设置，元素对象.属性名=新的值
例：
element.value = “hello”
element.id = “id01”
element.className = “newClass”

其他属性

• nodeValue
– 文本节点可以通过nodeValue属性获取和设置文本节点的内容

• innerHTML
– 元素节点通过该属性获取和设置标签内部的html代码

使用CSS选择器进行查询

querySelector()
querySelectorAll()
• 这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。
• 不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			/*
			 * 浏览器已经为我们提供 文档节点 对象。这个对象是window属性
			 * 	可以在页面中直接使用，文档节点代表的是整个网页
			 */
			console.log(document);//输出：[object HTMLDocument]
			
			//获取到button对象
			var btn = document.getElementById("btn");
			
			//修改按钮的文字
			btn.innerHTML = "I'm Button";
			
		</script>
	</body>
</html>

事件的简单介绍 ※

• 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

• JavaScript 与 HTML 之间的交互是通过事件实现的。

• 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			我们可以在事件对应的属性中设置一些js代码，
				这样当事件被触发时，这些代码将会执行
				
			这种写法我们称为结构和行为耦合，不方便维护，不推荐使用	
		-->
		<!--
		<button id="btn" οnmοusemοve="alert('你点我干嘛！');">我是一个按钮</button>
		-->
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			
			/*
			 * 事件，就是用户和浏览器之间的交互行为，
			 * 	比如：点击按钮，鼠标移动、关闭窗口。。。
			 */
			//获取按钮对象
			var btn = document.getElementById("btn");
			
			/*
			 * 可以为按钮的对应事件绑定处理函数的形式来响应事件
			 * 	这样当事件被触发时，其对应的函数将会被调用
			 */
			//绑定一个单击事件
			//像这种为单击事件绑定的函数，我们称为单击响应函数
			btn.onclick = function(){
				alert("你还点~~~");
			};
			
		</script>
	</body>
</html>

文档的加载 ※

大家会发现，上面的js代码都编写到了页面的下部。这是为了，可以在页面加载完毕以后再执行js代码。
在这里插入图片描述
其实也有办法，将js代码写在页面上边同时在页面加载完成后再执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
			 * 	读取到一行就运行一行,如果将script标签写到页面的上边，
			 * 	在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
			 * 	会导致无法获取到DOM对象
			 */
			
			/*
			 * onload事件会在整个页面加载完成之后才触发
			 * 为window绑定一个onload事件
			 * 		该事件对应的响应函数将会在页面加载完成之后执行，
			 * 		这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			 */
			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
	</body>
</html>

DOM操作（html+css+javascript 简单组合运用）

练习一 ※（基本属性、方法的使用）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		
		<script type="text/javascript">
		
			/*
			 * 定义一个函数，专门用来为指定元素绑定单击响应函数
		 	 * 	参数：
			 * 		idStr 要绑定单击响应函数的对象的id属性值
			 * 		fun 事件的回调函数，当单击元素时，该函数将会被触发
		 	*/
			function myClick(idStr , fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
			window.onload = function(){
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签，这个属性没有意义
						 */
						/*
						 * 如果需要读取元素节点属性，
						 * 	直接使用 元素.属性名
						 * 		例子：元素.id 元素.name 元素.value
						 * 		注意：class属性不能采用这种方式，
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};
				
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					//获取id为city的元素
					var city = document.getElementById("city");
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				//为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/*
					 * childNodes属性会获取包括文本节点在内的所有节点
					 * 根据DOM标签，标签间空白也会当成文本节点
					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
					var cns = city.childNodes;
					
					//alert(cns.length); //9
					/*for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}*/
					
					/*
					 * children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length); //4
				};
				
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					//phone.childNodes[0];
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
					
					//firstElementChild获取当前元素的第一个子元素
					/*
					 * firstElementChild不支持IE8及以下的浏览器，
					 * 	如果需要兼容他们尽量不要使用
					 */
					//fir = phone.firstElementChild;
					
					alert(fir);
				};
				
				//简便绑定一个单击响应函数：
				
				//为id为btn07的按钮绑定一个单击响应函数
				myClick("btn07",function(){
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//返回#bj的父节点
					var pn = bj.parentNode;
					
					//alert(pn.innerHTML);
					/*
					 * innerText
					 * 	- 该属性可以获取到元素内部的文本内容
					 * 	- 它和innerHTML类似，不同的是它会自动将html去除
					 */
					alert(pn.innerText);
				});
				
				//为id为btn08的按钮绑定一个单击响应函数
				myClick("btn08",function(){
					//获取id为android的元素
					var and = document.getElementById("android");
					
					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
					var ps = and.previousSibling;
					
					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
					//var pe = and.previousElementSibling;
					alert(ps);
				});
				
				//读取#username的value属性值
				myClick("btn09",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					//读取um的value属性值
					//文本框的value属性值，就是文本框中填写的内容
					alert(um.value);
				});
				
				//设置#username的value属性值
				myClick("btn10",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					um.value = "今天天气真不错~~~";
				});
				
				//返回#bj的文本值
				myClick("btn11",function(){
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					//alert(bj.innerHTML);
					//alert(bj.innerText);
					//获取bj中的文本节点
					alert(bj.firstChild.nodeValue);
				});
				
			};
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>你喜欢哪个城市?</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>你喜欢哪款单机游戏?</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>你手机的操作系统是?</p>

				<ul id="phone">
					<li>IOS</li>
					<li id="android">Android</li>
					<li>Windows Phone</li>
				</ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

练习二 ※ （点击按钮切换图片）

（自备图片）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 点击按钮切换图片
				 */
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/*
				 * 要切换图片就是要修改img标签的src属性
				 */
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组，用来保存图片的路径
				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
				
				//创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				
				//分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					/*
					 * 切换到上一张，索引自减
					 */
					index--;
					
					//判断index是否小于0
					if(index < 0){
						index = imgArr.length - 1;
					}
					
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				};
				
				next.onclick = function(){
					
					/*
					 * 切换到下一张是index自增
					 */
					index++;
					
					if(index > imgArr.length - 1){
						index = 0;
					}
					
					//切换图片就是修改img的src属性
					//要修改一个元素的属性 元素.属性 = 属性值
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				};
			};
		</script>
	</head>
	<body>
		<div id="outer">
			<p id="info"></p>
			<img src="img/1.jpg" alt="冰棍" />
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>
</html>

练习三 ※（全选练习）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">
	window.onload = function(){
		//获取四个多选框items
		var items = document.getElementsByName("items");
		//获取全选/全不选的多选框
		var checkedAllBox = document.getElementById("checkedAllBox");
		
		/*
		 * 全选按钮
		 * 	- 点击按钮以后，四个多选框全都被选中
		 */
		//1.#checkedAllBtn
		//为id为checkedAllBtn的按钮绑定一个单击响应函数
		var checkedAllBtn = document.getElementById("checkedAllBtn");
		checkedAllBtn.onclick = function(){
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//通过多选框的checked属性可以来获取或设置多选框的选中状态
				//alert(items[i].checked);
				
				//设置四个多选框变成选中状态
				items[i].checked = true;
			}
			//将全选/全不选设置为选中
			checkedAllBox.checked = true;
		};
		
		/*
		 * 全不选按钮
		 * 	- 点击按钮以后，四个多选框都变成没选中的状态
		 */
		//2.#checkedNoBtn
		//为id为checkedNoBtn的按钮绑定一个单击响应函数
		var checkedNoBtn = document.getElementById("checkedNoBtn");
		checkedNoBtn.onclick = function(){
			for(var i=0; i<items.length ; i++){
				//将四个多选框设置为没选中的状态
				items[i].checked = false;
			}
			//将全选/全不选设置为不选中
			checkedAllBox.checked = false;
		};
		
		/*
		 * 反选按钮
		 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
		 */
		//3.#checkedRevBtn
		var checkedRevBtn = document.getElementById("checkedRevBtn");
		checkedRevBtn.onclick = function(){
			//将checkedAllBox设置为选中状态
			checkedAllBox.checked = true;
			
			for(var i=0; i<items.length ; i++){
				items[i].checked = !items[i].checked;
				//判断四个多选框是否全选
				//只要有一个没选中则就不是全选
				if(!items[i].checked){
					//一旦进入判断，则证明不是全选状态
					//将checkedAllBox设置为没选中状态
					checkedAllBox.checked = false;
				}
			}
			//在反选时也需要判断四个多选框是否全都选中
		};
		
		/*
		 * 提交按钮：
		 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
		 */
		//4.#sendBtn
		//为sendBtn绑定单击响应函数
		var sendBtn = document.getElementById("sendBtn");
		sendBtn.onclick = function(){
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//判断多选框是否选中
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		};
		
		
		//5.#checkedAllBox
		/*
		 * 全选/全不选 多选框
		 * 	- 当它选中时，其余的也选中，当它取消时其余的也取消
		 * 
		 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁
		 */
		//为checkedAllBox绑定单击响应函数
		checkedAllBox.onclick = function(){
			//设置多选框的选中状态
			for(var i=0; i <items.length ; i++){
				items[i].checked = this.checked;
			}
		};
		
		//6.items
		/*
		 * 如果四个多选框全都选中，则checkedAllBox也应该选中
		 * 如果四个多选框没都选中，则checkedAllBox也不应该选中
		 */
		//为四个多选框分别绑定点击响应函数
		for(var i=0 ; i<items.length ; i++){
			items[i].onclick = function(){
				//将checkedAllBox设置为选中状态
				checkedAllBox.checked = true;
				
				for(var j=0 ; j<items.length ; j++){
					//判断四个多选框是否全选
					//只要有一个没选中则就不是全选
					if(!items[j].checked){
						//一旦进入判断，则证明不是全选状态
						//将checkedAllBox设置为没选中状态
						checkedAllBox.checked = false;
						//一旦进入判断，则已经得出结果，不用再继续执行循环
						break;
					}
				}
			};
		}
	};
</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>
</html>

练习四 ※（其他方法的使用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				
				//获取body标签
				//var body = document.getElementsByTagName("body")[0];
				
				/*
				 * 在document中有一个属性body，它保存的是body的引用
				 */
				var body = document.body;
				
				/*
				 * document.documentElement保存的是html根标签
				 */
				var html = document.documentElement;
				//console.log(html);
				
				/*
				 * document.all代表页面中所有的元素
				 */
				var all = document.all;
				//console.log(all.length);
				/*for(var i=0 ; i<all.length ; i++){
					console.log(all[i]);
				}*/
				
				//all = document.getElementsByTagName("*");
				//console.log(all.length);
				
				/*
				 * 根据元素的class属性值查询一组元素节点对象
				 * getElementsByClassName()可以根据class属性值获取一组元素节点对象，
				 * 	但是该方法不支持IE8及以下的浏览器
				 */
				//var box1 = document.getElementsByClassName("box1");
				//console.log(box1.length);
				
				//获取页面中的所有的div
				//var divs = document.getElementsByTagName("div");
				
				//获取class为box1中的所有的div
				/*
				 * document.querySelector()
				 * 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
				 * 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
				 * 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
				 */
				var div = document.querySelector(".box1 div");
				var box1 = document.querySelector(".box1");
				//console.log(div.innerHTML);
				//console.log(box1.innerHTML);
				
				/*
				 * document.querySelectorAll()
				 * 	- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
				 * 	- 即使符合条件的元素只有一个，它也会返回数组
				 */
				box1 = document.querySelectorAll(".box1");
				box1 = document.querySelectorAll("#box2");
				console.log(box1);
				
			};
		</script>
	</head>
	<body>
		<div id="box2"></div>	
		<div class="box1">
			我是第一个box1	 
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div></div>
	</body>
</html>

练习五 ※ （增删改）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function() {
				//创建一个"广州"节点,添加到#city下
				myClick("btn01",function(){
					//创建广州节点 <li>广州</li>
					//创建li元素节点
					/*
					 * document.createElement()
					 * 	可以用于创建一个元素节点对象，
					 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
					 * 	并将创建好的对象作为返回值返回
					 */
					var li = document.createElement("li");
					
					//创建广州文本节点
					/*
					 * document.createTextNode()
					 * 	可以用来创建一个文本节点对象
					 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
					 */
					var gzText = document.createTextNode("广州");
					
					//将gzText设置li的子节点
					/*
					 * appendChild()
					 * 	 - 向一个父节点中添加一个新的子节点
					 * 	 - 用法：父节点.appendChild(子节点);
					 */
					li.appendChild(gzText);
					
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//将广州添加到city下
					city.appendChild(li);
					
				});
				
				//将"广州"节点插入到#bj前面
				myClick("btn02",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * insertBefore()
					 * 	- 可以在指定的子节点前插入新的子节点
					 *  - 语法：
					 * 		父节点.insertBefore(新节点,旧节点);
					 */
					city.insertBefore(li , bj);
				});
				
				//使用"广州"节点替换#bj节点
				myClick("btn03",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * replaceChild()
					 * 	- 可以使用指定的子节点替换已有的子节点
					 * 	- 语法：父节点.replaceChild(新节点,旧节点);
					 */
					city.replaceChild(li , bj);
				});
				
				//删除#bj节点
				myClick("btn04",function(){
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * removeChild()
					 * 	- 可以删除一个子节点
					 * 	- 语法：父节点.removeChild(子节点);
					 * 		
					 * 		子节点.parentNode.removeChild(子节点);
					 */
					//city.removeChild(bj);
					
					bj.parentNode.removeChild(bj);
				});
				
				//读取#city内的HTML代码
				myClick("btn05",function(){
					//获取city
					var city = document.getElementById("city");
					
					alert(city.innerHTML);
					alert(city.innerText);
				});
				
				//设置#bj内的HTML代码
				myClick("btn06" , function(){
					//获取bj
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				
				myClick("btn07",function(){
					//向city中添加广州
					var city = document.getElementById("city");
					/*
					 * 使用innerHTML也可以完成DOM的增删改的相关操作
					 * 一般我们会两种方式结合使用
					 */
					//city.innerHTML += "<li>广州</li>";
					
					//创建一个li
					var li = document.createElement("li");
					//向li中设置文本
					li.innerHTML = "广州";
					//将li添加到city中
					city.appendChild(li);
				});
			};
			
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>你喜欢哪个城市?</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

练习六 ※ （添加删除记录练习—表格的运用）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 删除tr的响应函数
			 */
			function delA() {

				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;

				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}

				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};

			window.onload = function() {

				/*
				 * 点击超链接以后，删除一个员工的信息
				 */

				//获取所有额超链接
				var allA = document.getElementsByTagName("a");
				//为每个超链接都绑定一个单击响应函数
				for(var i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}

				/*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */
				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {
					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					
					var nameReg = /[A-z]+/;
					var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
					var salaryReg = /[0-9]+/;
					if(!emailReg.test(email)||!salaryReg.test(salary)||!nameReg.test(name)){
						alert("姓名/邮件/工资输入有问题");
					}else{
						alert("添加成功");
						//创建一个tr
						var tr = document.createElement("tr");

						//创建四个td
						var nameTd = document.createElement("td");
						var emailTd = document.createElement("td");
						var salaryTd = document.createElement("td");
						var aTd = document.createElement("td");

						//创建一个a元素
						var a = document.createElement("a");

						//创建文本节点
						var nameText = document.createTextNode(name);
						var emailText = document.createTextNode(email);
						var salaryText = document.createTextNode(salary);
						var delText = document.createTextNode("Delete");

						//将文本条件到td中
						nameTd.appendChild(nameText);
						emailTd.appendChild(emailText);
						salaryTd.appendChild(salaryText);
						//向a中添加文本
						a.appendChild(delText);
						//将a添加到td中
						aTd.appendChild(a);

						//将td添加到tr中
						tr.appendChild(nameTd);
						tr.appendChild(emailTd);
						tr.appendChild(salaryTd);
						tr.appendChild(aTd);

						//向a中添加href属性
						a.href = "javascript:;";

						//为新添加的a再绑定一次单击响应函数
						a.onclick = delA;

						//获取table
						var employeeTable = document.getElementById("employeeTable");
						//获取employeeTable中的tbody
						var tbody = employeeTable.getElementsByTagName("tbody")[0];
						//将tr添加到tbody中
						tbody.appendChild(tr);
						
						/* 另一种方式
						//创建一个tr
						var tr = document.createElement("tr");

						//设置tr中的内容
						tr.innerHTML = "<td>"+name+"</td>"+
										"<td>"+email+"</td>"+
										"<td>"+salary+"</td>"+
										"<td><a href='javascript:;'>Delete</a></td>";
										
						//获取刚刚添加的a元素，并为其绑定单击响应函数				
						var a = tr.getElementsByTagName("a")[0];
						a.onclick = delA;
						
						//获取table
						var employeeTable = document.getElementById("employeeTable");
						//获取employeeTable中的tbody
						var tbody = employeeTable.getElementsByTagName("tbody")[0];
						//将tr添加到tbody中
						tbody.appendChild(tr); */
					}
				};
			};
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td>
					<a href="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td>
					<a href="deleteEmp?id=002">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td>
					<a href="deleteEmp?id=003">Delete</a>
				</td>
			</tr>
		</table>

		<div id="formDiv">
			<h4>添加新员工</h4>
			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton">
						Submit
					</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

@CHARSET "UTF-8";
#total {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: none;
}

li {
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float: left;
}

.inner {
	width: 400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

#employeeTable {
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
}

th,td {
	background-color: white;
}

#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}

#formDiv input {
	width: 100%;
}

.word {
	width: 40px;
}

.inp {
	width: 200px;
}

练习七 ※ （使用DOM操作CSS）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 点击按钮以后，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//修改box1的宽度
					/*
					 * 通过JS修改元素的样式：
					 * 	语法：元素.style.样式名 = 样式值
					 * 
					 * 注意：如果CSS的样式名中含有-，
					 * 		这种名称在JS中是不合法的比如background-color
					 * 		需要将这种样式名修改为驼峰命名法，
					 * 		去掉-，然后将-后的字母大写
					 * 
					 * 我们通过style属性设置的样式都是内联样式，
					 * 	而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
					 * 
					 * 但是如果在样式中写了!important，则此时样式会有最高的优先级，
					 * 	即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
					 * 	所以尽量不要为样式添加!important
					 */
					box1.style.width = "300px";
					box1.style.height = "300px";
					box1.style.backgroundColor = "yellow";
				};
				//点击按钮2以后，读取元素的样式
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//读取box1的样式
					/*
					 * 	语法：元素.style.样式名
					 * 
					 * 通过style属性设置和读取的都是内联样式
					 * 	无法读取样式表中的样式
					 */
					alert(box1.style.height);
					alert(box1.style.width);
				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<button id="btn02">点我一下2</button>
		<br /><br />
		<div id="box1"></div>
	</body>
</html>

练习八 ※ （读取元素的样式）

通过练习七可以发现一个问题，只有点过按钮一之后，按钮二才能读取到box1设置后的高度和宽度。因为通过style属性设置和读取的都是内联样式，它无法读取样式表中的样式。获取元素的当前显示的样式：元素.currentStyle.样式名。但是这种方式无法修改css的样式。

总结如下：（读取元素的样式）

box1.style.height
无法读取样式表中的样式，但是可以读取修改后的样式以及修改样式。

box1.currentStyle.width
读取样式，但是无法修改样式。IE8使用的方法。

getComputedStyle(box1,null).width
读取样式，但是无法修改样式。该方法不支持IE8及以下的浏览器。
该方法会返回一个对象，对象中封装了当前元素对应的样式。
即该部分的完整代码是：

var obj = getComputedStyle(box1,null);
alert(obj.width);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//点击按钮以后读取box1的样式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//读取box1的宽度
					//如果一上来就这么输出，是拿不到这个高度的
					//alert(box1.style.height);
					
					/*
					 * 获取元素的当前显示的样式
					 * 	语法：元素.currentStyle.样式名
					 * 它可以用来读取当前元素正在显示的样式
					 * 	如果当前元素没有设置该样式，则获取它的默认值
					 * 
					 * currentStyle只有IE浏览器支持，其他的浏览器都不支持
					 */
					
					alert(box1.currentStyle.width);
					//box1.currentStyle.width = "200px";//无法修改
					//alert(box1.currentStyle.backgroundColor);
					
					/*
					 * 在其他浏览器中可以使用
					 * 		getComputedStyle()这个方法来获取元素当前的样式
					 * 		这个方法是window的方法，可以直接使用
					 * 需要两个参数
					 * 		第一个：要获取样式的元素
					 * 		第二个：可以传递一个伪元素，一般都传null
					 * 
					 * 该方法会返回一个对象，对象中封装了当前元素对应的样式
					 * 	可以通过对象.样式名来读取样式
					 * 	如果获取的样式没有设置，则会获取到真实的值，而不是默认值
					 * 	比如：没有设置width，它不会获取到auto，而是一个长度
					 * 
					 * 但是该方法不支持IE8及以下的浏览器
					 * 
					 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，
					 * 	不能修改，如果要修改必须通过style属性
					 */
					//var obj = getComputedStyle(box1,null);
					//alert(obj.width);
					/*alert(getComputedStyle(box1,null).width);*/
					//正常浏览器的方式
					//alert(getComputedStyle(box1,null).backgroundColor);
					
					//IE8的方式
					//alert(box1.currentStyle.backgroundColor);
					
					alert(getStyle(box1,"width"));
				};
			};
			
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
				if(window.getComputedStyle){
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
			}
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<br /><br />
		<div id="box1" ></div>
	</body>
</html>

练习九 ※ （其他样式操作的属性）

box1.clientWidth
获取元素的可见宽度，但是不能修改。包括内容区和内边距

box1.offsetWidth
获取元素的整个的宽度，但是不能修改。包括内容区、内边距和边框

var op = box1.offsetParent;
获取当前元素的定位父元素

box4.scrollWidth
获取元素整个滚动区域的宽度

box4.scrollLeft
获取水平滚动条滚动的距离

box4.scrollTop
获取垂直滚动条滚动的距离
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 10px;
				border: 10px solid yellow;
			}
			
			#box2{
				padding: 100px;
				background-color: #bfa;
			}
			
			#box4{
				width: 200px;
				height: 300px;
				background-color: #bfa;
				overflow: auto;
			}
			
			#box5{
				width: 450px;
				height: 600px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				var box4 = document.getElementById("box4");
				
				btn01.onclick = function(){
					/*
					 * clientWidth
					 * clientHeight
					 * 	- 这两个属性可以获取元素的可见宽度和高度
					 * 	- 这些属性都是不带px的，返回的是一个数字，可以直接进行计算
					 * 	- 会获取元素宽度和高度，包括内容区和内边距
					 *  - 这些属性都是只读的，不能修改
					 */
					//alert(box1.clientWidth);
					//alert(box1.clientHeight);
					//box1.clientHeight = 300;//无法修改
					
					/*
					 * offsetWidth
					 * offsetHeight
					 * 	- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
					 */
					//alert(box1.offsetWidth);
					
					/*
					 * offsetParent
					 * 	- 可以用来获取当前元素的定位父元素
					 *  - 会获取到离当前元素最近的开启了定位的祖先元素
					 * 		如果所有的祖先元素都没有开启定位，则返回body
					 */
					//var op = box1.offsetParent;
					//alert(op.id);
					
					/*
					 * offsetLeft
					 * 	- 当前元素相对于其定位父元素的水平偏移量
					 * offsetTop
					 * 	- 当前元素相对于其定位父元素的垂直偏移量
					 */
					//alert(box1.offsetLeft);
					
					/*
					 * scrollWidth
					 * scrollHeight
					 * 	- 可以获取元素整个滚动区域的宽度和高度
					 */
					//alert(box4.clientHeight);
					//alert(box4.scrollWidth);
					
					/*
					 * scrollLeft
					 * 	- 可以获取水平滚动条滚动的距离
					 * scrollTop
					 * 	- 可以获取垂直滚动条滚动的距离
					 */
					//alert(box4.scrollLeft);
					//alert(box4.scrollTop);
					
					//alert(box4.clientHeight); // 283
					
					//当满足scrollHeight - scrollTop == clientHeight
					//说明垂直滚动条滚动到底了
					
					//当满足scrollWidth - scrollLeft == clientWidth
					//说明水平滚动条滚动到底
					//alert(box4.scrollHeight - box4.scrollTop); // 600
				};
			};
		</script>
	</head>
	
	<body id="body">
	
		<button id="btn01">点我一下</button>
		
		<br /><br />
		
		 <div id="box4">
		 	<div id="box5"></div>
		 </div>
		
		<br /><br />
		
		<div id="box3">
			<div id="box2" style="position: relative;">
				<div id="box1"></div>
			</div>
		</div>
		
	</body>
</html>

练习十 ※ （注册协议看到底才能注册）

涉及到了一个新用法：info.onscroll = function(){};
该事件会在元素的滚动条滚动时触发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#info{
				width: 300px;
				height: 500px;
				background-color: #bfa;
				overflow: auto;
			}
			
		</style>
		<script type="text/javascript">
		
			window.onload = function(){
				/*
				 * 当垂直滚动条滚动到底时使表单项可用
				 * onscroll
				 * 	- 该事件会在元素的滚动条滚动时触发
				 */
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//获取两个表单项
				var inputs = document.getElementsByTagName("input");
				//为info绑定一个滚动条滚动的事件
				info.onscroll = function(){
					//检查垂直滚动条是否滚动到底
					if(info.scrollHeight - info.scrollTop == info.clientHeight){
						//滚动条滚动到底，使表单项可用
						/*
						 * disabled属性可以设置一个元素是否禁用，
						 * 	如果设置为true，则元素禁用
						 * 	如果设置为false，则元素可用
						 */
						inputs[0].disabled = false;
						inputs[1].disabled = false;
					}
				};
			};
			
		</script>
	</head>
	<body>
		<h3>欢迎亲爱的用户注册</h3>
		<p id="info">
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
		</p>
		<!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
		<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守
		<input type="submit" value="注册" disabled="disabled" />
	</body>
</html>

小结 ※※

常用的简便方法：（所有相关内容可在上述练习中找到，写在这里为了方便寻找）

function myClick(idStr, fun) {
	var btn = document.getElementById(idStr);
	btn.onclick = fun;
}

function getStyle(obj , name){
	if(window.getComputedStyle){
		//正常浏览器的方式，具有getComputedStyle()方法
		return getComputedStyle(obj , null)[name];
	}else{
		//IE8的方式，没有getComputedStyle()方法
		return obj.currentStyle[name];
	}
}

function delA() {
	var tr = this.parentNode.parentNode; //根据需要修改
	var name = tr.children[0].innerHTML;
	//删除之前弹出一个提示框
	var flag = confirm("确认删除" + name + "吗?");
	if(flag) {
		tr.parentNode.removeChild(tr);
	}
	return false;
}

window.onload = function(){

	var box1 = document.getElementById("box1");
	//获取样式
	myClick("btn01",function(){
		alert(getStyle(box1,"width"));
	});
	
	//向标签中添加元素
	myClick("btn02",function(){
		var city = document.getElementById("city");
		var li = document.createElement("li");
		li.innerHTML = "广州";
		city.appendChild(li);
	});
	
	//向标签中添加元素
	myClick("btn03",function(){
		var city = document.getElementById("city");
		city.innerHTML += "<li>广州</li>";
	});
	
	//设置拥有删除效果的超链接
	var allA = document.getElementsByTagName("a");
	//为每个超链接都绑定一个单击响应函数
	for(var i = 0; i < allA.length; i++) {
		allA[i].onclick = delA;
	}
				
	//比较复杂的添加元素
	//向table中添加元素
	myClick("btn04",function(){
		//有value是因为，原本的标签是input的表单项
		var name = document.getElementById("empName").value;
		var email = document.getElementById("email").value;
		var salary = document.getElementById("salary").value;
					
		//创建一个tr
		var tr = document.createElement("tr");
		//设置tr中的内容
		tr.innerHTML = "<td>"+name+"</td>"+
						"<td>"+email+"</td>"+
						"<td>"+salary+"</td>"+
						"<td><a href='javascript:;'>Delete</a></td>";								
		//获取刚刚添加的a元素，并为其绑定单击响应函数				
		var a = tr.getElementsByTagName("a")[0];
		a.onclick = delA;
						
		//获取table
		var employeeTable = document.getElementById("employeeTable");
		//获取employeeTable中的tbody
		var tbody = employeeTable.getElementsByTagName("tbody")[0];
		//将tr添加到tbody中
		tbody.appendChild(tr); */
	});
}