day17：JavaScript DOM编程学习笔记08

十四、innerHTML属性

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

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

window.οnlοad=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").οnchange=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.οnlοad=function(){
		document.getElementById("checkedAll_2").οnclick=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].οnclick=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").οnclick=function(){
			for(var i=0;i<items.length;i++){
				items[i].checked=true;
			}
		}
		//全不选
		document.getElementById("CheckedNo").οnclick=function(){
			for(var i=0;i<items.length;i++){
				items[i].checked=false;
			}
		}
		//反选
		document.getElementById("CheckedRev").οnclick=function(){
			for(var i=0;i<items.length;i++){
				items[i].checked=!items[i].checked;
			}
		}
		//提交
		document.getElementById("send").οnclick=function(){
			for(var i=0;i<items.length;i++){
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		}
	}