好好学一遍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);
  &nbs

补充：web前端 , JavaScript ,