文章目錄

  • 一、BOM 瀏覽器對象模型 簡介
  • 1、BOM 簡介
  • 2、常用的 BOM 對象
  • 3、BOM 特點
  • 4、BOM 瀏覽器對象模型 與 DOM 文檔對象模型 對比
  • 二、window 對象簡介
  • 1、window 對象作用
  • 2、全局屬性
  • 3、全局方法
  • 4、完整代碼示例



一、BOM 瀏覽器對象模型 簡介



1、BOM 簡介



瀏覽器對象模型 ( BOM , Browser Object Model ) 提供了 JavaScript 與 瀏覽器窗口 進行交互的 對象集合 , BOM 沒有統一標準 , 但是 主流瀏覽器 Chrom、Firefox、Edge 廣泛兼容 BOM 核心 API ;

BOM 核心作用 是 JavaScript 與 瀏覽器窗口 進行交互 , DOM 的核心作用 是 JavaScript 操作 頁面內容 ;



2、常用的 BOM 對象



BOM 瀏覽器對象模型 比 DOM 文檔對象模型 更大 , BOM 包含 DOM ;



常用的 BOM 對象 : BOM 由 一系列 相關的對象 構成 , 並且 每個對象 都提供了很多 方法 與 屬性 ;

  • window 對象 : 全局作用域
  • location 對象 : 管理 URL , 獲取 或 跳轉頁面 ;
  • navigator 對象 : 獲取 瀏覽器 和 設備信息 ;
  • screen 對象 : 獲取 用户屏幕 相關信息 ;
  • history 對象 : 操作 瀏覽歷史記錄 ;

javascript - bom筆記_#瀏覽器對象模型



3、BOM 特點



BOM 特點 :

  • 無統一標準 : 早期 無 W3C 規範 , 由 瀏覽器廠商 各自實現 , 之後隨着發展 逐步趨同 , 各個瀏覽器廠商 主動兼容 BOM 核心 API ;
  • 以 window 為頂層對象 : 所有 BOM 對象、全局變量、全局函數 都是 window 的屬性 , 可省略 window. 前綴 ;
  • 與瀏覽器環境強關聯 : 功能 圍繞 瀏覽器窗口 ( 如導航、尺寸、存儲、歷史記錄等 )


4、BOM 瀏覽器對象模型 與 DOM 文檔對象模型 對比



對比維度

BOM ( 瀏覽器對象模型 )

DOM ( 文檔對象模型 )

核心定義

用於 操作 瀏覽器窗口 及 運行環境

用於 操作 HTML/XML 文檔內容 與 結構 的 對象集合

操作對象

瀏覽器窗口、導航、歷史記錄、本地存儲、屏幕信息 等 ( 與瀏覽器環境強關聯 )

文檔元素 ( div/p/img 等 ) 、屬性、文本、節點結構 等 ( 與頁面內容強關聯 )

標準歸屬

無統一官方標準

W3C 標準化規範

頂層對象

window ( 所有 BOM 對象均為 window 的屬性 )

document ( window 的子對象 , 即 window.document )

核心作用

實現 JavaScript 與 瀏覽器 的交互

實現 JavaScript 與 頁面 內容的 交互

適用環境

僅 瀏覽器環境

瀏覽器環境 + 部分非瀏覽器環境

常用核心 API

window.open()、location.href、history.back()、localStorage、navigator.userAgent

document.getElementById()、document.querySelector()、element.innerHTML、node.appendChild()

數據持久化

支持 ( localStorage 永久存儲、sessionStorage 會話存儲 )

不直接支持 ( 需通過 DOM 操作修改文檔內容 , 或結合 BOM 存儲實現持久化 )

跨域限制

受同源策略限制 ( 如 localStorage、cookie 跨域名不可訪問 )

受同源策略限制 ( 如跨域文檔無法通過 DOM 訪問內容 )

兼容性

核心 API 主流瀏覽器兼容 , 但部分擴展 API 存在差異 ( 如早期 IE 對部分 BOM 方法支持有限 )

標準化程度高 , 主流瀏覽器兼容性一致 ( 僅極舊瀏覽器如 IE8 存在少量差異 )

典型使用場景

頁面跳轉 / 刷新、瀏覽器信息判斷、本地數據存儲、窗口尺寸控制、歷史記錄操作

