DOM方法

1 children

获取某一容器的元素子节点,只考虑子元素而不考虑所有后代元素
ele.children只能获取儿子级的子元素，而且不兼容

//获取ele的子级元素
function children(ele,tagname){
  var arr = [];
  if(/MSIE (6|7|8)/i.test(navigator.userAgent)){
    //IE8及以下
    var nodeList = ele.childNodes;
      for(var i=0;i<nodeList.length;i++){
        var cur = nodeList[i];
        if(cur.nodeType === 1){
          arr[arr.length] = cur;
        }
      }
  }else{
    //标准浏览器
    arr = Array.prototype.slice.call(ele.children);
  } 
  //二次筛选指定标签
  if(typeof tagname === "string"){
    for(var i=0;i<arr.length;i++){
      var cur = arr[i];
      if(cur.tagName.toLowerCase() !== tagname.toLowerCase()){
        arr.splice(i,1);
        i--;
      }
    }
  }
  return arr;
}

2 append,prepend,insertBefore,insertAfter

//在指定容器的末尾追加元素
function append(newEle,container){
  container.appendChild(newEle);
}

//获取指定元素的第一个子元素
function first(ele){
  var arr = children(ele)
  return arr.length>0?arr[0]:null;
}
//在指定容器的开头追加元素
function prepend(newEle,container){
  var first = window.first(container);
  if(first){
    container.insertBefore(newEle,first);
    return;
  }
  //如果第一个元素都不在，表明该容器没有子元素
  container.appendChild(newEle);
}

//在指定元素之前追加元素
function insertBefore(newEle,oldEle){
  oldEle.parentNode.insertBefore(newEle);
}

//获取指定元素的后一个元素
function next(ele){
  if("getComputedStyle" in window){
    return ele.nextElementSibling;
  }
  var next = ele.nextSibling;
  while(next && next.nodeType !== 1){
    next = next.nextSibling;
  }
  return next;
}
//在指定元素之后追加元素
function insertAfter(newEle,oldEle){
  var next = window.next(oldEle);
  if(next){
    oldEle.parentNode.insertBefore(newEle,next);
    return ;
  }
  //如果下一个元素都不在，表明该该元素已为最后一个元素
  oldEle.parentNode.appendChild(newEle);
}

3 操作元素样式类名

function hasClass(ele,className){
    var reg = new RegExp("(^| +)"+className+"( +|$)");
    return reg.test(ele.className);
}

function addClass(ele,className){
    //防止className中包含多个类名
    var ary = className.split(/ +/g);
    for(var i=0;i<arr.length;i++){
        var cur = arr[i];
        if(!this.hasClass(ele,cur)){
            ele.className += " " + cur;
        }
    }
}

function removeClass(ele,className){
    var ary = className.split(/ +/g);
    for(var i=0;i<arr.length;i++){
        var cur = arr[i];
        if(this.hasClass(ele,cur)){
            var reg = new RegExp("(^| +)"+cur+"( +|$)","g");
            ele.className = ele.className.replace(reg," ");
        }
    }
}