在浏覽器Window對象中 DOM與我們關注浏覽器BOM的整體結構有所不同，BOM是浏覽器的整體結構（屬性和行為）。而DOM隻是關注浏覽器所載入的文檔，也就是HTML标簽對象；DOM并不是BOM的替代品，它隻是把能夠統一的東西盡量标準化。JavaScript的核心就是通過操作BOM的對象來控制頁面和對象的屬性與其方法都有一些針對浏覽器的，BOM在不同的浏覽器中，擷取同樣的資料可能會通過不同的屬性名，并且相同的屬性名在不同的浏覽器中會有不同的解釋；BOM對象都擁有很多的屬性和方法，對我們來說，不可能做到記住每個對象的所有屬性，重要是知道一個對象能做什麼，至于怎麼做，完全可以查閱相關幫助來解決。從邏輯上說 BOM和DOM的關系，就是不管用什麼裝置生産月餅，生産出來的月餅必須符合國家月餅标準，這樣沒有引發食品衛生案件。從某種意義上來講就是有規範性的條例來進行作業。DOM的總名稱是（Docunment Object Model),以下圖DOM對象模型“HTML文檔”的流程示意圖(640*437像素）所示：
DOM把HTML文檔定義為帶有元素、屬性和文本的樹型結構，也就是說一個HTML文檔就是一個HTML檔案，像ECMAScript規範樣，DOM規範是規定了一些名字（屬性名和方法名）以及這些名字的含義，還有它們操作的對象；這樣對浏覽器的DOM來說，是被浏覽器實作，幷添加在浏覽器每個DOM對象上的屬性和方法。這些屬性和方法在每個浏覽器中都有相同的名稱和含義，用這些書城和方法來進行編碼會有很大程度地廉容各個浏覽器。在DOM的規範中，“文檔是一個很抽象的概念，文檔就是指HTML标簽對象。 測試DOM的支援度，W3C的網站提供每個測試浏覽器對DOM的測試支援情況：
編寫JavaScript代碼之前，我們首先了解文檔模型的構成順序是很必要的；下面序列代碼： (1)<script> //擷取id屬性為“n” 的元素引用 alert(document.getElementById(“n”)); </script> <div id="n”> </div> 以下可把代碼修改為： (2)<script> //運用id屬性為“b5”的元素引用 （以“b5”為自拟定義的一個元素，比如把元素“h1”用來引用“b5”,已上圖所示） alert(document.createElement(“b5”); </script> <div id="b5"> </div>
alert（）函數顯示的結果将得到null,因為在JJavaScript的代碼執行時，文檔樹中還沒形成id為"n"的元素。而這就跟文檔對象模型産生有關。 浏覽器會按照有序的依據HTML代碼，從上到下順序産生相應DOM模型，而JavaScript代碼卻可以在任何地方被執行，這就是危險所在。但你想要設定document.body的背景時，首先需要擷取body對象的引用，如果代碼是出現head裡，那麼程式是不會被執行的。大部分浏覽器都支援document對象的一個回調事件---文檔建構完成通知。這個事件會在浏覽器建構完成DOM後觸發。 把JavaScript代碼(1)或代碼(2)放在<head>裡如：
<head>
<script>
document.onreadystatechange = function() {
if(document.readyState == “complete”) {
alert(“DOM模型建構完畢！")
}
}
</script>
</head>
<body>
<div id="before”>
立即顯示
</div>
<script>
for(var i=0; i<10000; i ++) {
//可注釋此句以觀察不同的效果
document.getElementById(“before”).innerHTML="立即顯示";
}
&lt;/script>
<div id="after">
延遲顯示 (對圖檔過大時需時間加載）
</body>
注意：DOM模型建構完畢并不代表圖檔可完整地顯示在頁面上，對于較大的圖檔還需要慢慢加載。也就是img需要有它自己回調完成它自己事件。
本文轉自huangyouliang10 51CTO部落格，原文連結:http://blog.51cto.com/1572091hyl10/400610
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)