JavaScript-BOM與DOM

Posted on June 12, 2019 本文总阅读量次

檔案物件模型（Document Object Model, DOM）是瀏覽器的執行規範，提供了結構化的標準方法，將網頁的程式碼及其他程式語言結合起來。開發人員即可以通過文件中物件的屬性、方法和事件來掌控、操縱和建立動態的網頁元素。

DOM(Document Object Model)

每個 DOM 的基礎建置在一個(D)文件上（也就是以 document 作為根基），而由 document 中的每個(O)物件作為出一個個節點，最後由這一個個節點，組成為一個 DOM Tree。

D：（文件）瀏覽器當前載入的 document
O：（物件）將 document 中的所有元素視為物件，可以調用其屬性、方法
M：（模型）所有的物件在該結構中都是節點，這些眾多節點組成一個樹狀結構

將 HTML 分解為 DOM:

DOM 節點有:

元素節點：上圖中<html>、<body>、<p>標籤皆是元素節點。
文本節點:向用户展示的内容，如<li>...</li>中的 JavaScript、DOM、CSS 等文本。
屬性節點:標籤中的屬性，如<a>標籤中的連結屬性href="http://www.baidu.com"。

查找節點的方法

方法	說明
getElementById()	獲取特定 ID 元素的節點
getElementsByTagName()	獲取相同元素的節點列表
getElementsByName	獲取相同名稱的節點列表
getAttribute()	獲得特定元素節點屬性的值
setAttribute()	設置特定元素節點屬性的值
removeAttribute()	移除特定元素節點的属性

節點的屬性

屬性	說明
nodeName	返回一个字串，其内容是節點的名字
nodeType	返回一个整數，這個數值代表给定節點的類型
nodeValue	返回給定節點的當前值
tagName	獲取元素節點的標籤名
innerHTML	獲取元素節點的内容

DOM 操作

用 DOM API 可以輕鬆地删除、添加和替換節點。
| DOM 操作 |说明 |
| ————- |:————-:|
|creatElement(element) |創建一个新的元素節點|
|creatTextNode() |創建一个包含給定文本的新文本節點|
|appendChild() |指定節點的最後一個節點列表後添加一个新的子節點|
|insertBefore() |將一個給定節點节点插入到一个給定元素節點的給定子節點的前面|
|removeChild() |从一个给定元素中删除子节点|
|replaceChild() |把一个给定父元素里的一个子节点替换为另外一个节点|

BOM

瀏覽器物件模型（Browser Object Model,BOM）是瀏覽器提供的附加對象，用於處理 document 以外的所有内容，主要處理瀏覽器窗口和框架，不过通常瀏覽器特定的 JavaScript 也會被看作 BOM 的一部分。

區別：BOM 描述了與瀏覽器進行交互的方法和接口，DOM 描述了處理網頁内容的方法和接口。

window 物件包含属性：document、navigator、frames、history、location、screen
document 根節點包含子節點：forms、location、anchors、images、links

參考資料

JavaScript 学习总结（三）BOM 和 DOM 详解
 知乎-BOM 和 DOM