什麼是BOM？
瀏覽器物件模型（Browser Object Model,BOM）是瀏覽器提供的附加對象，用於處理 document 以外的所有内容，主要處理瀏覽器窗口和框架，不过通常瀏覽器特定的 JavaScript 也會被看作 BOM 的一部分。
區別：BOM 描述了與瀏覽器進行交互的方法和接口，DOM 描述了處理網頁内容的方法和接口。
- window 物件包含属性：document、navigator、frames、history、location、screen
- document 根節點包含子節點：forms、location、anchors、images、links
什麼是DOM(Document Object Model)？
檔案物件模型（Document Object Model, DOM）是瀏覽器的執行規範，提供了結構化的標準方法，將網頁的程式碼及其他程式語言結合起來。開發人員即可以通過文件中物件的屬性、方法和事件來掌控、操縱和建立動態的網頁元素。
每個 DOM 的基礎建置在一個(D)文件上（也就是以 document 作為根基），而由 document 中的每個(O)物件作為出一個個節點，最後由這一個個節點，組成為一個 DOM Tree。
- D：（文件）瀏覽器當前載入的 document
- O：（物件）將 document 中的所有元素視為物件，可以調用其屬性、方法
- M：（模型）所有的物件在該結構中都是節點，這些眾多節點組成一個樹狀結構
DOM 節點有:
- 元素節點：上圖中html、body、p標籤皆是元素節點。
- 文本節點:向用户展示的内容，如li…/li中的 JavaScript、DOM、CSS 等文本。
- 屬性節點:標籤中的屬性，如a標籤中的連結屬性href=”http://www.yahoo.com"。
DOM 操作
用 DOM API 可以輕鬆地删除、添加和替換節點。
| DOM 操作 |说明 |
| ————- |:————-:|
|creatElement(element) |創建一个新的元素節點|
|creatTextNode() |創建一个包含給定文本的新文本節點|
|appendChild() |指定節點的最後一個節點列表後添加一个新的子節點|
|insertBefore() |將一個給定節點节点插入到一个給定元素節點的給定子節點的前面|
|removeChild() |从一个给定元素中删除子节点|
|replaceChild() |把一个给定父元素里的一个子节点替换为另外一个节点|