JavaScript DOM 编程

（1）.DOM概述及分类

（2）.DOM结构模型：XML DOM 和 HTML DOM 关系?

（3）.结点，结点树，结点属性与方法?

1.DOM是什么？

document object model  文档对象模型

是W3C织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容、结构和样式.

分类

DOM Core

XML DOM

HTML DOM

2.DOM结构模型：XML DOM 和 HTML DOM 关系?

3.

nodeName                 String                                           节点的名字；根据节点的类型而定义

nodeValue                  String                                           节点的值；根据节点的类型而定义

nodeType                   Number                                        节点的类型常量值之一

ownerDocument         Document                                    指向这个节点所属的文档

firstChild                     Node                                            指向在childNodes列表中的第一个节点

lastChild                     Node                                            指向在childNodes列表中的最后一个节点

childNodes                 NodeList                                       所有子节点的列表

parentNode                Node                                             返回一个给定节点的父节点。

previousSibling          Node        指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null

nextSibling                 Node 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null

hasChildNodes()        Boolean                                  当childNodes包含一个或多个节点时，返回真

attributes                    NamedNodeMap    包含了代表一个元素的特性的Attr对象；仅用于Element节点

appendChild(node)    Node                                         将node添加到childNodes的末尾

removeChild(node)    Node                                     从childNodes中删除node

replaceChild (newnode, oldnode)                           Node 将childNodes中的oldnode替换成newnode

insertBefore (newnode, refnode)                            Node 在childNodes中的refnode之前插入newnode

Document对象
常用方法

getElementById()返回对拥有指定 id 的第一个对象的引用

getElementsByName()返回带有指定名称的对象集合

getElementsByTagName()返回带有指定标签名的对象集合
DOM节点常见操作

DOM 获取节点

DOM 改变节点

DOM 删除节点

DOM 替换节点

DOM 创建节点

DOM 添加节点
模式对话框代码示例：


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> js模式对话框 </title>
  5.   <script>
  6. 		function openModal(){
  7. 		   //cval的值来自于window.returnValue返回的值,在打开的模式对话框中
  8. 		   var cval = 	window.showModalDialog("01modal.html");
  9.  
  10. 		   //赋值
  11. 		   document.getElementById("city").value = cval;
  12. 		}
  13.   </script>
  14.  </head>
  15.  
  16.  <body>
  17. 	<input type="text" id="city" /><input type="button" value="请选择城市" onclick="openModal()"/>
  18.  </body>
  19. </html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> 模式对话框</title>
  5.   <script>
  6. 	function getVal(obj){
  7. 	 window.returnValue = obj.value;
  8. 	 window.close();
  9. 	}
  10.   </script>
  11.  </head>
  12.  
  13.  <body>
  14.     <input type="radio"  value="北京" onclick="getVal(this)"/>北京<br/>
  15.     <input type="radio" value="深圳" onclick="getVal(this)"/>深圳<br/>
  16. 	<input type="radio" value="东莞" onclick="getVal(this)"/>东莞<br/>
  17. 	<input type="radio" value="武汉" onclick="getVal(this)"/>武汉<br/>
  18.  </body>
  19. </html>
键盘事件


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> 提交事件 </title>
  5. 	<!--
  6. 		提交事件:onsubmit
  7. 		1.是写在form表单中，而不是写在提交按钮中
  8. 		2.调用格式:onsubmit="return 函数名()"
  9. 		3.被调用的函数中一定要返回布尔值
  10. 	-->
  11. 	<script>
  12. 		function chk(){
  13. 			var username = document.getElementById("username").value;
  14. 			var pwd = document.getElementById("pwd").value;
  15.  
  16. 			//正则
  17. 			var reg = /^[0-9a-zA-Z]{6,10}$/;
  18. 			if(!reg.test(username)){
  19. 				return false;
  20. 			}
  21. 			if(pwd==""){
  22. 				return false;
  23. 			}
  24. 			return true;
  25. 		}
  26. 	</script>
  27.  </head>
  28.  
  29.  <body>
  30. 	<form action="01modal.html" method="post" onsubmit="return chk()">
  31. 		用户名：<input type="text" id="username" name="username" /><br/>
  32. 		密码:<input type="password" id="pwd"  name="pwd"/></br/>
  33. 		<input type="submit" value="登录"/>
  34. 		<input type="reset" value="重置"/>
  35. 	</form>
  36.  </body>
  37. </html>
