好好学一遍JavaScript 笔记(四)

 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);     
    }