JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支

 document.ready = function (callback) { // 兼容FF,Google if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { document.removeEventListener('DOMContentLoaded', arguments.callee, false); callback(); }, false) } // 兼容IE else if (document.attachEvent) { document.attachEvent('onreadystatechange', function () { if (document.readyState == "complete") { document.detachEvent("onreadystatechange", arguments.callee); callback(); } }) } else if (document.lastChild == document.body) { callback(); } } window.onload = function () { alert('onload'); // 后执行 }; document.ready(function () { alert('ready'); // 先执行 }); 

 document.getElementById(“id”) document.getElementByTagName(“div”) document.getElementsByClassName(“classname”) ie 678 不支持 document.querySelector(); // 返回第一个匹配的dom元素 document.querySelectorAll(); // 返回所有dom元素匹配的集合 

 if(document.querySelector){ // do your business } 

 dom.parentNode 

 // nextSibling 和 previousSibling 是IE的写法 var next = (dom.nextElementSibling) || (dom.nextSibling); var pre = (dom.previousElementSibling) || (dom.previousSibling); 

 // firstChild, lastChild 是IE的写法 var first = father.firstElementChild || father.firstChild; var last = father.lastElementChild || father.lastChild; 

 // childNodes 是w3c推荐使用， 但谷歌等浏览器把换行也看成一个节点 // 用下面的方式实现，比较麻烦 var demo = document.getElementById("demo"); var nodes = demo.childNodes; for(var i=0;i

 var dom = document.createElement(“div”); 

 // appendChild 将dom追加到dom1的最后面 dom1.appendChild(dom) ; // insertBefore 将newDom 插入到 ReferencedDom 的前面, 返回值为新插入的值, dom1 为父节点 dom1.insertBefore(newDom, ReferencedDom) 

 removeChild() eg: domA.removeChild(domB); // 删除domA里面的孩子节点domB 

 // 深复制 demo.cloneNode(true); // 浅复制 demo.cloneNode(false); 

 dom.style.cssText = "width:30px;height:10px;" 

 var str = "abc"; switch(str) { case "a" // ... break; case "b" // ... break; case "c" // ... break; case "abc" // ... break; default: // ... }