html和js一点整理（1）

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

一：创建AttributegetAttribute、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="增加" onclick="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>