JS原生DOM增刪改查操作

1.0DOM操作增刪改查

1.1. 查詢

就是獲取元素

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

1.2. 增加

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

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

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

1.3. 刪除

1. 刪除元素
   • removeChild
   • removeAttributeNode
   • parent.removeChild  有返回值，其返回值未被完全刪除還能進行其他操作（如插入操作）
   • ele.remove    完全刪除

1.4 修改

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

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

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

 2.1元素節點

2.1.1  添加 （先創建再添加）

　　創建

   　　  document.createEelement()    創建元素節點

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

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

2.1.2  刪除元素

　　最常用得當然是removeChild （） ;

      關於刪除子元素：

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

2.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;