目錄

簡介

BOM的三大對象

頂級對象 window對象

三大對象

location

history

navigator

BOM的三大系列屬性

client系列

offset系列

scroll系列

BOM相關事件

瀏覽器緩存

---

?

簡介

• BOM 全稱：Browser Object Model 瀏覽器對象模型

• BOM主要用來幫助我們 操作 瀏覽器的相關內容

  • 操作內容包括

    • 地址欄內容

    • 前進后退（歷史記錄）

    • 刷新

    • 打開頁面、關閉頁面、跳轉頁面

BOM的三大對象

• 頂級對象 window對象

  • 整個BOM 和 DOM體系 都是由 window對象 衍生出來的 具體關系 如下圖所示

  • window的方法

    • open

      • 用法1：window.open(指定的url地址)/open(指定的url地址)

        • 作用：可以打開一個指定url地址的頁面

      • 用法2：window.open(指定的url地址，是否新頁面打開，新頁面的寬高，是否替換當前歷史記錄)

        • 作用：同上

        • 說明：

          • 是否新頁面打開 有兩個可選值 分別是 _self 和 _blank(默認的)

          • 新頁面的寬高：這個值 寫作："width=xxxpx,height=xxxpx" 這個效果 需要在新頁面打開才生效

          • 是否替換當前歷史記錄 是一個布爾值 true 表示替換 false(默認值)不替換 一般我們建議大家不替換

    • close

      • 用法：window.close()/close()

      • 作用：關閉當前頁面

    • 注意：window的方法 和 屬性 在script標簽內部 可以省略window 但是如果不在script標簽內部 則不能省略

• 三大對象

  • location

    • location對象是window對象的一個屬性 這個屬性主要用來 處理 頁面跳轉、刷新和操作地址欄信息

    • 用法

      • 刷新用法：location.reload()

        • 作用：刷新頁面

      • 跳轉用法：location = "url地址"

        • 作用：在當前頁面 跳轉到 指定的url地址

        • 說明：location的跳轉 不能設置參數 所以 我們的跳轉效果 比較單一

    • 屬性

      • location.href：整個地址欄中的 全部url地址

      • location.protocol：獲取地址欄中url地址的 協議部分 一般我們的網頁使用的協議都是http或https(應用最廣泛) http(hyper text transfer protocol) flie（本地文件協議）

      • location.hostname：獲取地址欄中的url地址的 服務器名

      • location.port：獲取地址欄中 url地址的 端口號

      • location.pathname：獲取地址欄中 文件的路徑

      • location.hash：獲取地址欄中的錨鏈接(哈希)

      • location.search：獲取地址欄中 表單提交數據

  • history

    • history對象 主要用來操作 瀏覽器歷史記錄

    • history對象的方法

      • back

        • 用法：history.back()

        • 作用：回到上一條歷史記錄的頁面

      • forward

        • 用法：history.forward()

        • 作用：前進到下一條歷史記錄的頁面

      • go

        • 用法：history.go(n)

        • 作用：如果n>0 表示 前進到下n條歷史記錄的頁面 如果n<0 表示回到上n條歷史記錄的頁面

  • navigator

    • navigator對象 主要用來查詢 瀏覽器的相關信息

    • 重要屬性

      • appCodeName：瀏覽器編號

      • appName：瀏覽器名稱

      • appVersion：瀏覽器版本

      • cookieEnabled：是否啟用cookie 布爾值 true表示啟用 false表示禁用

      • platform：硬件平臺 即 當前瀏覽器 支持的最低硬件平臺

      • plugins：當前瀏覽器 安裝的插件

      • userAgent：用戶代理 可以幫助我們檢測當前瀏覽器的運行平臺

BOM的三大系列屬性

• client系列

元素可視寬高元素.clientWidth:元素可視寬 content+padding元素.clientHeight:元素可視高 content+padding元素的左上邊框寬度元素.clientLeft:元素左邊框寬度元素.clientTop:元素上邊框寬度屏幕的可視寬高document.documentElement.clientWidth;var oDiv = document.getElementsByTagName("div")[0];console.log(oDiv.clientWidth);//元素可視寬console.log(oDiv.clientHeight);//元素可視高// 屏幕的可視寬高：console.log(document.documentElement.clientWidth); //1366console.log(document.documentElement.clientHeight);//657

• offset系列

元素占位寬高元素.offsetWidth: 元素占位寬 content+padding+border元素.offsetHeight: 元素占位高 content+padding+border元素位置元素.offsetTop：元素到帶定位父元素頂部距離，如果沒有帶定位父元素 則表示到body頂部距離元素.offsetLeft：元素到帶定位父元素左側距離，如果沒有帶定位父元素，則表示到body左側距離var oDiv = document.getElementsByTagName("div")[0];var oP = document.getElementsByTagName("p")[0];//元素的占位寬 content+padding+borderconsole.log(oDiv.offsetWidth); //240console.log(oDiv.offsetHeight); //240//標簽.offsetTop: 獲取元素的頂部到定位父元素的位置，如果沒有定位父元素獲取到body的位置console.log(oP.offsetTop); //0

sessionStorage：會話緩存

• scroll系列

  元素.scrollWidth/Height : 獲取元素的實際內容寬 元素.scrollTop: 元素被卷去的高 元素.scrollLeft: 元素被卷去的寬獲取頁面的滾動距離document.documentElement.scrollTop || document.body.scrollTop

  BOM相關事件

  onscroll：滾動條滾動事件 當滾動條發生滾動的時候 就執行這個事件

  onresize：瀏覽器窗口大小改變事件 當瀏覽器窗口大小發生變化的時候 就執行這個事件

  實際案例——懶加載

• 懶加載：懶加載 就是 頁面只加載用戶看到到內容 不加載用戶沒看到的內容 從而 減少一次性加載的數據量 提升加載速度 優化用戶體驗

• 瀏覽器緩存

• 前端瀏覽器緩存

  在我們前端（用戶計算機）中 是不會存儲各個應用的數據的 但是 會存儲一些和服務器之間 數據交互的核心數據。

  這些核心數據 就是通過瀏覽器緩存 來進行存儲的

  在html5中 js更新了兩種 新的操作緩存的api——localStorage 和 sessionStorage

  localStorage：本地緩存

• 特點：緩存的容量較大 20M左右 存儲的數據 會永久保存（除非手動刪除）可以在多頁面內 共享緩存數據

• 操作方法

  • 設置緩存數據：localStorage.setItem("數據屬性名",要存儲的數據)

    • 注意：在緩存中 我們只能存儲 字符串

  • 獲取緩存數據：localStorage.getItem("數據屬性名")

  • 刪除緩存數據：localStorage.removeItem("數據屬性名")

  • 清空緩存數據：localStorage.clear()

• 特點：緩存的容量較大 20M左右，存儲的數據 不會永久保存 當我們關閉當前的瀏覽器會話窗口 就會自動清空sessionStorage 不能在多頁面內 共享緩存數據 只能在當前頁面使用

• 操作方法 同上

總結

以上是生活随笔為你收集整理的BOM(操作浏览器相关内容)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。