Onchange事件：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title>onchange事件 </title>
  5. 	<script>
  6. 		function changCity(){
  7. 			//1.得到省份下拉列表的选中值
  8. 			var provinceVal  = document.getElementById("province").value;
  9. 			//2.找到城市下拉列表
  10. 			var cityObj = document.getElementById("city");
  11. 			//3.定义数组
  12. 			var citys = new Array();
  13. 			citys[0] = new Array("");
  14. 			citys[1] = new Array("济南","青岛");
  15. 			citys[2] = new Array("长沙","株洲");
  16. 			//4.添加城市下拉列表
  17. 			//4.1清除下拉列表
  18. 			 cityObj.options.length=0;
  19. 			var city = citys[provinceVal];
  20. 			for(var i=0;i<city.length;i++){
  21. 				cityObj.add(new Option(city[i],city[i]));// new Option(文本，值)
  22. 			}
  23.  
  24. 		}
  25. 	</script>
  26.  </head>
  27.  
  28.  <body>
  29.       <select id="province" onchange="changCity()">
  30.             <option value="0">请选择省份</option>
  31.             <option value="1">山东</option>
  32.             <option value="2">湖南</option>
  33.       </select>
  34.  
  35.      <select id="city"></select>
  36.  </body>
  37. </html>


获取DOM结点信息：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> DOM </title>
  5.  
  6.  </head>
  7.  
  8.  <body>
  9.     <h1 id="h1">明天休息</h1>
  10. 	 <script>
  11. 	    alert(document.getElementById("h1").innerHTML);
  12. 		//alert(document.getElementById("h1").innerText);
  13. 		//alert(document.getElementById("h1").firstChild.nodeValue);
  14. 		//alert(document.getElementById("h1").lastChild.nodeValue);
  15. 		//alert(document.getElementById("h1").childNodes[0].nodeValue);
  16. 		//alert(document.getElementById("h1").textContent);//IE不好使，firefox好使
  17.     </script>
  18.  </body>
  19. </html>


DOM 取值：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> 取li的文本值 </title>
  5. 	<script>
  6. 		function getLi(){
  7. 			//1.找到bj的结点
  8. 			var bjNode = document.getElementById("bj");
  9. 			//2.找所有子结点
  10. 			var bjChildNodessww = bjNode.childNodes;
  11. 			//3遍历
  12. 			for(var i=0;i<bjChildNodessww.length;i++){
  13. 			    var t = bjChildNodessww[i];
  14. 				alert(t.nodeName+","+t.nodeValue+","+t.nodeType);
  15. 			}
  16.  
  17. 		}
  18. 	</script>
  19.  </head>
  20.  
  21.  <body>
  22.    <ul>
  23. 		<li id="bj" value="beijing">
  24. 			北京
  25. 			<h1>海淀</h1>
  26. 			奥运
  27. 		</li>
  28. 		<li id="sh" value="shanghai">
  29. 			上海
  30. 		</li>
  31. 		<br/>
  32. 		<input type="button" value="li取值" onclick="getLi()"/>
  33. 	</ul>
  34.  
  35.  </body>
  36. </html>


