Javascript DOM學習總結

1. 節點及其型別:

北京

    1). 元素節點
    2). 屬性節點: 元素的屬性, 可以直接透過屬性的方式來操作. 
    3). 文字節點: 是元素節點的子節點, 其內容為文字. 
2. 在 html 文件的什麼位置編寫 js 程式碼?
    1). 直接在 html 頁面中書寫程式碼.
    Click Me!
缺點: 
    ①. js 和 html 強耦合, 不利於程式碼的維護
    ②. 若 click 相應函式是比較複雜的, 則需要先定義一個函式, 然後再在 onclick屬性中完成對函式的引用, 比較麻煩
    2). 一般地, 不能在 body 節點之前來直接獲取 body 內的節點, 因為此時 html 文件樹還沒有載入完成, 獲取不到指定的節點:
    
    
     Untitled Document
    
        var cityNode = document.getElementById("city");
        //列印結果為 null.
        alert(cityNode);
    
    
    3). 可以在整個 html 文件的最後編寫類似程式碼, 但這不符合習慣
    4). 一般地, 在 body 節點之前編寫 js 程式碼, 但需要利用 window.onload 事件,該事件在當前文件完全載入之後被觸發, 所以其中的程式碼可以獲取到當前文件的任何節點.    
    
    
     Untitled Document
    
        window.onload = function(){
        var cityNode = document.getElementById("city");
        alert(cityNode);
        };
    
    
    5)為window.onload賦值的方式是;
    window.onload = function(){
        //
    }
也可以
    function myfunc(){
        //
    }
    window.onload = myfunc;
    但不能這樣：因為這樣的賦值將導致myfunc函式執行，而賦值給window.onload的將是函式的執行結果，賦值的應該是一個函式的引用。window.onload=myfunc();
3. 獲取元素節點:
    1).document.getElementById: 根據 id 屬性獲取對應的單個節點,id應該保證在文件中的唯一性
        var element = document.getElementById("id");
    2).document.getElementsByTagName: 
        根據標籤名獲取指定節點名字的陣列, 陣列物件 length屬性可以獲取陣列的長度
        var paras = document.getElementsByTagName(“p”);
    3).document.getElementsByName: 
        根據節點的 name 屬性獲取符合條件的節點陣列, 但 ie 的實現方式和 W3C 標準有差別: 
        在 html 文件中若某節點(li)沒有 name 屬性,則 ie 使用 getElementsByName 不能獲取到節點陣列, 但火狐可以.
        var names= document.getElementsByName(“name”);
    4). element.hasChildNodes();
        該方法用來檢查一個元素是否有子節點，返回值是 true 或 false
        文字節點和屬性節點不可能再包含任何子節點，所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false.

    如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空陣列和空字串
        var booleanValue = element.hasChildNodes();

4. 獲取屬性節點:透過元素節點.的方式來讀寫屬性
    透過元素節點的 getAttributeNode 方法來獲取屬性節點,然後在透過 nodeValue 來讀寫屬性值

5. 獲取元素節點的子節點(**只有元素節點才有子節點!!):
    1). childNodes 屬性獲取全部的子節點, 但該方法不實用. 因為如果要獲取指定的節點的指定子節點的集合, 可以直接呼叫元素節點的 getElementsByTagName() 方法來獲取. 
    2). firstChild 屬性獲取第一個子節點，通常用於獲取文字節點。
    3). lastChild  屬性獲取最後一個子節點

6. 獲取文字節點:
    1）獲取文字節點所在的元素節點
        var bjnode=document.getElementById("bj");
    2）呼叫firstChild方法找到文字節點
        var bjtextnode=bjnode.firstChild;
    3）透過操作文字節點的屬性來讀寫文字節點的值
        alert(bjtextnode.nodeValue);
        bjtextnode.nodeValue="ss";

7.節點的屬性:
    1).nodeName: 代表當前節點的名字. 只讀屬性. 
        **如果給定節點是一個文字節點, nodeName 屬性將返回內容為 #text 的字串
    2).nodeType：返回一個整數, 這個數值代表著給定節點的型別. 只讀屬性. 
        1 -- 元素節點, 2 -- 屬性節點, 3 -- 文字節點
    3).nodeValue：返回給定節點的當前值(字串). 可讀寫的屬性
        ①. 元素節點, 返回值是 null.
        ②. 屬性節點: 返回值是這個屬性的值
        ③. 文字節點: 返回值是這個文字節點的內容

