好好学一遍javaScript 笔记(四)——Attribute、HTML元素、文档碎片、table操作

欢迎技术交流。 QQ：138986722

getAttribute、setAttribute获取跟设置对象的属性：

function documentTest(){
			var oHtml = document.documentElement;   //取得<html/>元素
			var oHead = oHtml.firstChild;  //获取<head/>
			var oBody = oHtml.lastChild;  //获取<body/>
			oBody.setAttribute("id","bodyId");   
			alert(oBody.getAttribute("id"));      
		} 

创建HTML元素：

//创建 
	function createNode(){
		var oP = document.createElement("p");   //创建p标签
		var sText = document.createTextNode("古道西风");   //创建包含文本"古道西风"的文本节点 
		oP.appendChild(sText);    //添加sText到oP节点的末尾   
		document.body.appendChild(oP); 
	} 

移除：

//移除   
	function deleteNode(){
		var oP = document.body.getElementsByTagName("p")[0];
		/*document.body.removeChild(oP); */
		oP.parentNode.removeChild(oP);  
	}

替换：

//替换 
	function replaceP(){
		var oNewOp = document.createElement("p");
		var sNewText = document.createTextNode("妖孽");
		oNewOp.appendChild(sNewText);
		var oP = document.body.getElementsByTagName("p")[0];
		oP.parentNode.replaceChild(oNewOp,oP);  
	}

让新消息出现在旧消息之前：

function insertNode(){
		var oP = document.createElement("p");   
		var sText = document.createTextNode("断肠人");   
		oP.appendChild(sText);   
		var ooP = document.body.getElementsByTagName("p")[0];
		
		/**
		 * 接收两个参数、即要插入的节点、跟插入在哪一个节点之前    
		 */
		document.body.insertBefore(oP,ooP);       
	}

createDocumentFragment()文档碎片：在javaScript优化中有提到

/**
	 * 文档碎片
	 * 一旦把节点添加到document.body(或者它的后代节点)中、页面就会更新并反映出这个变化、
	 * 对于少量的更新、这是很好的、就像在前面的例子中那样。然而、当要向document添加大量数据时、
	 * 如果逐个添加这些变动、这个过程可能会十分缓慢。为解决这个问题、可以创建一个文档碎片、
	 * 把所有的新节点附加其上、然后把文档碎片的内容一次性添加都document中。
	 * 其中javaScript优化一文中、第六点也有提到
	 */
	function createDocument(){
		var array = ["东方不败","独孤求败","独孤败天","令狐冲","任人淫","王语嫣","阿朱","阿紫","阿猫","阿狗","靖哥哥"];
		var oF = document.createDocumentFragment(); 
		for(var i=0;i<array.length;i++){
			var oP = document.createElement("p");   
			var sText = document.createTextNode(array[i]);     
			oP.appendChild(sText);   
			oF.appendChild(oP);    
		}
		document.body.appendChild(oF);   
	}    

操作table的两种方法 

function createTable(){
		var oTable = document.createElement("table");
		oTable.setAttribute("border","1");
		oTable.setAttribute("width","100%");
		
		var oTBody = document.createElement("tbody");  
		oTable.appendChild(oTBody); 
		
		//属性操作
		oTBody.insertRow(0);
		oTBody.rows[0].insertCell(0);
		oTBody.rows[0].cells[0].appendChild(document.createTextNode("胡斐(土匪)"));
		oTBody.rows[0].insertCell(1);
		oTBody.rows[0].cells[1].appendChild(document.createTextNode("胜男(剩男)"));  
		
		oTBody.insertRow(1);
		oTBody.rows[1].insertCell(0);
		oTBody.rows[1].cells[0].appendChild(document.createTextNode("无忌"));
		oTBody.rows[1].insertCell(1);  
		oTBody.rows[1].cells[1].appendChild(document.createTextNode("赵敏"));   
		 
		//直接创建table主体
		var oTr = document.createElement("tr");  
		oTBody.appendChild(oTr);
		var oTd1 = document.createElement("td");
		oTd1.appendChild(document.createTextNode("杨过"));  
		oTr.appendChild(oTd1); 
		var oTd2 = document.createElement("td");  
		oTd2.appendChild(document.createTextNode("小阿姨"));   
		oTr.appendChild(oTd2);      
		 
		
		document.body.appendChild(oTable);    
	}