遍历option文本：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> 得到所有的option的文本 </title>
  5.  
  6.  </head>
  7.  
  8.  <body>
  9.   <select name="edu" id="edu">
  10. 		<option value="本科">本科^^</option>
  11. 		<option value="专科">专科^^</option>
  12. 		<option value="高中">高中^^</option>
  13. 		<option value="小学">小学^^</option>
  14. 		<option value="幼儿园">幼儿园^^</option>
  15. 	</select>
  16. 	 <script>
  17.       /* //1.找到edu
  18. 		var eduNode = document.getElementById("edu");
  19. 	   //2.得到孩子们
  20. 	   var eduChildNodesw = eduNode.childNodes;
  21. 	   //3.遍历孩子们
  22. 	   for(var i=0;i<eduChildNodesw.length;i++){
  23. 		 alert(eduChildNodesw[i].innerHTML);
  24. 	   }
  25. 	   */
  26. 	   var eduNode = document.getElementsByTagName("option");
  27.  
  28. 	   //3.遍历孩子们
  29. 	   for(var i=0;i<eduNode.length;i++){
  30. 		 alert(eduNode[i].innerHTML);
  31. 	   }
  32. 	</script>
  33.  </body>
  34. </html>


结点替换：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title>结点替换</title>
  5.   <script>
  6. 		function changeNode(){
  7. 			//1.找到bj结点
  8. 			var bjNodess = document.getElementById("bj");
  9. 			//2.找到game结点,还要复制结点cloneNode(true);//true代表子结点也克隆
  10. 			var gameNodess = document.getElementById("game").cloneNode(true);
  11. 			//3.替换
  12. 			bjNodess.replaceNode(gameNodess);
  13. 			//bjNodess.parentNode.replaceChild(gameNodess,bjNodess);
  14. 		}
  15.   </script>
  16.  </head>
  17.  
  18.  <body>
  19.    <ul >
  20. 		<li id="bj" onclick="changeNode()">北京</li>
  21. 		<li>湖南</li>
  22. 		<li>山东</li>
  23. 	</ul>
  24. 	<ul>
  25. 		<li  id="game">打<p>灰机</p></li>
  26. 		<li>抓泥鳅</li>
  27. 		<li>斗地主</li>
  28. 	</ul>
  29.  
  30.  </body>
  31. </html>


添加结点：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> New Document </title>
  5.   <script>
  6. 	function addOptions(){
  7. 		//1.找到select标签
  8. 		var ss = document.getElementsByTagName("select")[0];
  9. 		//2.添加一个option结点
  10. 		var optionss = document.createElement("option");
  11. 		//3.添加一个文本结点,小学
  12. 		//var xs = document.createTextNode("小学");
  13. 		optionss.innerHTML="小学";
  14. 		//4.搞关系
  15. 		//optionss.appendChild(xs);
  16. 		ss.appendChild(optionss);
  17.  
  18. 	}
  19.   </script>
  20.  </head>
  21.  
  22.  <body>
  23.   <input type="button" value="添加选项" onclick="addOptions()"/>
  24. 	<select>
  25. 		<option>本科</option>
  26. 		<option>专科</option>
  27. 		<option>高中</option>
  28. 		<option>初中</option>
  29. 	</select>
  30.  
  31.  </body>
  32. </html>