8. 建立元素節點:var linode=document.createElement("li");
    按照給定的標籤名建立一個新的元素節點. 
    方法只有一個引數：被建立的元素節點的名字, 是一個字串.
    方法的返回值：是一個指向新建節點的引用指標. 返回值是一個元素節點, 所以它的 nodeType 屬性值等於 1.
    **新元素節點不會自動新增到文件裡, 它只是一個存在於 JavaScript 上下文的物件. 

9.建立屬性節點:先需要建立一個元素節點，然後透過.的方式為其屬性賦值就可以了
    var anode=document.createElement("a");
    anode.href="deleteEmp?id=xxx";

10. 建立文字節點:
    1). createTextNode(): var dtnode=document.createTextNode("delete")
    建立一個包含著給定文字的新文字節點. 這個方法的返回值是一個指向新建文字節點引用指標. 它是一個文字節點, 所以它的 nodeType 屬性等於 3.
    方法只有一個引數：新建文字節點所包含的文字字串. 新元素節點不會自動新增到文件裡
                         
11. 為元素節點新增子節點:
    1). appendChild(): var reference = element.appendChild(newChild): 給定子節點 newChild 將成為給定元素節點 element 的最後一個子節點.
    方法的返回值是一個指向新增子節點的引用指標.
        var tr=document.createElement("tr");
        var nametd=document.createElement("td");
        tr.appendChild(nametd);                      
12. 節點的替換:
    1). replaceChild(): 把一個給定父元素裡的一個子節點替換為另外一個子節點
        element.replaceChild(newChild,oldChild);
        返回值是一個指向已被替換的那個子節點的引用指標
        var bjnode=document.getElementById("bj");
        var rlnode=document.getElementById("rl");
        var gamenode=document.getElementById("game");
        gamenode.replaceChild(bjnode,rlnode);
    2). 該節點除了替換功能以外還有移動的功能.  
    3). 該方法只能完成單向替換, 若需要使用雙向替換, 需要自定義函式:
    /**
    * 互換 aNode 和 bNode
    * @param {Object} aNode
    * @param {Object} bNode
    */
    function replaceEach(aNode, bNode){
        if(aNode == bNode){
            return;
    }
        var aParentNode = aNode.parentNode;
        //若 aNode 有父節點
            if(aParentNode){
                var bParentNode = bNode.parentNode;
                //若 bNode 有父節點
                if(bParentNode){
                    var tempNode = aNode.cloneNode(true);
                    bParentNode.replaceChild(tempNode, bNode);
                    aParentNode.replaceChild(bNode, aNode);
                }
            }
    }  
13. 插入節點:
    1). insertBefore(): 把一個給定節點插入到一個給定元素節點的給定子節點的前面
        element.insertBefore(newNode,targetNode);
        節點 newNode 將被插入到元素節點 element 中並出現在節點 targetNode 的前面. 節點 targetNode 必須是 element 元素的一個子節點。
        var citynode=document.getElementById("city");
        var bjnode=document.getElementById("bj");
        var rlnode=document.getElementById("rl");
        citynode.insertBefore(rlnode,bjnode);
 
    2). 自定義 insertAfter() 方法     
       /**
    * 將 newChild 插入到 refChild 的後邊
    * @param {Object} newChild
    * @param {Object} refChild
    */
    function insertAfter(newChild, refChild){
        var refParentNode = refChild.parentNode;
        //判斷 refChild 是否存在父節點
        if(refParentNode){
        //判斷 refChild 節點是否為其父節點的最後一個子節點
            if(refChild == refParentNode.lastChild){
                refParentNode.appendChild(newChild);
            }else{
                refParentNode.insertBefore(newChild, refChild.nextSibling);
            }
          }
    }    

14. 刪除節點:
    1). removeChild(): 從一個給定元素裡刪除一個子節點
    element.removeChild(node);
    返回值是一個指向已被刪除的子節點的引用指標. 某個節點被 removeChild() 方法刪除時, 這個節點所包含的所有子節點將同時被刪除. 
    如果想刪除某個節點, 但不知道它的父節點是哪一個, parentNode 屬性可以幫忙。
    var bjnode=document.getElementById("bj");
    bjnode.parentNode.removeChild(bjnode);

15. innerHTML屬性:
    1)非標準，但所有的瀏覽器都支援
    2)讀寫屬性，讀寫某HTML元素的HTML內容
    var citynode=document.getElementById("city");
    alert(citynode.innerHTML);