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的內容

-----------後續會繼續補充-----
有錯誤的地方但願各位大神斧正！！！！謝謝各位。