技術標籤：HTMLhtml5html

DOM和BOM的區別

在瀏覽器中執行的JavaScript可以認為由三部分組成：ECMAScript描述了該語言的語法和基本物件，DOM文件物件模型描述了處理網頁內容的方法和介面，BOM瀏覽器物件模型描述了與瀏覽器進行互動的方法和介面。

DOM

• DOM是Document Object Model的縮寫，即文件物件模型。
• DOM是W3C的標準。
• DOM最根本物件是document，即window.document。

DOM全稱是Document Object Model即文件物件模型，是針對XML的基於樹的API，描述了處理網頁內容的方法和介面，是HTML

和XML的API，DOM把整個頁面規劃成由節點層級構成的文件。DOM和文件有關，這裡的文件指的是網頁，也就是HTML文件。網頁是由伺服器傳送給客戶端瀏覽器的，無論用什麼瀏覽器，接收到的HTML都是一樣的，所以DOM和瀏覽器無關，其關注的是網頁本身的內容，由於是相對獨立於瀏覽器的，所以可以制定標準。
DOM定義了Node等物件做為這種實現的基礎，就是說為了能以程式設計的方法操作這個HTML的內容，例如新增元素、修改元素、刪除元素等，我們把這個HTML結構看做一個物件樹DOM樹，其本身和裡面的所有東西例如<div></div>這些標籤都看做一個物件，每個物件都叫做一個節點Node，節點可以理解為DOM中所有Object的父類。

BOM

• BOM是Browser Object Model的縮寫，即瀏覽器物件模型。
• BOM沒有相關標準。
• BOM的最根本物件是window。

BOM是Browser Object Model即瀏覽器物件模型，DOM是為了操作文件出現的介面，而BOM就是為了控制瀏覽器的行為而出現的介面，例如跳轉頁面、前進、後退、書籤等等，程式還可能需要獲取螢幕的大小之類的引數，所以BOM就是為了解決這些事情出現的介面，例如我們要讓瀏覽器跳轉到另一個頁面就需要Location物件。
由於沒有標準，不同的瀏覽器實現同一功能，可以需要不同的實現方式，所以對於上面說的功能，不同的瀏覽器的實現功能所需要的JavaScript

程式碼可能不相同。雖然BOM沒有一套標準，但是各個瀏覽器的常用功能的JavaScript程式碼還是大同小異的，對於常用的功能實際上已經有預設的標準了，所以不用過於擔心瀏覽器相容問題，不是每個瀏覽器都有自己的BOM，也不需要為每個瀏覽器都學習一套BOM，只是個別瀏覽器會有新增的功能會在BOM上體現出來。

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://www.zhihu.com/question/20724662
https://juejin.cn/post/6844903939008102413
https://blog.csdn.net/xiao__gui/article/details/8315148