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;
  
}



*/

转载于:https://www.cnblogs.com/aix1314/p/4549023.html