Java__Script3——替换节点及自定义的replaceEach方法

一、为元素节点添加子节点：
（1） appendChild():
var reference = element.appendChild(new Child);
给定子节点newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。

二、节点的替换：
（1）replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
（2）该节点除了替换功能以外还有移动的功能。
（3）该方法只能完成单向替换，若需要使用双向替换，需要自定义函数。

window.onload = 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.onclick = aNode.onclick;
					
					//克隆 aNode 的同时, 把 onclick 事件也复制. 
					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].onclick = function(){
					
					//alert("index: " + this.index);
					
					//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]);
					
				}
			}