DOM兼容

  1 //console.log(HTMLElement); IE 78 不支持 HTMLElement
  2     // 遍历一边文档 删除空格 但是性能太差！！！
  3     function cleanWhitespace(element){
  4         element = element || document; // 如果不提供参数，则处理整个文档
  5 
  6         var cur = element.firstChild;
  7 
  8         while( cur != null){
  9             var temp = cur.nextSibling; // 先保存下一个节点
 10             if(cur.nodeType == 3 && !/S/.test(cur.nodeValue)){ // 是文本节点 并且 全部是空格
 11                 
 12                 element.removeChild(cur);
 13                 console.log(22);
 14             }else if(cur.nodeType == 1){
 15                 console.log(11);
 16                 cleanWhitespace(cur);
 17             }
 18 
 19             cur = temp;
 20         }
 21     }
 22 
 23     cleanWhitespace(document.body);
 24 
 25     console.log(document.body.childNodes[0]);
 26     console.log("2:", document.body.childNodes[1]);
 27     console.log(document.body.childNodes[2]);
 28 
 29     var node = document.body.childNodes[2];
 30     console.log("我是参考节点：", node);
 31 
 32     // 查找相关元素的兄弟元素的前一个
 33     function prev(ele){
 34         do{
 35             ele = ele.previousSibling;
 36         }while(ele && ele.nodeType != 1)
 37         return ele;
 38     }
 39 
 40     console.log("prev is :", prev(node));
 41 
 42     // 查找下一个
 43     function next(ele){
 44         do{
 45             ele = ele.nextSibling;
 46         }while(ele && ele.nodeType != 1)
 47         return ele;
 48     }
 49 
 50     console.log("next is :", next(node));
 51 
 52     // 查找元素第一个节点 
 53     function first(ele){
 54         ele = ele.firstChild;
 55         return ele && ele.nodeType != 1 ? next(ele) : ele;
 56     }
 57     console.log("first is", first(document.body));
 58 
 59     // 查找元素的最后一个子节点
 60     function last(ele){
 61         ele = ele.lastChild;
 62         return ele && ele.nodeType != 1 ? prev(ele) : ele;
 63     }
 64     console.log("last is :", last(document.body));
 65 
 66     // 查找元素的父元素 
 67     /*function parent(ele, num){
 68         num = num || 1;
 69         for(var i = 0;i < num; i++){
 70             if(ele !== null){
 71                 ele = ele.parentNode;
 72             }
 73             return ele;
 74         }
 75     }*/
 76     console.log("parent is :", node.parentNode); // <body>
 77 
 78     // 检测.style.height 不能省略 'px'
 79     var xx = document.getElementById("xx");
 80     xx.style.height = 200 + 'px';
 81     // jq 的写法: height(num)
 82     //var $xx = $("#xx");
 83     //$xx.height(200);
 84 
 85     var wrap = document.getElementById("wrap");
 86     console.log(wrap.getElementsByTagName("p"));
 87 
 88     // 封装document.getElementById()
 89     function id(name){
 90         return document.getElementById(name);
 91     }
 92     console.log(id("wrap"));
 93 
 94     // 封装 getElementsByTagName()
 95     function tag(name, obj){
 96         return obj.getElementsByTagName(name);
 97     }
 98     console.log(tag("p", id("wrap")));
 99 
100     // DOMReady
101     var addEvent = document.body.addEventListener ? function(el, type, fn){
102         el.addEventListener(type, fn, false);
103     } : function(el, type, fn){
104         el.attchEvent("on" + type,function(){
105             fn.apply(this, arguments);
106         });
107     };
108     function domReady(f){
109         // 假如 DOM 已经加载，马上执行函数
110         if(domReady.done){
111             return f();
112         }
113 
114         if(domReady.timer){
115             domReady.ready.push(f);
116         }else{
117             addEvent(window, "load", isDOMReady);
118             domReady.timer = setInterval(isDOMReady, 13);
119         }
120     }
121 
122     function isDOMReady(){
123         if(domReady.done){
124             return false;
125         }
126         if(document && document.getElementsByTagName && document.getElementById && document.body){
127             clearInterval(domReady.timer);
128             domReady.timer = null;
129 
130             for(var i = 0;i < domReady.ready.length; i++){
131                 domReady.ready[i]();
132             }
133 
134             domReady.ready = null;
135             domReady.done = true;
136         }
137     }
138 
139     // hasClass
140     function hasClass(name, type){
141         var pattner = new RegExp("(^|\s)" + name + "($|\s)");
142         type = type || "*";
143         var els = document.getElementsByTagName(type), arr = [];
144         for(var i = 0, len = els.length; i < len; i++){
145             if(pattner.test(els[i].className)){
146                 arr.push(els[i]);
147             }
148         };
149         return arr;
150     }
151     var o = hasClass("xx", "p");
152     console.log(o);
153 
154     // text()
155     function text(el){
156         var t = "";
157         el = el.childNodes || el;
158         for(var i = 0, len = el.length; i < len; i++){
159             t += el[i].nodeType == 3 ? el[i].nodeValue : text(el[i].childNodes);
160         } 
161         return t;
162     }
163     console.log(text(wrap));
164 
165     // innerHTML
166     //alert(wrap.innerHTML); // IE 678 标签变成大写
167     //wrap.innerHTML = '<div>我是测试的</div>'