children 封装

针对 Node.children 是 IE > 7 之后的版本才实现。
为兼容低版本浏览器，为 Node.children 封装一个的 elemChildren 方法：

  1. function elemChildren(node){
  2.     var children = { // 创建一个类数组以便将元素节点放入
  3.       length: 0,
  4.     push: Array.prototype.push,
  5.     splice: Array.prototype.splice
  6.   },
  7.       len = node.childNodes.length;
  9.   for(var i = 0; i < len; i++){ // 找出 MLElement.childNodes 下类型 nodeType 为元素(1:Node.ELEMENT_NODE)的节点
  10.     var childrenItem = node.childeNodes[i];
  11.     if(childrenItem.nodeType === 1){ 
  12.         children.push(childrenItem); // 是元素节点时放入到类数组中
  13.     }
  14.   }
  16.   return children;
  17. }

parentElement 封装

针对 Node.parentElement 是 IE > 9 之后的版本才实现。
并且 Node.parentNode/ Node.parentElement 只支持一层父节点，如果要祖父或以上级别需要多次调用
为兼容低版本浏览器，为 HTMLElement.parentElement 封装一个的 parentElement 方法：

  1. function parentElement(elem, tier){
  2.   var type = typeof tier; 
  3.   if(type === "undefined"){ //tier 为空直接输出 parentNode / parentElement
  4.       return elem.parentElement ? elem.parentElement : elem.parentNode;
  5.   }else if(tier <= 0 || type !== 'number'){
  6.       return undefined;
  7.   }
  8.   while(tier){ // tier 自减至 0 时停止
  9.        elem = elem.parentElement ? elem.parentElement : elem.parentNode;
  10.     tier --;
  11.   }
  12.   return elem;
  13. }

insertAfter 封装

https://www.yuque.com/sylaryip/aasla4/gi2ln3#Jg2qq

  1. function insertAfter(node, a, b){
  2.     node.insertBefore(b, a.nextSibling)
  3. }

pageXOffset/pageYOffset 封装

https://www.yuque.com/sylaryip/aasla4/ukrluf#eacb2ab9
兼容IE 与 现代浏览器

  1. function getScrollOffset(){
  2.     if(window.pageXOffset){
  3.       return {left: window.pageXOffset, top:window.pageYOffset};
  4.   }else{
  5.       return { //IE要么document.documentElement在要么在document.body获取scrollLeft / scrollTop
  6.         left: document.documentElement.srcollLeft + document.body.scrollLeft,
  7.       top: document.documentElement.scrollTop + document.body.scrollTop,       
  8.     }
  9.   }
  10. }

innerWidth/innerHeight 封装

https://www.yuque.com/sylaryip/aasla4/gl72xq

  1. function getViewportSize(){
  2.     if(window.innerWidth){
  3.       return {
  4.         width: window.innerWidth,
  5.       height: window.innerHeight,
  6.     }
  7.   }else{
  8.     // 不包括滚动条的宽度
  9.       if(document.compatMode === 'BackCompat'){
  10.         return {
  11.           width: document.body.clientWidth,
  12.         height: document.body.clientHeight,
  13.       }
  14.     }else{
  15.         return {
  16.           width: document.documentElement.clientWidth,
  17.         height: document.documentElement.clientHeight,
  18.       }
  19.     }
  20.   }
  21. }

offsetLeft / offsetTop 封装

https://www.yuque.com/sylaryip/aasla4/siw1wu
元素到窗口的距离

  1. function getElemDocPosition(el){
  2.     var parent = el.offsetParent,
  3.       offsetLeft = el.offsetLeft,
  4.       offsetTop = el.offsetTop;
  6.   while(parent){ // 一直至 body , body 的 offsetParent 为 null
  7.       offsetLeft += parent.offsetLeft;
  8.     offsetTop += parent.offsetTop;
  10.     parent = parent.offsetParent;
  11.   }
  13.   return {
  14.     left: offsetLeft,
  15.     top: offsetTop,
  16.   }
  17. }

window.getCoumputedStyle 封装

DOM2 和 DOM3
IE不支持 getComputedStyle，有 HTMLElement.currentStyle 但不支持伪类。

  1. function getStyles(elem, prop){
  2.     if(window.getComputedStyle){
  3.       return prop ? window.getComputedStyle(elem, null)[prop] 
  4.                           : window.getComputedStyle(elem, null);
  5.   }else{
  6.       return prop ? elem.currentStyle[prop]
  7.                             : elem.currentStyle;
  8.   }
  9. }

elem.attachEvent 封装

  1. function addEvent(el, type, fn, capture) {
  2.   if (el.addEventListener) {
  3.     el.addEventListener(type, fn, capture);
  4.   } else if (el.attachEvent) {
  5.     el.attachEvent('on' + type, function () {
  6.       fn.call(el);
  7.     });
  8.   } else {
  9.     el['on' + type] = fn;
  10.   }
  11. };

e.stopPropagation 封装

  1. function cancelBubble(e) {
  2.   var e = e || window.event;
  4.   if (e.stopPropagation) {
  5.     e.stopPropagation();
  6.   } else {
  7.     e.cancelBubble = true;
  8.   }
  9. };

pageX/Y 兼容方法

getScrollOffset()
鼠标行为坐标系