十四、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);				}			}		}	}