1. 程式人生 > >JavaScriptDOM的節點操作筆記

JavaScriptDOM的節點操作筆記

att ren element true body () inner 繼續 獲取

這兩天再學佟剛的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的內容

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

JavaScriptDOM的節點操作筆記