一、什么是BOM、什么是DOM
BOM即瀏覽器對象模型，主要用了訪問一些和網頁無關的瀏覽器功能。如：window、location、navigator、screen、history等對象。
DOM即文檔對象模型，針對HTML（或XML）文檔的API（應用程序編程接口）。描繪的一個層次化的節點樹，開發人員可以添加、修改和刪除頁面的某一部分。
二、細說BOM對象
1、window對象
window對象表示瀏覽器的一個實例，同時也是ECMAScript 規定的 Global 對象。（Global ：所有在全局作用域中定義的屬性和函數，都是 Global 對象的屬性。在瀏覽器中Global對象實際上就是window對象實現的 ）
全局作用域(所有全局對象都可以通過window來訪問)
var str = "張三"; function fun() { alert(str); } //全局對象都可以通過window的屬性方式來訪問 alert(window.str); window.fun();
彈出窗口
window.open("http://www.baidu.com", "NewWin", "height=400,width=400");
第三個參數還可能有的值如：
超時調用和間歇調用（setTimeout、setInterval）
我們都知道javascript是單線程的，但我們可以通過間歇調用和超時調用在特定時間執行指定的代碼。
- 超時調用（setTimeout）
如： setTimeout(function() { alert("Hello world!"); }, 1000);//會在1000毫秒后執行
- 如果在超時時間之前想要取消執行，我們可以
//設置超時調用 var timeoutId = setTimeout(function() { alert("Hello world!"); }, 1000); //注意：把它取消 clearTimeout(timeoutId);
- 同樣我們也可以通過超時調用模擬實現間歇調用
function fun() { //....這里可以實現某些邏輯 setTimeout(fun(), 100); } fun();
當然通過模擬的間歇調用和實際的setInterval還是有區別的，下面我們會分析。
- 間歇調用（setInterval）
setInterval (function() { alert("Hello world!"); }, 1000);//每隔1秒 執行一遍
- 如果想要取消執行，我們可以
var i = 1; var timeId = setInterval(function () { i++;
//...這里可以執行某些邏輯 if (i >= 100) { clearInterval(timeId);//注意和取消超時調用不一樣（clearTimeout） } }, 1000);//每隔1秒 執行一遍
我們仔細看看上面的代碼，如果說執行邏輯的部分的運行時間超過了間隔時間（1000毫秒）會是什么情況。這里我們需要謹記javascript是單線程的。不能說到了1000又開啟一個進程來執行循環，上一個進程接着執行正在運行的邏輯。而是到了1000毫秒后直接斷開了正在執行的邏輯部分，開始執行下一次的調用。當然這肯定不是我們想要看到的情況。所以，我們可以使用上面的setTimeout模擬的間歇調用，這樣就是調用是中間邏輯執行時間不算，等到執行完成后，再等待間隔時間接着執行下一次調用。（所以，在實際開發中，我們也是建議使用setTimeout來模擬間歇調用的）
2、location對象
location對象說來也是奇怪，它既是window的屬性也是document屬性，且同時指向了同一個對象。
window和document的關系：瀏覽器中的html成為了document對象，使我們可以通過javascript來訪問、操作html的元素。且，documnet對象是window對象的一部分，可以通過window.document屬性來訪問。
我們來看看location都有哪些屬性：
有了上面這些屬性，我們可以非常方便的修改url，如：
//假設初始 URL 為 http://www.wrox.com/WileyCDA/ //將 URL 修改為 "http://www.wrox.com/WileyCDA/#section1" location.hash = "#section1"; //將 URL 修改為 "http://www.wrox.com/WileyCDA/?q=javascript" location.search = "?q=javascript"; //將 URL 修改為 "http://www.yahoo.com/WileyCDA/" location.hostname = "www.yahoo.com"; //將 URL 修改為 "http://www.yahoo.com/mydir/" location.pathname = "mydir"; //將 URL 修改為 "http://www.yahoo.com:8080/WileyCDA/" location.port = 8080;
每次修改 location 的屬性（ hash 除外），頁面都會以新 URL 重新加載。也就是說，瀏覽器會生成一天后退的歷史記錄。如果我們不想能夠回退可以使用replace（）方法，如：
location.replace("http://www.baidu.com"); 如此就不會有回退記錄了。
除了replace方法外還有個比較重要的方法。reload，用來刷新。
location.reload(); //重新加載（有可能從緩存中加載） location.reload(true); //重新加載（從服務器重新加載）也就是強制刷新
3、navigator對象、screen對象
navigator對象主要用來識別客戶端瀏覽器，但是由於各類瀏覽器對navigator對象的實現各有不同，這里就不細分析了。
screen 對象基本上只用來表明客戶端的能力，其中包括瀏覽器窗口外部的顯示器的信息，如像素寬度和高度等。每種瀏覽器對其的支持程度也是不同的，這里也不分析了。
5、history對象
history對象主要保存當前也網頁的歷史記錄。但出於安全考慮，程序員不能夠知道詳細的url。我們可以得到或操作如下：
history.length//歷史記錄的數量
//后退一頁 history.back(); //前進一頁 history.forward();
//后退一頁 history.go(-1); //前進一頁 history.go(1); //前進兩頁 history.go(2);
//跳轉到最近的 wrox.com 頁面 history.go("wrox.com"); //那么可能是前進也可能是后退，如果歷史記錄中不存在worx.com那么這個方法什么也不會做
這是學習記錄，不是教程。文中錯誤難免，您可以指出錯誤，但請不要言辭刻薄。
原文鏈接：http://www.cnblogs.com/zhaopei/p/5080108.html
本文已同步至目錄索引：一步步學習javascript