DOM操作HTML（JS加强）

浅浅的花香味﹌ 2022-09-25 13:27 153阅读 0赞

## DOM简介和解析HTML  ##

DOM 文档对象类型  Document Object Model

文档：标记型文档（HTML/XML）

对象：封装属性和行为（方法）

模型：共同特征的体现。

DOM解析HTML

通过DOM的方法，把HTML全部(元素（标签）、文本、属性）都封装成了对象。

DOM想要操作的标记型文档先解析。（解析器）

DOM解析HTML（浏览器就可以解析HTML）

![Center][]

## DOM的三个级别和DHTML的介绍 ##

DOM的模型有三种：

DOM级别一：将HTML文档封装成对象。

DOM级别二：在级别一的基础上增添新的功能，例如：对于事件和CSS样式的支持。

DOM级别三：支持XML1.0的一些新特性。

DHTML

动态的HTML，它不是一门语言，是多项技术综合体的简称。

包括HTML，CSS，DOM，JavaScript。

这四种语言的职责：

HTML：负责提供标签，封装数据，这样便于操作数据。

CSS：负责提供样式，对标签中的数据进行样式定义。

DOM：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。

JavaScript：负责提供程序设计语言，对页面中的对象进行逻辑操作。

BOM和HTML DOM关系图

![Center 1][]

## Node接口的特性和方法 ##

<table> 
 <tbody> 
  <tr> 
   <td><strong><span style="font-size:18px">特性和方法</span></strong></td> 
   <td><strong><span style="font-size:18px">返回类型</span></strong></td> 
   <td><strong><span style="font-size:18px">说明</span></strong></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">nodeName</span></td> 
   <td><span style="font-size:14px">String</span></td> 
   <td><span style="font-size:14px">节点的名称：根据节点的类型而定义</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">nodeValue</span></td> 
   <td><span style="font-size:14px">String</span></td> 
   <td><span style="font-size:14px">节点的值：根据节点的类型而定义<span style="white-space:pre"> </span> </span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">nodeType</span></td> 
   <td><span style="font-size:14px">Number</span></td> 
   <td><span style="font-size:14px">节点的类型常量之一</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">ownerDocument</span></td> 
   <td><span style="font-size:14px">Document</span></td> 
   <td><span style="font-size:14px">指向这个节点所属的文档</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">firstChild</span></td> 
   <td><span style="font-size:14px">Node</span></td> 
   <td><span style="font-size:14px">指向在childNodes列表中的第一个节点</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">lastChild</span></td> 
   <td><span style="font-size:14px">Node</span></td> 
   <td><span style="font-size:14px">指向在childNodes列表中的最后一个节点</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">childNodes</span></td> 
   <td><span style="font-size:14px">NodeList</span></td> 
   <td><span style="font-size:14px">所有子节点的列表</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">parentNode</span></td> 
   <td><span style="font-size:14px">Node</span></td> 
   <td><span style="font-size:14px">返回一个给定节点的父节点</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">previousSibling</span></td> 
   <td><span style="font-size:14px">Node</span></td> 
   <td><span style="font-size:14px">指向前一个兄弟节点；如果这个节点就是第一个节点，那么该值为null</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">nextSibling</span></td> 
   <td><span style="font-size:14px">Node</span></td> 
   <td><span style="font-size:14px">指向后一个兄弟节点；如果这个节点就是最后一个节点，那么该值为null</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">hasChildNodes</span></td> 
   <td><span style="font-size:14px">Boolean</span></td> 
   <td><span style="font-size:14px">当childNodes包含一个或多个节点时，返回真</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">attributes</span></td> 
   <td><span style="font-size:14px">NamedNodeMap</span></td> 
   <td><span style="font-size:14px">包含了代表一个元素的特性的Attr对象；仅用于Element节点</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">appendChild(node)</span></td> 
   <td><span style="font-size:14px">Node</span></td> 
   <td><span style="font-size:14px">将node添加到childNodes的末尾</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">removeChild（node）</span></td> 
   <td><span style="font-size:14px">Node</span></td> 
   <td><span style="font-size:14px">从childNodes中删除node</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">replaceChild（newnode,oldnode）</span></td> 
   <td><span style="font-size:14px">Node</span></td> 
   <td><span style="font-size:14px">将childNodes中的oldNode替换成newNode</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">insertBefore（newNode, refnode）</span></td> 
   <td><span style="font-size:14px">Node</span></td> 
   <td><span style="font-size:14px">在childNodes中的refnode之前插入newnode</span></td> 
  </tr> 
 </tbody> 
</table>

## Document对象 ##

每个载入浏览器的HTML文档都会成为Document对象。

常用属性：

*  all\[\] 提供对文档中所有HTML元素的访问 FF不支持
 *  forms\[\] 返回对文档中所有Form对象引用。
 *  body 提供提供对<body>元素的直接访问

常用方法：

*  getElementById() 返回对拥有指定id的第一个对象的引用。
 *  getELementsByName() 返回带有指定名称的对象集合。
 *  getELementsByTagName() 返回带有指定标签名的的对象集合。
 *  write()向文档写HTML表达式或JavaScript代码。

Document对象练习

在无序列表<ul>中添加<li>条目

思路：

*  有HTML的文档，在内存中首先存在DOM树型结构。
 *  创建标签对象（元素对象）。
 *  创建文本对象。
 *  把文本对象添加标签对象的内部。
 *  最后把标签对象添加到ul对象中。

方法（网页制作文档）

*  createElement("li")                     创建元素对象。
 *  createTextNode("文本内容")      创建文本对象。
 *  appendChild(node)                    添加子节点。

添加元素实例：

<!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>Insert title here</title>
    </head>
    <body>
    	
    	<ul>
    		<li>北京</li>
    		<li>上海</li>
    		<li>广州</li>
    	</ul>
    	
    </body>
    	<script type="text/javascript">
    		/* 
    			需求：在ul无序列表下，添加一个子节点。<li>深圳</li>
    		*/
    		
    		// 创建元素对象
    		var li = document.createElement("li");
    		// 创建文本的对象
    		var text = document.createTextNode("深圳");
    		// 把文本对象添加到元素对象下面，作为子节点
    		li.appendChild(text);
    		// 获取ul
    		var ul = document.getElementsByTagName("ul")[0];
    		// 把元素对象添加ul的下面，作为子节点
    		ul.appendChild(li);
    	</script>
    </html>

![Center 2][]

## Element对象  ##

操纵Element对象的属性：

*  获取属性：getAttribute（name）方法
 *  设置属性：setAttribute（name，value）方法
 *  删除属性：removeAttribute（name）方法

在ELement对象中查找Element对象

在ELement对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName（name）而该方法返回的是一个集合。

注意：在获取Element对象的子ELement对象时不要使用childNodes 因为childNodes包含空格，要使用getElementsByTagName方法。

\* 查找标签下的标签  
  \* 例如查找ul标签下的li标签，如果是一组ul列表，那直接可以查找li标签即可，但是如果有多组ul列表，那就不能使用该方法了。  
  \* Node对象提供了属性 childNodes  可以获取指定标签下的所有子节点  
  \* 但是该方法获取到子节点会包含换行符，所以浏览器的兼容性不好，不推荐使用。  
\*\*\*\*\* 推荐使用  getElementsByTagName();   
<ul>  
  <li></li>  
  <li></li>  
</ul>

## node的常用属性（节点名称、值和类型） ##

nodeName：其内容是给定节点的名字

*   如果是元素节点，nodeName返回这个元素的名称（标签名大写）
 *  如果是属性节点，nodeName返回这个属性的名称（属性名）
 *  如果是文本节点，nodeName返回一个内容为\#text的字符串

nodeType：返回一个整数，这个数值代表着给定节点的类型。

*  Node.ELEMENT\_NODE          1       ——元素节点
 *  Node.ATTRIBUTE\_NODE       2       —— 属性节点
 *  Node.TEXT\_NODE                  3       ——文本节点

nodeValue：返回给定节点的当前值（字符串）

*  如果给定节点是一个属性节点，返回值是这个属性的值。
 *  如果给定节点是一个文本节点，返回值是这个文本节点内容。
 *  如果给定节点是一个元素节点，返回值是null。

注意：想要获取标签中的属性节点可以用  
      getAttributeNode(“”);方法。  
      获取获取文本节点，可以采用  
      当前标签对象的childNodes属性，再取下标位置。  
      或者直接使用firstNode和lastNode属性。

## 父节点、子节点和同辈节点 ##

父节点：parentNode

*  parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才可能包含子节点。
 *  Document节点没有父节点。

子节点

*  childNodes：获取指定节点的所有子节点集合。
 *  firstChild：获取指定节点的第一个子节点。
 *  lastChild：获取指定节点的最后一个子节点。

同辈节点

*  nextSibling：返回一个给定节点的下一个兄弟节点。
 *  previousSibling：返回一个给定节点的上一个兄弟节点。

注意：

IE6-8                                      IE9-10 Chrome FireFox  
firstChild 第一个节点                 firstElementChild 第一个节点  
lastChild最后一个节点、               lastElementChild 最后一个节点  
nextSibling 下一同级节点              nextElementSibling 下一同级节点  
previousSibling 上一同级节点          previousElementSibling 上一同级节点  
Ul  + span

## 节点属性 ##

*  节点属性attributes是Node接口定义的属性。
 *  节点属性attributes就是节点（特别是元素节点）的属性。
 *  事实上，attributes中包含的是一个节点的所有属性的集合。
 *  attributes.getNameItem()和ELement对象的getAttribute()方法类似。

## 检测子节点和属性 ##

*  查看是否存在子节点：hasChildNodes（）。
 *  查看是否存在属性：hasAttributes（）。
 *  即使节点中没有定义属性，其attributes属性仍然有效的，而且长度值为0。同样节点中的childNodes属性也是如此。
 *  当你想知道某个节点是否包含子节点和属性时，可以使用hasChildNodes（）和hasAttributes（）方法。但是如果还想知道该节点中包含多少子节点和属性的话，仍要使用attributes和childNodes属性。
 *  在IE浏览器中，不存在hasAttributes（）方法。

## 操作DOM节点树 ##

插入节点

*  appendChild（）方法
 *  insertBefore（new，old）方法
 *  没有insertAfter方法

删除节点：removeChild（）方法

替换节点：replaceChild（new，old）方法

复制节点：cloneNode（boolean）方法其中，参数boolean是判断是否复制子节点。

移动节点：由以下三种方法组合完成

查找节点

*    getElementById（）：通过节点的id属性，查找对应节点。
 *  getElementsByName（）：通过节点的name属性，查找对应节点。
 *  getElementsByTagName（）：通过节点名称，查找对应节点 。

插入节点

*  appendChild（）方法
 *  insertBefore（）方法

替换节点：replaceChild（）方法

<!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>Insert title here</title>
    </head>
    <body>
    
    	<input type="text" id="nameId" value="zhangsan" />
    	
    	<span id="spanId">
    		我是span的区域
    	</span>
    	
    	
    	<ul>
    		<li>北京</li>
    		<li id="sh">上海</li>
    		<li>广州</li>
    	</ul>
    	<ul>
    		<li>小时代1</li>
    		<li id="xsd2">小时代2</li>
    		<li>小时代3</li>
    	</ul>
    	
    	<hr/>
    	
    	<button id="btnId">
    		我是按钮
    	</button>
    	
    	<span id="spanId2"></span>
    	
    </body>
    	<script type="text/javascript">
    		/* 
    							元素				属性				文本
    			nodeName		大写的标签名称		属性名称			#text
    			nodeType		1				2				3
    			nodeValue		null			属性的值			文本的内容
    			
    			* parentNode		获取父节点
    			* childNodes		所有子节点
    			* firstChild		第一个子节点
    			* lastChild			最后一个子节点
    			* nextSibling		下一个兄弟节点
    			* previousSibling	上一个兄弟节点
    			
    			* appendChild(node)			父节点调用，在末尾添加子节点
    			* insertBefore(new,old)		父节点调用，在指定节点之前添加子节点
    			* replaceChild(new,old)		父节点调用，替换节点
    			* removeChild(node)			父节点调用,删除节点
    			
    			* cloneNode(boolean)		不是父节点调用,复制节点
    				* boolean	：如果是true，复制子节点
    							：如果是false，不复制子节点，默认是false
    		
    		
    		var input = document.getElementById("nameId");
    		//alert(input.nodeName);		// INPUT
    		//alert(input.nodeType);		// 1
    		//alert(input.nodeValue);		// null
    		
    		var attr = input.getAttributeNode("type");
    		//alert(attr.nodeName);		// type
    		//alert(attr.nodeType);		// 2
    		//alert(attr.nodeValue);		// text
    		
    		var span = document.getElementById("spanId");
    		var text = span.firstChild;
    		//alert(text.nodeName);		// #text
    		//alert(text.nodeType);		// 3
    		//alert(text.nodeValue);		// 我是span的区域
    		
    		var ul = document.getElementById("ulId");
    		var li = ul.firstElementChild;
    		// alert(li.nodeType);		//1
    		
    		// 是否包含子节点
    		// alert(ul.hasChildNodes());
    		// 是否包含属性
    		// alert(ul.hasAttributes());
    		
    		
    		// 点击上海，用小时代2替换上海
    		document.getElementById("sh").onclick = function(){
    			// var sh = document.getElementById("sh");
    			// var xsd2 = document.getElementById("xsd2");
    			// var ul = sh.parentNode;
    			// ul.replaceChild(xsd2, sh);
    			
    			var ul = this.parentNode;
    			var xsd2 = document.getElementById("xsd2");
    			ul.replaceChild(xsd2,this);
    		};
    		
    		
    		// 删除节点
    		document.getElementById("sh").onclick = function(){
    			// this.parentNode.removeChild(this);
    			var sh = document.getElementById("sh");
    			var ul = sh.parentNode;
    			ul.removeChild(sh);
    		};
    		*/
    		
    		// 复制button的按钮，添加到span标签的中间
    		var btn = document.getElementById("btnId");
    		var newbtn = btn.cloneNode(true);
    		var span = document.getElementById("spanId2");
    		span.appendChild(newbtn);
    		
    	</script>
    </html>

![Center 3][]

## innerHTML属性 ##

*  浏览器几乎都支持该属性，但不是DOM标准的组成部分。
 *  innerHTML属性可以用来读写 某给定元素里的HTML内容。
 *  innerHTML属性多与div或span标签配合使用。

![Center 4][]

实例一：全选练习

<!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>Insert title here</title>
    
    </head>
    <body>
    	
    	<input type="checkbox" id="boxId" οnclick="selOrNo()"/>全选/全不选<br/>
    	<input type="checkbox" name="love" />篮球<br/>
    	<input type="checkbox" name="love" />足球<br/>
    	<input type="checkbox" name="love" />排球<br/>
    	<input type="checkbox" name="love" />冰球<br/>
    	<input type="button" value="全选" οnclick="selAll()"/>
    	<input type="button" value="全不选" οnclick="selNo()"/>
    	<input type="button" value="反选" οnclick="selOth()"/>
    	
    </body>
    	<script type="text/javascript">
    		/* 
    			* 思路：
    				全选：获取名称是love的所有的input标签
    				循环遍历，为了拿到每一个input标签，同时，设置checked
    		*/
    		// 全选
    		function selAll(){
    			// 获取名称是love的所有的input的标签，返回是数组
    			var inputs = document.getElementsByName("love");
    			// 为了拿到每一个input标签，同时，设置checked
    			for(var i=0;i<inputs.length;i++){
    				// 获取每一个input对象
    				var input = inputs[i];
    				// 设置checked属性
    				input.checked = true;
    			}
    		}
    		
    		// 全不选
    		function selNo(){
    			// 获取名称是love的所有的input标识
    			var inputs = document.getElementsByName("love");
    			for(var i=0;i<inputs.length;i++){
    				var input = inputs[i];
    				input.checked = false;
    			}
    		}
    		
    		// 反选
    		function selOth(){
    			// 获取名称是love的所有的input的标签，返回是数组
    			var inputs = document.getElementsByName("love");
    			// 为了拿到每一个input标签，同时，设置checked
    			for(var i=0;i<inputs.length;i++){
    				// 获取每一个input对象
    				var input = inputs[i];
    				// 判断，当前的input标签的checked属性，是否是为true，如果是true，设置成false，反之。
    				/* if(input.checked == true){
    					input.checked = false;
    				}else{
    					input.checked = true;
    				} */
    				
    				input.checked = !input.checked;
    			}
    		}
    		
    		// 全选/全不选
    		function selOrNo(){
    			// 获取第一个input对象
    			var box = document.getElementById("boxId");
    			// 判断，判断是否被选中
    			if(box.checked == true){
    				// 调用全选的方法
    				selAll();
    			}else{
    				selNo();
    			}
    		}
    		
    	</script>
    </html>

![Center 5][]  
实例二：下拉列表左右选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    * { margin:0; padding:0; }
    div.centent {
       float:left;
       text-align: center;
       margin: 10px;
    }
    span { 
    	display:block; 
    	margin:2px 2px;
    	padding:4px 10px; 
    	background:#898989;
    	cursor:pointer;
    	font-size:12px;
    	color:white;
    }
    </style>
    
    
    </head>
    <body>
    	<div class="centent">
    		<select multiple="multiple" id="select1" style="width:100px;height:160px;">
    			<option value="1">选项1</option>
    			<option value="2">选项2</option>
    			<option value="3">选项3</option>
    			<option value="4">选项4</option>
    			<option value="5">选项5</option>
    			<option value="6">选项6</option>
    			<option value="7">选项7</option>
    		</select>
    		<div>
    			<span id="add">选中添加到右边>></span>
    			<span id="add_all" >全部添加到右边>></span>
    		</div>
    	</div>
    	
    	<div class="centent">
    		<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
    			<option value="8">选项8</option>
    		</select>
    		<div>
    			<span id="remove"><<选中删除到左边</span>
    			<span id="remove_all"><<全部删除到左边</span>
    		</div>
    	</div>
    
    </body>
    
    <script type="text/javascript">
    	/* 	
    		* 思路：把select1的option（被选中），加入到select中。
    			* select标签上有默认值
    				* selected== true，说明被中
    				
    			* 获取select1下面所有的option对象
    				* 先获取select1
    				* 再获取select1下所有的子节点
    				
    			* 循环遍历，拿到每一个，判断selected属性,如果是true，加入select2中。
    			
    		* 双击事件
    			* ondblclick
    	*/
    	
    	// 把左边选中的条目添加到右边
    	document.getElementById("add").onclick = trunRight;
    	
    	
    	// 全不添加到右边
    	document.getElementById("add_all").onclick = function(){
    		// 获取select2
    		var select2 = document.getElementById("select2");
    		// 获取select1
    		var select1 = document.getElementById("select1");
    		// 获取select1下所有的子节点
    		var options = select1.getElementsByTagName("option");
    		// 循环遍历
    		for(var i=0;i<options.length;i++){
    			var option = options[i];
    			// 添加到select2中去
    			select2.appendChild(option);
    			i--;
    		}
    	};
    	
    	// 从右边添加到左边
    	document.getElementById("remove").onclick = trunLeft;
    	
    	// 全不从右边添加到左边
    	document.getElementById("remove_all").onclick = function(){
    		// 获取select2
    		var select2 = document.getElementById("select2");
    		// 获取select1
    		var select1 = document.getElementById("select1");
    		// 获取select2下所有的子节点
    		var options = select2.getElementsByTagName("option");
    		// 循环遍历
    		for(var i=0;i<options.length;i++){
    			var option = options[i];
    			// 添加到select1中去
    			select1.appendChild(option);
    			i--;
    		}
    	};
    	
    	document.getElementById("select1").ondblclick = trunRight;
    	
    	function trunRight(){
    		// 先获取select2节点
    		var select2 = document.getElementById("select2");
    		// 先获取select1对象
    		var select1 = document.getElementById("select1");
    		// 获取select1下所有的子节点
    		var options = select1.getElementsByTagName("option");
    		// 循环遍历，获取每一个
    		for(var i=options.length-1;i>=0;i--){
    			// 获取每一个option对象
    			var option = options[i];
    			// 判断当前的option对象是否被选中（看selected是否为true）
    			if(option.selected == true){
    				// 添加到select2中
    				select2.appendChild(option);
    				// i--;
    			}
    		}
    	}
    	
    	document.getElementById("select2").ondblclick = trunLeft;
    	
    	function trunLeft(){
    		// 先获取select2节点
    		var select2 = document.getElementById("select2");
    		// 先获取select1对象
    		var select1 = document.getElementById("select1");
    		// 获取select2下所有的子节点
    		var options = select2.getElementsByTagName("option");
    		// 循环遍历，获取每一个
    		for(var i=options.length-1;i>=0;i--){
    			// 获取每一个option对象
    			var option = options[i];
    			// 判断当前的option对象是否被选中（看selected是否为true）
    			if(option.selected == true){
    				// 添加到select1中
    				select1.appendChild(option);
    				// i--;
    			}
    		}
    	}
    		
    </script>
    </html>

![Center 6][]

实例三：省市联动

<!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>Insert title here</title>
    </head>
    <body>
    	
    	<select id="select1" οnchange="run(this.value)">
    		<option>--请选择--</option>
    		<option value="北京">北京</option>
    		<option value="河北">河北</option>
    		<option value="山东">山东</option>
    		<option value="河南">河南</option>
    	</select>
    	
    	<select id="select2">
    		
    	</select>
    	
    </body>
    	<script type="text/javascript">
    		/* 
    			* 思路：通过传过来的值，和数组对比，如果匹配成功，获取数组中后面的值（1开始），添加select2中。
    				
    				* 事件：改变事件
    					* onchange
    					* 通过改变事件把值传过来
    				* 区数组中获取值（获取里面的数组0位置的元素），和传过来的值做对比，如果匹配，获取该数组中后面的值。
    				* 添加到select2中。
    		*/
    		var arr = [];
    		arr[0] = new Array("北京","海淀区","昌平区","朝阳区","东城区","西城区","丰台区","大兴区","怀柔区");
    		arr[1] = new Array("河北","石家庄","保定","邯郸","秦皇岛","张家口","唐山","承德","廊坊");
    		arr[2] = new Array("山东","济南","青岛","烟台","威海","潍坊","菏泽","临沂","淄博","济宁","聊城");
    		arr[3] = new Array("河南","郑州","洛阳","信阳","安阳","南阳","开封","商丘","驻马店","平顶山");
    		
    		function run(val){
    			// 获取select2
    			var select2 = document.getElementById("select2");
    			// 先清除掉select2下所有的子节点
    			// 先获取select2下所有的子节点
    			var ops = select2.getElementsByTagName("option");
    			// 循环遍历
    			for(var x=0;x<ops.length;x++){
    				// 获取每一个
    				var op = ops[x];
    				// 删除节点
    				select2.removeChild(op);
    				x--;
    			}
    			
    			// alert(val);
    			// 获取数组的值
    			for(var i=0;i<arr.length;i++){
    				var inarr = arr[i];
    				// 里面的数组0位置的元素
    				var str = inarr[0];
    				// alert(str);
    				// 判断传过来的值和数组的值是否相等
    				if(val == str){
    					// 获取数组后的内容
    					for(var j=1;j<inarr.length;j++){
    						// 除了0位置后的所有元素
    						var instr = inarr[j];
    						// alert(instr);
    						// 添加到select2中
    						// 创建元素对象
    						var option = document.createElement("option");
    						// 创建文本对象
    						var text = document.createTextNode(instr);
    						// 把文本添加到元素的下面
    						option.appendChild(text);
    						// 把元素添加到select2中
    						select2.appendChild(option);
    					}
    				}
    			}
    		}
    		
    	</script>
    </html>

![Center 7][]

## JavaScript常用事件 ##

*  鼠标移动事件（mousemove/mouseout/mouseover  鼠标移动/鼠标离开/鼠标悬停事件）
 *  鼠标点击事件 （click/dbclick/mousedown/mouseup  鼠标单击/双击/按下/按下并弹起）
 *  加载与卸载事件 （load/onload）
 *  聚焦与离焦事件（focus/blur）
 *  键盘事件  （keydown/keyup/keypress  按下键/按下弹起后/）
 *  提交与重置事件（submit/reset）
 *  选择与改变事件（select/change）

（1）鼠标移动事件

<html>
    	     <script language="JavaScript">
    	        function mouseovertest(){
    	           document.getElementById("info").value = "鼠标在输入框上";}
    	        function mouseouttest(){
    		    document.getElementById("info").value= "鼠标在输入框外";}
    	     </script>
    	     <body>
    	     <input type="text" id="info" οnmοuseοver="mouseovertest();" 					οnmοuseοut="mouseouttest();"/>
    	     </body>
    </html>

（2）鼠标点击事件

<html>
    	    <script language="JavaScript">
           	 function addFile(){
                    var file = document.createElement('input');
                    file.setAttribute('id', 'temp_file');
                    file.setAttribute('type', 'file');
                    document.body.appendChild(file);
     }
    	    </script>
    	    <body>
            <form action="uploadFile" method="post">
    	   	 <input type="button" value="添加附件" οnclick="addFile();">
            </form>
    	    </body>
    	</html>

（3）加载与卸载案例

<html><head><script Language="JavaScript">
    	function loadform(){   alert("这是一个自动装载例子!");}function unloadform(){   alert("这是一个卸载例子!");}
         </script></head><body οnlοad=“loadform()” οnbefοreunlοad=“unloadform()”>    <a href=“http://www.itcast.cn”>传智播客</a></body>
     </html>

（4）聚焦和离焦

<html>
    <script language="JavaScript">
    function checkDate(){
    	var date1 = document. getElementById("testdate").value;
    	if(date1.match("^\\d{8}$")==null){alert("wrong");}
        else{alert("right");}
    }
    </script>
    <body>
    请输入一个八位数字<input type="text" id="testdate" οnblur="checkDate();">
    </body>
    </html>

![Center 8][]  
  
（4）键盘事件 注意：

1.  KeyDown触发后，不一定触发KeyUp，当KeyDown 按下后，拖动鼠标，那么将不会触发KeyUp事件。
2.  KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、\{菜单键\}、\{开始键\}和方向键外的ANSI字符
3.  KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
4.  KeyPress 只能捕获单个字符
5.  KeyDown 和KeyUp 可以捕获组合键。
6.  KeyPress 可以捕获单个字符的大小写
7.  KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。
8.  KeyPress 不区分小键盘和主键盘的数字字符。
9.  KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
10. 其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

<html>
    <script language="JavaScript">
    function submitform(e){
    	if(e.keyCode){
    		if (e.keyCode == 13) {document.forms(0).submit();}  
    	}else{
    	    if (e.which == 13) {document.forms(0).submit();}  
    	}
               }
    </script>
    <body>
    没有按钮的表单，用回车键提交
    <form action="login">
        <input type="text" name="username" οnkeypress="submitform(event);"/>
    </form>
    </body>
    </html>

[Center]: /images/20220717/edada5d9982340f5a99446d94a66d11d.png
[Center 1]: /images/20220717/8ca04cb8b184494a90bbe3c1b4cef611.png
[Center 2]: /images/20220717/0eda469fadd94720bfeff40d96134088.png
[Center 3]: /images/20220717/30896c73106f48e3a44ab09ca33f438c.png
[Center 4]: /images/20220717/b3384ca12c0f4dab97459f421c233fff.png
[Center 5]: /images/20220717/49136f46badf4829bc91e44ae20c293b.png
[Center 6]: /images/20220717/c2aa87e16f0a4d3b893b21612eaf40b0.png
[Center 7]: /images/20220717/da3ee9232c1c47c997000b359bfdc1b1.png
[Center 8]: /images/20220717/c07fc39f6a254ecc835f60c163d9256f.png