元素查找 / 修改、表單數據處理、頁面結構動態渲染、事件綁定 ( 點擊 / 輸入等 )





二、window 對象簡介



1、window 對象作用



BOM 中的 window 對象

  • 交互接口 : JavaScript 通過 BOM 可以與 瀏覽器窗口 進行交互
  • 全局對象 : window 是一個全局對象


全局作用域的 方法 和 屬性 在調用時可以省略 window. 前綴 ;



window 對象中有很多 方法 和 屬性

// 訪問 window 對象 , 將其所有的 屬性方法 結構 打印到控制枱
        console.dir(window);



2、全局屬性



BOM 中的 window 對象 , 包含 DOM 的頂層對象 document , document 是 window 對象的一個屬性值 ;

查找對象時使用 document.querySelector() , 前面的 window. 前綴 可以省略 , 完整的寫法是 window.document.querySelector() ;

// BOM 中的 window 對象 , 包含 DOM 的頂層對象 document ;
        // window 是最頂層的對象 , 通常可以省略 ;
        // 訪問 document 可以 省略 window. 前綴 ;
        console.log(document);
        // 訪問 document 對象的完整寫法
        console.log(window.document);

在 JavaScript 中 , 全局對象 自動變成 window 對象的屬性 , 如 定義 var num = 10 全局變量 , 可以使用 num 訪問該變量 , 也可以使用 window.num 訪問該變量 ;

// 在 JavaScript 中 , 全局對象 自動變成 window 對象的屬性
        var num = 10;
        // 省略 window. 前綴的寫法
        console.log(num);
        // 完整訪問 window 全局屬性 的 寫法
        console.log(window.num);



3、全局方法



在 JavaScript 中 , 全局函數 自動變成 window 對象的方法 , 訪問時可以省略 window. 前綴 ;

定義一個函數 fn , 會自動將其變成 window 對象的方法 , 可以省略 window. 前綴 直接使用 fn() 調用該函數 , 也可以使用 window.fn() 完整寫法訪問 該函數 ;

function fn() {
            console.log(888);
        }

alert() 函數是 window 對象的方法 , 訪問時可以省略 window. 前綴 alert(1) , 也可以使用 完整寫法 window.alert(1) ;



部分代碼示例 :

// 在 JavaScript 中 , 全局函數 自動變成 window 對象的方法 , 訪問時可以省略 window. 前綴
        function fn() {
            console.log(888);
        }

        // 省略 window. 前綴的寫法
        fn();
        // 完整訪問 window 全局方法 的 寫法
        window.fn();

        // alert() 函數是 window 對象的方法 , 訪問時可以省略 window. 前綴
        alert(`alert 省略 window. 前綴寫法`);
        // 完整訪問 window 對象的 alert() 方法 的 寫法
        window.alert(`alert 帶 window. 前綴寫法`)



4、完整代碼示例



代碼示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOM 頂級對象 window</title>
</head>

<body>
    <script>
        // BOM 中的 window 對象 , 包含 DOM 的頂層對象 document ;
        // window 是最頂層的對象 , 通常可以省略 ;
        // 訪問 document 可以 省略 window. 前綴 ;
        console.log(document);
        // 訪問 document 對象的完整寫法
        console.log(window.document);

        // 在 JavaScript 中 , 全局對象 自動變成 window 對象的屬性
        var num = 666;
        // 省略 window. 前綴的寫法
        console.log(num);
        // 完整訪問 window 全局屬性 的 寫法
        console.log(window.num);

        // 在 JavaScript 中 , 全局函數 自動變成 window 對象的方法 , 訪問時可以省略 window. 前綴
        function fn() {
            console.log(888);
        }

        // 省略 window. 前綴的寫法
        fn();
        // 完整訪問 window 全局方法 的 寫法
        window.fn();

        // alert() 函數是 window 對象的方法 , 訪問時可以省略 window. 前綴
        alert(`alert 省略 window. 前綴寫法`);
        // 完整訪問 window 對象的 alert() 方法 的 寫法
        window.alert(`alert 帶 window. 前綴寫法`)

        // 訪問 window 對象 , 將其所有的 屬性方法 結構 打印到控制枱
        console.dir(window);
    </script>
</body>

</html>

執行結果 :

javascript - bom筆記_#BOM_02

javascript - bom筆記_#瀏覽器對象模型_03