day14：JavaScript DOM编程学习笔记06

十一、节点的替换

11.1replaceChild()：把一个给定父元素里的一个子节点替换为另一个子节点

       var reference=element.replaceChild(newChild,oldChild);

       返回值是一个指向已被替换的那个子节点的引用指针

11.2该节点除了替换功能以外还有移动的功能。

11.3该方法只能完成单向替换，若需要使用双向替换，需要自定义函数：

	//自定义互换两个节点的函数 
	function replaceEach(aNode,bNode){
		
		//1.获取aNode和bNode的父节点，使用parentNode属性
		var aParent=aNode.parentNode;
		var bParent=bNode.parentNode;
		
		if(aParent&&bParent){
			//2.克隆aNode或bNode
			var aNode2=aNode.cloneNode(true);
			//3.分别调用aNode的父节点和bNode的父节点的replaceChild()实现节点的互换
			bParent.replaceChild(aNode2,bNode);
			aParent.replaceChild(bNode,aNode);
		}
		
	}

※※※例子

例三：

需求：为所有的li节点添加onclick响应函数，实现city子节点和game子节点对应位置的元素的互换。

window.οnlοad=function(){
		
		//自定义互换两个节点的函数 
		function replaceEach(aNode,bNode){
			
			//1.获取aNode和bNode的父节点，使用parentNode属性
			var aParent=aNode.parentNode;
			var bParent=bNode.parentNode;
			
			if(aParent&&bParent){
				//2.克隆aNode或bNode
				var aNode2=aNode.cloneNode(true);
				
				//克隆aNode的同时，把onclick事件也复制
				aNode2.οnclick=aNode.onclick;
				
				//克隆aNode的同时，把index属性也复制 
				aNode2.index=aNode.index;
				
				//3.分别调用aNode的父节点和bNode的父节点的replaceChild()实现节点的互换
				bParent.replaceChild(aNode2,bNode);
				aParent.replaceChild(bNode,aNode);
			}
			
		}
		
		//1.获取所有的li节点
		var liNodes=document.getElementsByTagName("li");
		
		//2.为每一个li节点添加Onclick响应函数
		for(var i=0;i<liNodes.length;i++){
			//手动为每个li节点添加一个index属性
			liNodes[i].index=i;
			
			liNodes[i].οnclick=function(){
				
				//3.找到和当前节点对应的那个li节点
				var targetIndex=0;
				if(this.index<4){
					targetIndex=4+this.index;
				}else{
					targetIndex=this.index-4;
				}
				
				//交换index属性
				var tempIndex=this.index;
				this.index=liNodes[targetIndex].index;
				liNodes[targetIndex].index=tempIndex;
				
				//4.互换
				replaceEach(this,liNodes[targetIndex]);
				
			}
		}
	}

十三、删除节点

removeChild()：从一个给定元素里删除一个子节点

varreference=element.removeChild(node);

返回值是一个指向已被删除的子节点的引用指针。

某个节点被removeChild()方法删除时，这个节点所包含的所有子节点将同时被删除。

如果想删除某个节点，但不知道它的父节点是哪一个，parentNode属性可以帮忙。

window.οnlοad=function(){
		 //为每一个li节点添加一个confirm(确认对话框)：确定要删除xx的信息吗？
		 //若确定，则删除
		 var liNodes=document.getElementsByTagName("li");
		 for(var i=0;i<liNodes.length;i++){
			 liNodes[i].οnclick=function(){
				 var flag=confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？");
				 if(flag){
					 this.parentNode.removeChild(this);
				 }
			 }
		 }
	}