本文實例講述了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'); // 先執行});數組的常用操作方法
js 的構成
dom 節點
獲取節點的方式
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 和 children
// childNodes 是w3c推薦使用， 但谷歌等瀏覽器把換行也看成一個節點// 用下面的方式實現，比較麻煩var demo = document.getElementById("demo");var nodes = demo.childNodes;for(var i=0;i<nodes.length;i++) { if(nodes[i].nodeType == 1) { nodes[i].style.display = "none"; }}// children 在ie678里面包含注釋節點， 注意在編碼時避開使用注釋var demo = document.getElementById("demo");var child = demo.children;child[0].style.backgroundColor = "red"; // 第一個孩子child[child.length-1].style.backgroundColor = "red"; // 最后一個孩子dom 節點操作
創建節點：
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
克隆節點： cloneNode 復制節點，接受一個布爾值，true表示深復制(復制節點及其內部所有節點)， false 表示淺復制
// 深復制demo.cloneNode(true);// 淺復制demo.cloneNode(false);
屬性設定
非兼容ie6,7的寫法
- 獲?。篸om.getAttribute(“屬性”);
- 設置：dom.setAttribute(“屬性”,”值”);
- 刪除：dom.removeAttribute(“屬性”);
兼容寫法舉例：
- 獲?。簐ar cn = dom.className
- 設置：dom.className = “dcl”
- 刪除：dom.className = null;
特殊樣式屬性
cssText 用于更改多個樣式屬性設置
dom.style.cssText = "width:30px;height:10px;"
常用的循環
switch 多分支語句
var str = "abc";switch(str) { case "a" // ... break; case "b" // ... break; case "c" // ... break; case "abc" // ... break; default: // ...}
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
