dom兼容性問題3 元素操做

/* 
var oLi = document.createElement('li');
    
   oUl.appendChild( oLi );
  
};



createElement('') : 建立一個dom元素

appendChild() : 往一個節點的現有子節點後面追加一個新的子節點。

  父級.appendChild( 子節點 );


insertBefore()


createElement('') : 建立一個dom元素

appendChild() : 往一個節點的現有子節點後面追加一個新的子節點。

  父級.appendChild( 子節點 );

insertBefore() ： 往一個節點的指定現有子節點前面插入一個新的子節點。

  父級.insertBefore( 準備插入的子節點，插入到哪一個子節點的前面 );

removeChild() : 從一個節點裏面刪除指定的子節點。
  
  父級.removeChild( 準備要刪除的子節點 );
  
replaceChild() : 用一個節點替換掉另外一個節點裏面的指定子節點。

  被替換元素的父級.replaceChild( 用來替換的節點，被替換掉的子節點 );

  被替換的元素必須是真實存在的節點元素。
  
cloneNode() :  複製一個節點。
    
    被複制的節點.cloneNode( boolean );
      boolean : 指定是否複製全部子孫節點。
        true : 複製全部子孫節點。
        false : 只複製節點自己。
      
    舒適提醒：cloneNode() 只會複製dom結構，而不會複製事件或者經過js添加的屬性等。
  appendChild() / insertBefore() / replaceChild() ： 若是操做的對象是一個已經存在在頁面中的元素，則是直接移動元素，而並不是複製元素。

exp:
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oBox = document.getElementById('box');

document.onclick = function(){
  
    //oBox.appendChild( oDiv1 );
   // oBox.appendChild( oDiv1.cloneNode() );
    //oBox.insertBefore( oDiv1 , oDiv2 );
    oBox.replaceChild( oDiv1 , oDiv2 );
  
};



appendChild() / insertBefore() / replaceChild() ： 若是操做的對象是一個已經存在在頁面中的元素，則是直接移動元素，而並不是複製元素。
      
-----------------------------------------------------
class封裝函數
function hasClass( obj , sClass ){
  
  var aClass = obj.className.split(' ');
  
  if( !obj.className )return false;
  
  for(var i=0; i<aClass.length; i++){
    if( aClass[i] == sClass )return true;
  }
  
  return false;
  
}


function removeClass( obj , sClass ){
    var aClass = obj.className.split(' ');
    
    if( !obj.className ) return;
    
    for(var i=0; i<aClass.length; i++){
    
      if( aClass[i] == sClass ){
        
        aClass.splice( i , 1 );
        obj.className = aClass.join(' ');
        return;
        
      }  
      
    }
  
}

function addClass( obj , sClass ){
  
    var aClass = obj.className.split(' ');
    
    if( !obj.className ){
      obj.className = sClass;
      return;  
    }
    
    for(var i=0; i<aClass.length; i++){
      if( aClass[i] == sClass ) return;
    }
    
    obj.className += ' ' + sClass;  
  
}
//獲取

function getByClass( sClass , parent ){ 
  var aEles = (parent||document).getElementsByTagName('*');
  var arr = [];

  for(var i=0; i<aEles.length; i++){ //查看每個元素是否知足要求
    var aClass = aEles[i].className.split(' ');
    
    for(var j=0; j<aClass.length; j++){ //查看元素的每個className
      if( aClass[j] == sClass ){
        arr.push( aEles[i] );  
        break;
      }
    }
    
  }
  
  return arr;
  
}



*/