BOM DOM 個人總結
BOM
BOM是什麽？
BOM == Browser Object Model == 瀏覽器對象模型。
js運行在瀏覽器中，每個頁面都是一個window對象，主要關註點有以下：
- Window對象
- Screen
- Location
- History
- Navigator
- 對話框
1.Window
【說明】 所有瀏覽器均支持，表示瀏覽器窗口。所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。
- 全局變量是window對象的屬性
- 全局函數是window對象的方法
為我們提供了操作瀏覽器的方法，比如關閉、開啟頁面，SPA中改變、禁用“後退”按鈕。
2.Screen
【說明】 每個 Window 對象的 screen 屬性都引用一個 Screen 對象。Screen 對象中存放著有關顯示瀏覽器屏幕的信息，對於移動開發來說，通過Screen對象可獲知設備的分辨率、DPI、可用尺寸等信息。
| 常用屬性 | 描述 |
|---|---|
| height | 返回顯示器屏幕的高度 |
| width | 返回顯示器屏幕的寬度 |
| pixelDepth | 返回顯示屏幕的顏色分辨率 |
| availHeight | 可用高度（除開系統任務欄） |
| availWidth | 可用寬度 |
3.Location
【說明】 Location 對象包含有關當前 URL 的信息。
| 常用屬性 | 描述 |
|---|---|
| 例子 | http://example.com:1234/test/test.htm#part2 |
| hash | 設置或返回 #part2 |
| host | 設置或返回 example.com:1234 |
| href | 設置或返回 http://example.com:1234/test/test.htm#part2 |
| protocol | 當前 URL 的協議 http: |
| pathName | 當前訪問路徑 /test/test.htm |
| 方法 | 描述 |
|---|---|
| assign() | 加載新的文檔 |
| reload() | 重新加載當前文檔 |
| replace() | 用新的文檔替換當前文檔 |
4.History
【說明】 History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
| 常用屬性 | 描述 |
|---|---|
| length | 返回瀏覽器歷史列表中的 URL 數量 |
| back() | 加載瀏覽器歷史列表中的前一個 URL |
| forward() | 加載瀏覽器歷史列表中的下一個 URL |
| go() | 加載瀏覽器歷史列表中指定URL |
5.Navigator
【說明】 Navigator 對象包含有關瀏覽器的信息。通過該對象可了解瀏覽器詳細信息（版本、廠商、OS、插件等），不是可信的，因為1.所有東西都可以被修改，2.瀏覽器會識別錯誤。
| 常用屬性 | 描述 |
|---|---|
| appName | 返回瀏覽器的名稱 |
| appVersion | 返回瀏覽器的平臺和版本信息 |
| platform | 返回運行瀏覽器的操作系統平臺 |
6.對話框
- alert() //單純提示
- confirm() //詢問確認可返回布爾值
- prompt() //用戶可輸入內容並返回
DOM
DOM是什麽？
DOM == Document Object Model == 文檔對象模型
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問，從而實現動態操作DOM。主要關註點有以下：
- DOM節點
- DOM方法
- DOM屬性
- DOM查詢
- DOM修改
- DOM事件
- DOM導航
1.DOM節點
【說明】 在 HTML DOM 中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
- 整個文檔是一個文檔節點
- 每個 HTML 元素是元素節點
- HTML 元素內的文本是文本節點
- 每個 HTML 屬性是屬性節點
- 註釋是註釋節點
2.DOM方法
【說明】 HTML DOM 方法是我們可以在節點（HTML 元素）上執行的動作。
常用方法
- getElementById(id) - 獲取帶有指定 id 的節點（元素）
- appendChild(node) - 插入新的子節點（元素）
- removeChild(node) - 刪除子節點（元素）
3.DOM屬性
【說明】 HTML DOM 屬性是我們可以在節點（HTML 元素）設置和修改的值。
常用屬性
-
innerHTML - 節點（元素）的文本值
-
nodeName - 節點（元素）的名稱
-
nodeValue - 節點（元素）的值
-
nodeType - 節點（元素）的類型
元素類型 NodeType 元素 1 屬性 2 文本 3 註釋 8 文檔 9
4.DOM查詢
【說明】 訪問 HTML DOM = 查找 HTML 元素。
- 通過使用 getElementById() 方法
- 通過使用 getElementsByTagName() 方法
- 通過使用 getElementsByClassName() 方法
5.DOM修改
【說明】 修改 HTML = 改變元素、屬性、樣式和事件。
- 改變 HTML 內容
- 改變 CSS 樣式
- 改變 HTML 屬性
- 創建新的 HTML 元素
- 刪除已有的 HTML 元素
- 改變事件（處理程序）
6.DOM事件
【說明】 JavaScript 能夠對 HTML 事件（或者說用戶）做出反應。
- 改變 HTML 內容
- 改變 CSS 樣式
- 改變 HTML 屬性
- 創建新的 HTML 元素
- 刪除已有的 HTML 元素
- 改變事件（處理程序）http://www.yiidian.com/dom/what-is-dom.html
BOM DOM 個人總結