兼容的 DOM 方法

1. 获取某个容器中所有的元素（也可以获取特定标签的元素）（children）

<div id = "box">
    <div></div>
    <div>
          <p></p>
    </div>
    <p></p>
</div>
<script>
// 想获取 box 下的所有子元素
      var oDiv = document.getElementById("box");
     // oDiv.children.length   //   IE 下与标准浏览器表现不一致
      function children(curEle,tagName){
            var arr = [];
            if(/MSIE (6|7|8)/i.test(navigator.userAgent)){    // IE 6 ~ 8 
                  var nodeList = curEle.childNodes;
                  for(var i = 0, len = nodeList.length; i< len; i++){
                    var curNode = nodeList[i];
                    if(curNode.nodeType == 1){
                       arr[arr.length] = curNode;
                    }
                    nodeList = null;
                  }
            }else{
               arr = Array.prototype.slice.call(curEle.children);   // 标准浏览器
            }

            if(typeof tagName !== "string") {
                  for(var i = 0; i < arr.length; i++){
                      var ele = arr[i];
                      if(ele.nodeName.toLowerCase() == tagName.toLowerCase()){
                          arr.splice(i,1);
                           i--;
                      }
                  }
             }
            return arr;
      }
</script>

2. getElementsByClass ：通过元素的样式获取一组元素
3. 获取上一个兄弟元素节点（prev）、下一个兄弟元素节点（next）、所有的哥哥节点（prevAll）、所有的弟弟节点（nextAll）、相邻的两个元素（sibling）、所有的兄弟元素节点（siblings）

var flag = "getComputedStyle" in window
function prev(ele){
  if(flag){   // IE 6~8 中为 false
    return ele.previousElementSibling;
   } 
    var pre = ele.previousSibling;
    while(pre && pre.nodeType !== 1){
      pre = pre.previousSibling;
    }
    return pre;
}

function next(ele){
  if(flag){
    return ele.nextElementSibling;
  }
  var nextEle = ele.nextSibling;
  while(nextEle && nextEle.nodeType !== 1){
      nextEle = nextEle.nextSibling'
    }
    return nextEle;
}

function prevAll(ele){
  var arr = [];
  var pre = prev(ele);
  while(pre){
    arr.unshift(pre);
    pre = prev(ele);
  }
  return arr;
}

function nextAll(ele){
  var arr = [];
  var nex = next(ele);
  while (nex){
    arr.push(nex);
    nex = next(nex);
  }
  return arr;
}

function sibling(ele){
  var pre = prev(ele);
  var nex = next(ele);
  var arr = [];
  pre ? arr.push(pre) : null;
  nex ? arr.push(nex) : null;
  return arr;
}

function siblings(ele){
   return prevAll(ele).concat(nextAll(ele));
}

4. 获取第一个元素的子节点、最后一个元素的子节点

function firstChild(ele){
  var allEle = children(ele);    // ele.children 返回数组，如果没有子元素，返回 []
  return allEle.length > 0 ? allEle[0] : null;   
}

function lastChild(ele){
  var allEle = children(ele);
  return allEle.length > 0 ? allEle[allEle.length - 1] : null;
}

5. 获取当前元素的索引（index）

function index(ele){
   return prevAll(ele).length;
}

6. 增加到某个容器的开头（prepend）

function append(container, newEle){
  container.appendChild(newEle);
}

function prepend(container, newEle){
  var firstEle = firstChild(container);
  if(firstEle){
    container.insertBefore(newEle, firstEle);
  }else{
     container.appendChild(newEle); // 说明没有子元素
  }
}

7. 增加到容器中某个元素的末尾（insertAfter）

function insertBefore(newEle,oldEle){
   oldEle.parentNode.insertBefore(newEle,oldEle);
}

function insertAfter(newELe, oldEle){
  var nex = next(oldEle);
  if(nex){
     oldEle.parentNode.insertBefore(newEle,nex);  
    return;
  }
  oldEle.parentNode.appendChild(newEle);
}

function insertAfter(nEle,oEle){
  var parentEle = oEle.parentNode;
  if(parentEle.lastChild == oEle){
    parentEle.appendChild(nEle);
  }else{
    parentEle.insertBefore(nEle,oEle.nextSibling); // 紧跟后面
  }
}

8. 判断是否有样式类名（hasClass）

var box = document.getElementById("box");
box.className +=" className"; // 加等于 注意空格 

function hasClass(ele, className){
//  ele.className  得到一个字符串
  var reg = new RegExp("(^| +)"+className + "( +|$)");   // 左边可能是开头或一到多个字符，右边可能是结尾或一到多个字符
   return reg.test(ele.calssName);
}

9. 增加样式类名（addClass）

function addClass(ele, className){
    var arr = className.split(/ +/g);
    for(var i = 0; i < arr.length; i++ ){
        var curName = arr[i];
        if(!hasClass(ele,curName)){
          ele.ClassName +=" " + curName;
        }
    }
}

10. 删除样式类名（removeClass）

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

11. 设置CSS样式（setCss）

function setCss(ele, attr, value){
  if(attr == "float"){
     ele.style.cssFloat = value;
     ele.style.styleFloat = value;
     return;
  }
  if(attr == "opacity"){
    ele.style.opacity = value;
    ele.style.filter = "alpha(opacity=" + value * 100 + ")";
    return;
  }
  var reg = /^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;
  if(reg.test(attr)){
    if(!isNaN(value)){
        value = value + "px";
    }     
  }
  ele.style[attr] = value;
}

12. 批量设置CSS样式（setGroupCss）

function setGroupCss(ele,obj=0){
  if(obj.toString() !== "[object Object]"){   // 如果只传入ele，obj = undefined，undefined null 没有 toString() 方法。
    return;
  }
  for(var key in obj){
    if(obj.hasOwnProperty(key)){
          setCss(ele,key,obj.key);
     }  
  }
}

13. jQuery 中的 css 方法的使用以及自定义的 css 方法：

$("#box").css("width")  // getCss
$("#box").css("width",300) // setCss
$("#box").css({
    width:100, height:100
})

function css(ele){
  var arr = Array.prototype.slice.call(arguments,1);
  if(typeof arguments[1] == "string"){
    if(typeof arguments[2] == "undefined"){
        return getCss.apply(ele,arr);
    }
    setCss.apply(ele, arr);
    return;
  }
  if(argTwo.toString() == "[object Object]"){
    setGroupCss.apply(this,arguments);
  }
}

兼容的 DOM 方法

推荐阅读更多精彩内容