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;

}

*/