混淆篇之原生DOM操作方法小結

　

1.0   DOM結構  

     1.1先來看結構圖：

 

父節點
        兄弟節點
        當前節點
            屬性節點
            子節點
        兄弟節點
一般任意一個節點我們都會從父節點，子節點，以及兄弟節點的角度去考察。節點一般我們只需關注元素節點，屬性節點及文本節點即可。

 

 1.2  節點的相關屬性（只讀的）

1.2.1 nodeType  屬性規定節點的

        nodeType = 1  元素節點   記住

        nodeType = 2  屬性節點   記住

        nodeType = 3  文本節點   記住

        nodeType = 8  注釋節點

        nodeType = 9  文檔

        nodeType = 11   document.fragment

 

1.2.2 nodeName 屬性規定節點的名稱

 

         元素節點  nodeName = 標簽的名稱

         console.log(elementNode.nodeName);          //會將標簽名大寫打印出來

         文本節點  nodeName = #text

        console.log(textNode.nodeName);   //#text

        屬性節點  nodeName = 屬性的名稱

        console.log(attrNode.nodeName);   //attr name

 

1.2.3  nodeValue 屬性規定節點的值。

 

        元素節點  nodeValue =  null;

        文本節點  nodeValue = 文本的內容

        屬性節點  nodeValue = 屬性的值

           

2.0DOM操作增刪改查

2.1. 查詢

就是獲取元素

1. 標准 DOM API
   • doucment.getElementById
   • document.getElementsByTagName
   • document.getElementsByName
   • document.getElementsByClassName
   • document.querySelectorAll
2. 親屬訪問
3. 屬性獲取
   • getAttribute
   • getAttributeNode

2.2. 增加

1. 創建
   • document.createEelement 創建元素節點
   • document.createTextNode 創建文本節點
   • doucment.createAttribute 屬性節點
   • innerHTML
   • innerText
   • cloneNode()  
2. 加入
   • appendChild 追加到結尾處
   • innerHTML
   • insertBefore 用法?將元素插入到某一個元素的前面

     父元素.insertBefore( 新元素, 舊元素 );
     // 將 新元素 插入到 舊元素 的前面
     

3. 其他
   • style 的操作
   • setAttribute( 屬性名, 屬性值 )

2.3. 刪除

1. 刪除元素
   • removeChild
   • removeAttributeNode

2.4 修改

1. 修改節點
   • 刪除節點再加入
2. 修改樣式
   • style.xxx = vvv;
   • setAttribute
3. 修改文本
   • innerHTML
   • innerText
   • 節點操作
   • nodeValue
4. 修改屬性
   • .xxx = vvv
   • setAttribute修改屬性
   • replaceChild()    

 3對於不同DOM節點的操作總結

    雖然上面也全面的總結了相關的操作，但其實在查詢使用時我更喜歡根據節點的NodeType來操作，因此對於屬性節點和元素節點的常見操作分別歸納了一下

 3.1元素節點

3.1.1  添加 （先創建再添加）

　　創建

   　　  document.createEelement()    創建元素節點

     　　當然使用 innerHTML，cloneChild的方法也能實現創建元素的目的

 　　 加入
   　　 * appendChild    追加到結尾處
    　　* innerHTML
   　　 * insertBefore   

3.1.2  刪除元素

　　最常用得當然是removeChild （） ;

      關於刪除子元素：

　　　　 // 從 node 中刪除 一個 div
 　　　　　　node.removeChild( divDOM );
　  　　 // 假設 node 節點中只有一個元素 div
　　　　　　 node.innerHTML = '';

3.1.3修改節點 一般都是刪除再加入，即removeChild+appendChild，也可以使用replaceChild() 直接替換

先總結這些，其實DOM的方法雖然多，但好在常用的很少見，希望大家可以在理解DOM結構的基礎上熟練操作DOM的apl。

 

  3.2 元素節點  

  3.2.1 添加屬性    

    doucment.createAttribute()  創建屬性節點

    使用 setAttribute 添加屬性
        // 添加自定義, 非標准的屬性 ( DOM-Core ) 

　　　　div.setAttribute( 'attrName', 'attrValue' );
    使用 .xxx = vvv利用對象的動態特性添加屬性 
        // 添加的標准屬性( HTML-DOM )
                div.attrName = 'attrValue';
    第三種( 了解 )使用 DOM 節點方法
        // 純 DOM-Core 的做法
                var attrNode = document.createAttribute( 'test' );//創建屬性節點對象
                attr.nodeValue = '測試';  //設置屬性值
                div.setAttributeNode( attrNode );   //添加給div
    區別
        div.setAttributeNode(attrnode對象）
        div.setAttribute（'屬性名'，'屬性值‘）；

 

3.2.2 刪除
        removeAttribute（’屬性名’）
        removeArrtibuteNode（節點對象名）

　　　　//removeAttribute 是 為了 簡化node.removeAttribute( '屬性名' ),不用先獲取屬性節點再刪除，而是直接操作元素節點;

3.33   獲取
    getAttribute('屬性名 ')  獲取屬性值  //簡化了node.getAttributeNode( '屬性名' );

    getAttributeNode（'屬性名'）  獲取屬性節點對象   

  // var attrNode = node.getAttributeNode( '屬性名' );
  // attrNode.nodeValue;