本文實例講述了JS前端知識點總結之頁面加載事件，數組操作，DOM節點操作，循環和分支。分享給大家供大家參考，具體如下：
頁面加載事件的比較
window.onload jquery 中的 document.readydocument.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'); // 先執行}); 內部實現細節如上數組的常用操作方法
push 從后面追加一個或多個，返回新數組的長度 unshift 從前面追加一個或多個，返回新數組的長度 pop 刪除最后一個元素，返回被刪除的元素 shift 刪除第一個元素，返回第一個被刪除的元素 concat 連接數組，返回新的數組 join 將數組轉字符串，參數是分隔符，默認是分隔符是逗號”,” split 將字符串轉換為數組，默認分割符是逗號 stringObject.split(separator,howmany), howmany 參數可指定返回的數組的最大長度js 的構成
ECMAScript 描述了js語法和基本對象 DOM (文檔對象模型) 提供了文檔結構化表示，并定義了如何通過腳本來訪問文檔結構 BOM (瀏覽器對象模型) 提供與瀏覽器交互的方法和接口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
新聞熱點
疑難解答
圖片精選
