html和js一点整理（1）

在向DOM树添加节点时，最好先加到文档碎片里，再将文档碎片加到DOM树中

一：创建Attribute
getAttribute、setAttribute获取跟设置对象的属性：
[javascript]
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元素：
[javascript]
//创建  
    function createNode(){ 
        var oP = document.createElement("p");   //创建p标签 
        var sText = document.createTextNode("古道西风");   //创建包含文本"古道西风"的文本节点  
        oP.appendChild(sText);    //添加sText到oP节点的末尾    
        document.body.appendChild(oP);  
    }  
移除：
[javascript]
//移除    
    function deleteNode(){ 
        var oP = document.body.getElementsByTagName("p")[0]; 
        /*document.body.removeChild(oP); */ 
        oP.parentNode.removeChild(oP);   
    } 
替换：
[javascript]
//替换  
    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);   
    } 
让新消息出现在旧消息之前：
[javascript]
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优化中有提到
[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的两种方法
[javascript]
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);     
    } 

另外如果往某个div中加的话

<div id=testDiv>
<input type="text" size="80" name="test">
</div>
<input type="button" value="增加" οnclick="javascript:add();" class="bgbutton">
------------------------           
<script language="JavaScript">  
    var testCount= 1;
function addAffix()
    {
        var testDiv= document.getElementById("testDiv");
        var br = document.createElement("br");
        testDiv.appendChild(br);
                testCount++;
        var fileObj = document.createElement("input");  
        fileObj.type="text";
        fileObj.name = "test"+testCount;
        fileObj.size = "80";
        testDiv.appendChild(fileObj);
    }
</script>