表格操作

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> 表格操作 </title>
  5.   <script>
  6.   //--------------XML DOM--------------------------------------
  7. 	/*function addTR(){
  8. 		//1.取三个框的值
  9. 		var username = document.getElementById("username").value;
  10. 		var email = document.getElementById("email").value;
  11. 		var age = document.getElementById("age").value;
  12. 		//2.添加tr,td
  13. 		var trObj = document.createElement("tr");
  14. 		var tdUsername = document.createElement("td");
  15. 		var tdEmail = document.createElement("td");
  16. 		var tdAge = document.createElement("td");
  17. 		var tdOp = document.createElement("td");
  18. 		//3.添加td的内容
  19. 		tdUsername.innerHTML=username;
  20. 		tdEmail.innerHTML=email;
  21. 		tdAge.innerHTML=age;
  22. 		tdOp.innerHTML="<input type='button' value='删除' onclick='deleteRowss(this)'/>";
  23. 		//4.搞关系
  24. 		trObj.appendChild(tdUsername);
  25. 		trObj.appendChild(tdEmail);
  26. 		trObj.appendChild(tdAge);
  27. 		trObj.appendChild(tdOp);
  28.  
  29. 		//5.把tr添加到表格中
  30. 		document.getElementById("tabInfo").appendChild(trObj);
  31.  
  32. 	}
  33. 	function deleteRowss(obj){
  34. 		var trObjss = obj.parentNode.parentNode;//tr
  35. 		trObjss.parentNode.removeChild(trObjss);
  36. 	}*/
  37.  
  38. 	//---------------------HTML DOM---------------------------------
  39. 	/*function addTR(){
  40. 		//1.取三个框的值
  41. 		var username = document.getElementById("username").value;
  42. 		var email = document.getElementById("email").value;
  43. 		var age = document.getElementById("age").value;
  44. 		//2.添加tr,td
  45. 		var tabinfoss = document.getElementById("tabInfo");
  46. 		//在表格中添加一行
  47. 		var trss = tabinfoss.insertRow();
  48. 		var tdUsernamess = trss.insertCell();
  49. 		var tdEmailss = trss.insertCell();
  50. 		var tdAgess = trss.insertCell();
  51. 		var tdOpss = trss.insertCell();
  52. 		//3.添加td的内容
  53. 		tdUsernamess.innerHTML=username;
  54. 		tdEmailss.innerHTML=email;
  55. 		tdAgess.innerHTML=age;
  56. 		tdOpss.innerHTML="<input type='button' value='删除' onclick='deleteRowss(this)'/>";
  57.  
  58. 	}
  59. 	function deleteRowss(obj){
  60. 		//1.得到表格
  61. 		var tabinfoss = document.getElementById("tabInfo");
  62.  
  63. 		//2.找到当前行的索引  rowIndex
  64. 		var rowindexss = obj.parentNode.parentNode.rowIndex;
  65. 		//3.删除
  66. 		tabinfoss.deleteRow(rowindexss);//当前行的索引
  67. 	}*/
  68.  
  69. 	//--------------------------------------------------------------
  70.     function addTR(){
  71. 		//1.取三个框的值
  72. 		var username = document.getElementById("username").value;
  73. 		var email = document.getElementById("email").value;
  74. 		var age = document.getElementById("age").value;
  75. 		//2.添加tr,td
  76. 		var tabinfoss = document.getElementById("tabInfo");
  77.  
  78. 		tabinfoss.innerHTML+="<tr><td>"+username+"</td><td>"+email+"</td><td>"+age+"</td><td><input type='button' value='删除' onclick='deleteRowss(this)'/></td></tr>";
  79. 	}
  80.  
  81. 	function deleteRowss(obj){
  82. 		//1.得到表格
  83. 		var tabinfoss = document.getElementById("tabInfo");
  84.  
  85. 		//2.找到当前行的索引  rowIndex
  86. 		var rowindexss = obj.parentNode.parentNode.rowIndex;
  87. 		//3.删除
  88. 		tabinfoss.deleteRow(rowindexss);//当前行的索引
  89. 	}
  90.   </script>
  91.  </head>
  92.  
  93.  <body>
  94.    <table align="center" cellpadding="10" cellspacing="3" >
  95. 	<tr>
  96. 		<td>姓名：<input type="text" id="username"/></td>
  97. 		<td>Email:<input type="text" id="email"/></td>
  98. 		<td>年龄:<input type="text" id="age"/></td>
  99. 	</tr>
  100. 	<tr>
  101. 		<td colspan="3" align="center"><input type="button" value="添加" onclick="addTR()"/></td>
  102. 	</tr>
  103.  </table>
  104.  
  105.  <br/>
  106.  <br/>
  107.  <br/>
  108. <hr/>
  109.  
  110.  <table id="tabInfo" align="center" width="500" border="1">
  111. 		<tr>
  112. 			<td>姓名</td>
  113. 			<td>Email</td>
  114. 			<td>年龄</td>
  115. 			<td>操作</td>
  116. 		</tr>
  117.  
  118.  </table>
  119.  
  120.  </body>
  121. </html>




