JavaScriptDOM的節點操作筆記

這兩天再學佟剛的JavaScriptDOM節點操作，先把其筆記記錄于此，加深自己對該知識的印象，也便于后期的查看。

1.節點及其類型：
1）元素節點
2）屬性節點：元素的屬性，可以直接通過屬性的方式來操作
3）文本節點：是元素節點的子節點，其內容是文本

2.一般地，不能在body節點之前來直接獲取body內的節點，因為此時html文檔樹沒有完全加載，所以獲取不到指定的節點，需要使用window.onload事件來操作

獲取節點****

    1.獲取元素節點：
      document.getElementById :根據id屬性來獲取對應的單個節點

        document.getElementsByTagName:根據標簽名獲取指定的節點名字的數組，length是其數組的長度

        document.getElementsByName:根據節點的name屬性來獲取符合條件的節點數組  （ie不支持）

        2.獲取屬性節點：

            可以直接通過cityCode.id這樣的方式來獲取和設置屬性節點的值；通過元素節點的getAttributeNode方法來獲取屬性節點，然后通過nodeValue來讀寫屬性值

      3.獲取元素節點的子節點（**只有元素節點存在子節點）：
                 .firstChild 屬性獲取第一個子節點
                 .lastChild 屬性獲取最后一個子節點

        4.獲取文本節點：
                    先獲取元素節點的子節點，如果元素節點的子節點只有一個子節點，可以先獲取到指定的元素節點，然后利用.firstChild.nodeValue的方法來讀寫其文本節點的值

        5.節點的屬性：
            nodeName ：代表當前節點的名字，只讀屬性
                                   **如果給定的節點是文本節點，那么，nodeName屬性將返回內容為#text的字符串
                nodeType：給定節點的類型
                     1--元素節點 ；2--屬性節點  ；3--文本節點
                 nodeValue：返回給定節點的當前值（字符串）
                        1--元素節點返回null ；2--屬性節點返回這個屬性的值 ；3 --文本節點返回這個文本節點的內容

        6.創建元素節點：
           createElement()：按照指定的標簽名來創建一個新的元素節點，方法只有一個參數：就是被創建的元素節點的名字，是一個字符串；方法的返回值是一個指向新建節點的引用指針，返回值是一個元素節點，所以其nodeType=1

        7.創建一個文本節點：
            createTextNode()創建一個包含著指定文本的新文本節點，這個方法的返回值是一個指向新建文本節點的引用指針（當前被創建的文本節點），他是一個文本節點，所以其nodeType=3，方法只有一個參數，就是當前被創建的文本節點中所包含的文本字符串。

                8.為元素節點添加一個子節點：appendChild()，就是當前該元素節點的最后一個子節點，返回返回值是一個指向新增子節點的引用指針

9.節點的替換：
replaceChild():把一個給定的父元素中一個子節點替換為另一個子節點，返回值是新替換后的那個子節點的引用指針；除了替換還有移動功能，
****互換功能：（自定義方法）
/**

• 互換 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); 
                          }
                      }
  
                  }   

10.插入節點：

    insertBefore()：把一個給定節點插入到一個給定元素節點的給定子節點的前面

                        /**
                            自定義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);
                                }   
                            }
                        }

11.刪除節點：

removeChild() :從一個給定的元素中刪除一個子節點
其返回值是一個指向已經被刪除的子節點的引用指針；如果某個節點被刪除后，其下面的所有子節點將全部同時被刪除

12.innerHTML屬性：表示元素的html的內容

-----------后續會繼續補充-----
有錯誤的地方希望各位大神斧正！！！！謝謝各位。