JS-进阶-JS DOM常用的节点操作

本章节主要介绍下JS DOM常用的节点操作

1：创建节点：
	 创建元素节点：var liNode = document.createElement("li");
	 创建属性节点：现需要创建一个元素节点，在通过.的方式为其属性赋值
	 var aNode = document.createElement("a");
	 aNode.href = "deleteEmp?id=xxx";
	 创建文本节点：var xmText = document.createTextNode("中京");
	 新创建的节点不会自动加入到文档树的人任何位置需要调用节点的appendChild()方法
2：加入节点：appendChild(newChild);		
	var liNode = document.createElement("li");
	var content = document.createTextNode(textValue);
	liNode.appendChild(content);
	document.getElementById(typeVal).appendChild(liNode);
				
3:删除节点
	var reference = element.removeChild();
	返回值是一个指向已被删除的子节点的引用指针;
	某个节点被removeChild();方法删除时，这个节点包含的所有子节点全部被删除；
	如果想删除某个节点，但又不知道父节点是哪个，可以使用parentNode属性；	

4：节点替换
	var reference = replaceNode(newNode,oldNode);
	把一个元素的子节点替换为另一个元素的子节点，返回值是一个指向已被替换的那个子节点的引用指针；
	2，该节点除了替换以外，还有替换功能；
	3：该函数只能完成单向替换，若要使用双向替换，需要自定义函数；
	典型实现：
		var bjNode = document.getElementById("bj");
		var appleNode = document.getElementById("apple");
		replaceNode(bjNode,appleNode);
	节点互换：
    function replaceNode(Node00 , Node01)
	{
		var aParent = Node00.parentNode;
		var bParent = Node01.parentNode;
		if(aParent&&bParent)
		{
		var cloneNewNode00 = Node00.cloneNode(true);
		bParent.replaceChild(cloneNewNode00,Node01);
		aParent.replaceChild(Node01,Node00);
		}
	}			
				
5：插入节点：inserBefore(newNode,oldNode);
	1：newNode是文档中的节点，也具有移动节点的功能；
		代码：
		var cityNode = document.getElementById("city");
		var xjNode = document.getElementById("xj");
		var appleNode = document.getElementById("apple");
		
		cityNode.insertBefore(appleNode, bjNode);
	2：自己实现insertAfter(newNode,oldNode);将新节点插入到老节点的后边；
	function insertAfter(newNode,refNode)
	{
		var parentNode = refNode.parentNode;
		if(parentNode)
		{
			var lastNode = parentNode.lastChild;
			
			if(refNode==lastNode)
			{
				parentNode.appendChild(newNode);
			}
			else
			{
				var nextNode = refNode.nextSibling;
				parentNode.insertBefore(newNode,nextNode);
			}
			
		}
	}	
		
6：innerHtml属性，
	浏览器几乎都支持该属性，但不是Dom标准的组成部分，innerHtml属性可以用来读，写给定元素的HTMl内容；
		var cityNode = document.getElementById("city");
		var gameNode = document.getElementById("game");
		alert(cityNode.innerHTML);
		
		var tempInnerHtml = cityNode.innerHTML;
		cityNode.innerHTML = gameNode.innerHTML;
		gameNode.innerHTML = tempInnerHtml;