表格操作：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> 表格操作 </title>
  5.   <script>
  6.   //--------------XML DOM--------------------------------------
  7. 	/*function addTR(){
  8. 		//1.取三个框的值
  9. 		var username = document.getElementById("username").value;
  10. 		var email = document.getElementById("email").value;
  11. 		var age = document.getElementById("age").value;
  12. 		//2.添加tr,td
  13. 		var trObj = document.createElement("tr");
  14. 		var tdUsername = document.createElement("td");
  15. 		var tdEmail = document.createElement("td");
  16. 		var tdAge = document.createElement("td");
  17. 		var tdOp = document.createElement("td");
  18. 		//3.添加td的内容
  19. 		tdUsername.innerHTML=username;
  20. 		tdEmail.innerHTML=email;
  21. 		tdAge.innerHTML=age;
  22. 		tdOp.innerHTML="<input type='button' value='删除' onclick='deleteRowss(this)'/>";
  23. 		//4.搞关系
  24. 		trObj.appendChild(tdUsername);
  25. 		trObj.appendChild(tdEmail);
  26. 		trObj.appendChild(tdAge);
  27. 		trObj.appendChild(tdOp);
  28.  
  29. 		//5.把tr添加到表格中
  30. 		document.getElementById("tabInfo").appendChild(trObj);
  31.  
  32. 	}
  33. 	function deleteRowss(obj){
  34. 		var trObjss = obj.parentNode.parentNode;//tr
  35. 		trObjss.parentNode.removeChild(trObjss);
  36. 	}*/
  37.  
  38. 	//---------------------HTML DOM---------------------------------
  39. 	/*function addTR(){
  40. 		//1.取三个框的值
  41. 		var username = document.getElementById("username").value;
  42. 		var email = document.getElementById("email").value;
  43. 		var age = document.getElementById("age").value;
  44. 		//2.添加tr,td
  45. 		var tabinfoss = document.getElementById("tabInfo");
  46. 		//在表格中添加一行
  47. 		var trss = tabinfoss.insertRow();
  48. 		var tdUsernamess = trss.insertCell();
  49. 		var tdEmailss = trss.insertCell();
  50. 		var tdAgess = trss.insertCell();
  51. 		var tdOpss = trss.insertCell();
  52. 		//3.添加td的内容
  53. 		tdUsernamess.innerHTML=username;
  54. 		tdEmailss.innerHTML=email;
  55. 		tdAgess.innerHTML=age;
  56. 		tdOpss.innerHTML="<input type='button' value='删除' onclick='deleteRowss(this)'/>";
  57.  
  58. 	}
  59. 	function deleteRowss(obj){
  60. 		//1.得到表格
  61. 		var tabinfoss = document.getElementById("tabInfo");
  62.  
  63. 		//2.找到当前行的索引  rowIndex
  64. 		var rowindexss = obj.parentNode.parentNode.rowIndex;
  65. 		//3.删除
  66. 		tabinfoss.deleteRow(rowindexss);//当前行的索引
  67. 	}*/
  68.  
  69. 	//--------------------------------------------------------------
  70.     function addTR(){
  71. 		//1.取三个框的值
  72. 		var username = document.getElementById("username").value;
  73. 		var email = document.getElementById("email").value;
  74. 		var age = document.getElementById("age").value;
  75. 		//2.添加tr,td
  76. 		var tabinfoss = document.getElementById("tabInfo");
  77.  
  78. 		tabinfoss.innerHTML+="<tr><td>"+username+"</td><td>"+email+"</td><td>"+age+"</td><td><input type='button' value='删除' onclick='deleteRowss(this)'/></td></tr>";
  79. 	}
  80.  
  81. 	function deleteRowss(obj){
  82. 		//1.得到表格
  83. 		var tabinfoss = document.getElementById("tabInfo");
  84.  
  85. 		//2.找到当前行的索引  rowIndex
  86. 		var rowindexss = obj.parentNode.parentNode.rowIndex;
  87. 		//3.删除
  88. 		tabinfoss.deleteRow(rowindexss);//当前行的索引
  89. 	}
  90.   </script>
  91.  </head>
  92.  
  93.  <body>
  94.    <table align="center" cellpadding="10" cellspacing="3" >
  95. 	<tr>
  96. 		<td>姓名：<input type="text" id="username"/></td>
  97. 		<td>Email:<input type="text" id="email"/></td>
  98. 		<td>年龄:<input type="text" id="age"/></td>
  99. 	</tr>
  100. 	<tr>
  101. 		<td colspan="3" align="center"><input type="button" value="添加" onclick="addTR()"/></td>
  102. 	</tr>
  103.  </table>
  104.  
  105.  <br/>
  106.  <br/>
  107.  <br/>
  108. <hr/>
  109.  
  110.  <table id="tabInfo" align="center" width="500" border="1">
  111. 		<tr>
  112. 			<td>姓名</td>
  113. 			<td>Email</td>
  114. 			<td>年龄</td>
  115. 			<td>操作</td>
  116. 		</tr>
  117.  
  118.  </table>
  119.  
  120.  </body>
  121. </html>
