好好學一遍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);     
    } 

摘自 旦旦而學的專欄