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