全选反选

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> 全选/反选/全不选 </title>
  5.    <script>
  6. 		function checkAll(booleanVal){
  7. 			//1.根据名称得到一组值
  8. 			var hobbys = document.getElementsByName("hobby");
  9. 			for(var i=0;i<hobbys.length;i++){
  10. 				//hobbys[i].setAttribute("checked",booleanVal);
  11. 				hobbys[i].checked=booleanVal;
  12. 			}
  13. 		}
  14. 		function reversess(){
  15. 			//1.根据名称得到一组值
  16. 			var hobbys = document.getElementsByName("hobby");
  17. 			for(var i=0;i<hobbys.length;i++){
  18. 				hobbys[i].checked=!hobbys[i].checked;
  19. 			}
  20. 		}
  21.    </script>
  22.  </head>
  23.  
  24.  <body>
  25.      <h1>请选择你的爱好：</h1>
  26.   全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)"  /><br/>
  27.  <input type="checkbox" name="hobby" value="football"/>足球
  28.  <input type="checkbox" name="hobby" value="basketball" />篮球
  29.  <input type="checkbox" name="hobby" value="swim" />游泳
  30.  <input type="checkbox" name="hobby" value="singing" />唱歌<br/>
  31.  
  32.  <input type="button" value="全选" onclick="checkAll(true)" /> <input type="button" value="全不选" onclick="checkAll(false)" />
  33.  <input type="button" value="反选" onclick="reversess()"/> </body>
  34.  
  35.  </body>
  36. </html>


