day17：JavaScript DOM编程学习笔记08

十四、innerHTML属性

浏览器几乎都支持该属性，但不是DOM标准的组成部分。

innerHTML属性可以用来读，写给某给定元素里的HTML内容。

window.onload=function(){              //互换#city节点和#game节点中的内容。varcityNode=document.getElementById("city");              var tempHTML=cityNode.innerHTML;              var gameNode=document.getElementById("game");              cityNode.innerHTML=gameNode.innerHTML;              gameNode.innerHTML=tempHTML;         }
十四、总结
1.创建节点
①创建元素节点：document.createElement(tagName)
varliNode=document.createElement(“li”);
②创建属性节点：需要先创建一个元素节点，然后通过 . 的方式为其属性赋值即可。
var aNode=document.createElement(“a”);aNode.href=”deleteEmp?id=xxx”;
③创建文本节点：document.createTextNode(textContent)
varxmText=document.createTextNode(“厦门”);
④注意：新创建的节点不会自动地加入到文档树的任何位置，需要调用节点的appendChild()方法把新创建的节点加入到文档树的合适位置。
 
2.加入子节点：appendChild(newChild)
①把节点加为指定节点的最后一个子节点。
②代码：
//创建li节点：<li></li>varliNode=document.createElement(“li”);//创建一个文本节点：厦门varxmText=document.createTextNode(“厦门”);//加入子节点：<li>厦门</li>liNode.appendChild(xmText);
3.节点的替换：replaceChild(newChild,oldChild)
①该方法除了替换外，还有移动节点的功能。
②代码：
varbjNode=document.getElementById(“bj”);varrlNode=document.getElementById(“rl”);vargameNode=document.getElementById(“game”);//将把rlNode替换为bjNode，同时bjNode被移动gameNode.replaceChild(bjNode,rlNode);
③可以自定义一个replaceEach(aNode,bNode)实现aNode和bNode的互换
functionreplaceEach(aNode,bNode){              //1.获取aNode和bNode的父节点，使用parentNode属性              var aParent=aNode.parentNode;              var bParent=bNode.parentNode;              if(aParent&&bParent){                     //2.克隆aNode或bNode                     varaNode2=aNode.cloneNode(true);                     //3.分别调用aNode的父节点和bNode的父节点的replaceChild()          //实现节点的互换                     bParent.replaceChild(aNode2,bNode);                     aParent.replaceChild(bNode,aNode);              }       }
4.移除节点：removeChild(refChild);
①可以借助于parentNode属性
②代码：
varbjNode=document.getElementById(“bj”);bjNode.parentNode.removeChild(bjNode);
5.节点的插入：insertBefore(newNode,refNode);
①若newNode是文档中的节点，也具有移动节点的功能
②代码：
varcityNode=document.getElementById(“city”);varbjNode=document.getElementById(“bj”);varrlNode=document.getElementById(“rl”);cityNode.insertBefore(rlNode,bjNode);
③W3C没有定义insertAfter方法
自定义insertAfter(newNode,refNode)：实现把newNode加为refNode之后
functioninsertAfter(newNode,refNode){              //1.测试refNode是否为其父节点的最后一个子节点              var parentNode=refNode.parentNode;              if(parentNode){                     varlastNode=parentNode.lastChild;                     //2.若是：直接把newNode插入为refNode父节点的最后一个子节点                     if(refNode==lastNode){                            parentNode.appendChild(newNode);                     }                     //3.若不是：获取refNode的下一个兄弟节点，//然后插入到其下一个兄弟节点的前面                     else{                            varnextNode=refNode.nextSibling;//下一个兄弟                            parentNode.insertBefore(newNode,nextNode);                     }              }
6.innerHTML属性
①非标准，但所有的浏览器都支持
②读写属性，读写某HTML元素的HTML内容
③代码：
varcityNode=document.getElementById("city");alert(cityNode.innerHTML);//互换#city节点和#game节点中的内容。vartempHTML=cityNode.innerHTML;var gameNode=document.getElementById("game");cityNode.innerHTML=gameNode.innerHTML;gameNode.innerHTML=tempHTML;
十五、实验---Select级联选择
window.onload = function(){			//1.为#PRovince添加onchange响应函数 			document.getElementById("province").onchange=function(){				//1.1把#city节点除第一个子节点外都移除				var cityNode=document.getElementById("city");				var cityNodeOptions=cityNode.getElementsByTagName("option");				var len=cityNodeOptions.length;				for(var i=1;i<len;i++){						cityNode.removeChild(cityNodeOptions[1]);				}				var provinceVal=this.value;				if(provinceVal==""){					return;				}				//2.加载cities.xml文件,得到代表给文档的document对象				var xmlDoc=parseXml("cities.xml");				//3.在cities.xml文档中查找和选择的省匹配的province节点				//直接使用XPath技术查找XML文档中匹配的节点。	          var provinceEles=xmlDoc.selectNodes("//province[@name='"                                               +provinceVal+"']") 				//4.在得到province节点的所有的city子节点				var cityNodes=provinceEles[0].getElementsByTagName("city");				//5.遍历city子节点，得到每一个city子节点的文本值				for(var i=0;i<cityNodes.length;i++){					//6.利用得到的文本值创建option节点 					//<option>cityName</option> 					var cityText=cityNodes[i].firstChild.nodeValue;					var cityTextNode=document.createTextNode(cityText);					var optionNode=document.createElement("option");					optionNode.appendChild(cityTextNode);					//7.并把6创建的option子节点添加为#city的子节点。					cityNode.appendChild(optionNode);				}			}			//js 解析 xml 文档的函数, 只支持 ie			function parseXml(fileName){				   //IE 内核的浏览器				   if (window.ActiveXObject) {				       //创建 DOM 解析器				       var doc = new ActiveXObject("Microsoft.XMLDOM");				       doc.async = "false";				       //加载 XML 文档, 获取 XML 文档对象				       doc.load(fileName);				       return doc;				   }			}		}
十六、实验---Checkbox全选
一、需求：
若#checkedAll_2被选中，则name=items的checkbox都被选中；
若#checkedAll_2取消选中，则name=items的checkbox都取消选中。
若name=items的checkbox都被选中，则#checkedAll_2的checkbox也被选中；
若name=items的checkbox有一个没被选中，则#checkedAll_2取消选中。
二、提示：
事件需要加给#checkedAll_2，获取name=items的checkbox判断是否被选中，
若被选中，则name=items的checkbox都要被选中；若没有被选中，则name=items的checkbox都要取消选中。
根据是否存在checked属性来判断是否被选中，可以使其checked=true被选中，checked=false取消选中。
还需要给每个name=items的checkbox加响应函数，判断name=items的checkbox是否都被选中：选中的个数和总个数是否相等，
若都被选中，则使#checkedAll_2被选中；若没有都被选中，则使#checkedAll_2取消选中。
window.onload=function(){		document.getElementById("checkedAll_2").onclick=function(){			var flag=this.checked;			var items=document.getElementsByName("items");			for(var i=0;i<items.length;i++){				items[i].checked=flag;			}		}		var items=document.getElementsByName("items");		for(var i=0;i<items.length;i++){			items[i].onclick=function(){				//记录有多少items被选中了				var number=0;				for(var j=0;j<items.length;j++){					if(items[j].checked){						number++;					}				}	document.getElementById("checkedAll_2").checked=(items.length==number);			}		}		//全选		document.getElementById("CheckedAll").onclick=function(){			for(var i=0;i<items.length;i++){				items[i].checked=true;			}		}		//全不选		document.getElementById("CheckedNo").onclick=function(){			for(var i=0;i<items.length;i++){				items[i].checked=false;			}		}		//反选		document.getElementById("CheckedRev").onclick=function(){			for(var i=0;i<items.length;i++){				items[i].checked=!items[i].checked;			}		}		//提交		document.getElementById("send").onclick=function(){			for(var i=0;i<items.length;i++){				if(items[i].checked){					alert(items[i].value);				}			}		}	}