左移  右移

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title>下拉列表,选项左移右移 </title>
  5.    <script>
  6. 		function removeLeft(){
  7. 			//1.找左边的下拉列表
  8. 			var leftSelectObj = document.getElementById("left");
  9. 			//2.找左边下拉列表中选中的项
  10. 			var indexss = leftSelectObj.selectedIndex;//找到选中项的索引
  11. 			var selectedOptss = leftSelectObj.options[indexss];//找到了选中的option,<option>选项1</option>
  12. 			//3.找右边的下拉列表
  13. 			var rightSelectObj = document.getElementById("right");
  14. 			//4.移动
  15. 			//rightSelectObj.add(selectedOptss);//IE不支持,firefox支持
  16. 			rightSelectObj.appendChild(selectedOptss);
  17. 		}
  18.  
  19. 		function removeLeftAll(){
  20. 			//1.找左边的下拉列表
  21. 			var leftSelectObj = document.getElementById("left");
  22. 			var selectedOptAll = leftSelectObj.options;//左边所有选项
  23.  
  24. 			//2.找右边的下拉列表
  25. 			var rightSelectObj = document.getElementById("right");
  26.  
  27. 			//3.一边遍历左边选项，一边添加右边的选项
  28. 			var length = selectedOptAll.length;
  29. 			/*for(var i=0;i<length;i++){
  30. 				rightSelectObj.appendChild(selectedOptAll[i]);
  31. 			}*/
  32.  
  33. 			/*for(var i=selectedOptAll.length-1;i>=0;i--){
  34. 				rightSelectObj.appendChild(selectedOptAll[i]);
  35. 			}*/
  36. 			for(var i=0;i<length;i++){
  37. 				rightSelectObj.appendChild(selectedOptAll[0]);
  38. 			}
  39. 		}
  40.    </script>
  41.  </head>
  42.  
  43.  <body>
  44.   <table align="center">
  45. 		<tr>
  46. 			<td>
  47. 				<select size="10" id="left">
  48. 					<option>选项1</option>
  49. 					<option>选项2</option>
  50. 					<option>选项3</option>
  51. 					<option>选项4</option>
  52. 					<option>选项5</option>
  53. 					<option>选项6</option>
  54. 					<option>选项7</option>
  55. 					<option>选项8</option>
  56.  
  57. 				</select>
  58. 			</td>
  59. 			<td>
  60. 				<input type="button" value="--->" onclick="removeLeft()"/><br/>
  61. 				<input type="button" value="===>" onclick="removeLeftAll()"/><br/>
  62. 				<input type="button" value="<---" onclick=""/><br/>
  63. 				<input type="button" value="<===" onclick=""/><br/>
  64. 			</td>
  65. 			<td>
  66. 				<select size="10" id="right">
  67. 					<option>选项9</option>
  68. 				</select>
  69. 			</td>
  70. 		</tr>
  71. 	</table>
  72.  
  73.  </body>
  74. </html>








级联加载：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> 级联加载 </title>
  5.  <script>
  6.      var cityList = new Array();
  7.      cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
  8. 	 cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
  9. 	 cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
  10.      cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
  11. 	 cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
  12.      cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
  13. 	 cityList['江苏省'] = ['南京市','苏州市','无锡市'];
  14. 	 cityList['浙江省'] = ['杭州市','宁波市','温州市'];
  15. 	 cityList['四川省'] = ['四川省','成都市'];
  16. 	 cityList['海南省'] = ['海口市'];
  17. 	 cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
  18. 	 cityList['山东省'] = ['济南市','青岛市','烟台市'];
  19. 	 cityList['江西省'] = ['江西省','南昌市'];
  20. 	 cityList['广西省'] = ['柳州市','南宁市'];
  21. 	 cityList['安徽省'] = ['安徽省','合肥市'];
  22. 	 cityList['河北省'] = ['邯郸市','石家庄市'];
  23. 	 cityList['河南省'] = ['郑州市','洛阳市'];
  24. 	 cityList['湖北省'] = ['武汉市','宜昌市'];
  25. 	 cityList['湖南省'] = ['湖南省','长沙市'];
  26. 	 cityList['陕西省'] = ['陕西省','西安市'];
  27. 	 cityList['山西省'] = ['山西省','太原市'];
  28. 	 cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
  29. 	 cityList['其他'] = ['其他'];
  30.  
  31. 	 function changeCity(){
  32. 		//1.找到城市下拉列表
  33. 		var cityObj = document.getElementById("city");
  34. 		//2.找到省份选中的值
  35. 		var provinceVal =  document.getElementById("province").value;
  36. 		//3.清空原有的城市列表
  37. 		cityObj.length=1;
  38. 		//3.遍历省份选中值的城市列表,一边遍历一边在城市列表中添加
  39. 		for(var i in cityList[provinceVal]){
  40. 			cityObj.add(new Option(cityList[provinceVal][i],cityList[provinceVal][i]));
  41. 		}
  42.  
  43. 	 }
  44.  
  45. 	 function loadProvince(){
  46. 		//1.找到省份
  47. 		var provinceObj = document.getElementById("province");
  48. 		provinceObj.length=1;
  49. 		//加强for循环
  50. 		for(var index in cityList){
  51. 			provinceObj.add(new Option(index,index));
  52. 		}
  53. 	 }
  54. 	 window.onload = loadProvince;
  55.  
  56.  </script>
  57.  </head>
  58.  
  59.  <body>
  60.   <select id="province" onchange="changeCity()">
  61. 		<option>--请选择省份--</option>
  62. 	</select>
  63.  
  64. 	<select id="city">
  65. 		<option>--请选择城市--</option>
  66. 	</select>
  67.  
  68.  </body>
  69. </html>






Java web JavaScript DOM 编程的更多相关文章

  1. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  4. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  5. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  6. JavaScript DOM 编程艺术

    最近把JavaScript DOM 编程艺术这本书看完了,觉得这本书很好 深入浅出地展示了渐进增强.平稳退化.结构和样式分离等编程思想,我对书中重要的知识进行了梳理总结. 一.网页 二.JavaScr ...

  7. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  8. Java Web大作业——编程导航系统

    title: Java Web大作业--编程导航系统 categories: - - 计算机科学 - Java abbrlink: 40bc48a1 date: 2021-12-29 00:37:35 ...

  9. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

随机推荐

  1. 汇编指令-CMP、TEQ(5)

     cmp:(compare)指令进行比较两个操作数的大小  格式: cmp oprd1,oprd2 比较oprd1和oprd2操作数,然后通过助记符来实现想要的判断. teq: (test equal ...

  2. Python Keras module 'keras.backend' has no attribute 'image_data_format'

    问题: 当使用Keras运行示例程序mnist_cnn时,出现如下错误: 'keras.backend' has no attribute 'image_data_format' 程序路径https: ...

  3. VHDL学习：利用Quartus自带库3步快速完成状态机

    Quartus自带库里面有各种编程语言的模板,供开发者参考. 初学者利用VHDL实现状态机比较生疏的情况下,可以调出该模板,适当修改即可. 本文将描述如何利用Quartus自带库调出状态机模板,并适当 ...

  4. 嵌套ajax 页面卡死的问题

    问题:要一个AJAX中的回调函数中又进行了一个AJAX调用,并且这个AJAX是在一个循环调用的,不论设置async属性是true和false页面卡死. 解决方法:async属性都设为true,不用循环 ...

  5. angularjs自定义指令实现分页插件

    由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能.现在单独做了个简易的小demo,主要是为了分享自己写的分页功能.注:本实例调用的 ...

  6. Python 进程与线程小随笔

    Process 涉及模块:multiprocessing Process p = Process() p.start() p.join() from multiprocessing import Pr ...

  7. 复杂关联SQL的优化

    昨天处理了一则复杂关联SQL的优化,这类SQL的优化往往考虑以下四点: 第一.查询所返回的结果集,通常查询返回的结果集很少,是有信心进行优化的: 第二.驱动表的选择至关重要,通过查看执行计划,可以看到 ...

  8. sudoku--SE第二次作业

    git传送门 编译环境: windows10.vs2017 所用语言: c++ 首先作为一个晚上闭眼的玩家,我先来讲一下我的心路历程: 最开始接到作业的时候心里是拒绝的,刚出了一趟小远门就这样,就很难 ...

  9. 201521123007《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1. List中指定元素的删除(题目4-1) private static ...

  10. 201521123097《Java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...