JavaScript學習筆記（十二）BOM

阿新 • • 發佈：2020-12-12

BOM

今天開始我們開始使用 js 去操作瀏覽器和頁面中的 html 元素了

BOM

BOM（Browser Object Model）：瀏覽器物件模型
其實就是操作瀏覽器的一些能力
我們可以操作哪些內容
- 獲取一些瀏覽器的相關資訊（視窗的大小）
- 操作瀏覽器進行頁面跳轉
- 獲取當前瀏覽器位址列的資訊
- 操作瀏覽器的滾動條
- 瀏覽器的資訊（瀏覽器的版本）
- 讓瀏覽器出現一個彈出框（alert/confirm/prompt）
BOM 的核心就是 window 物件
window 是瀏覽器內建的一個物件，裡面包含著操作瀏覽器的方法

獲取瀏覽器視窗的尺寸

innerHeight

和innerWidth
這兩個方法分別是用來獲取瀏覽器視窗的寬度和高度（包含滾動條的）

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)

瀏覽器的彈出層

alert是在瀏覽器彈出一個提示框

window.alert('我是一個提示框')

- 這個彈出層知識一個提示內容，只有一個確定按鈕
- 點選確定按鈕以後，這個提示框就消失了

confirm是在瀏覽器彈出一個詢問框

var boo = window.confirm('我是一個詢問框')
console.log(boo)

- 這個彈出層有一個詢問資訊和兩個按鈕
- 當你點選確定的時候，就會得到 true
- 當你點選取消的時候，就會得到 false

prompt是在瀏覽器彈出一個輸入框

var str = window.prompt('請輸入內容')
console.log(str)

- 這個彈出層有一個輸入框和兩個按鈕
- 當你點選取消的時候，得到的是 null
- 當你點選確定的時候得到的就是你輸入的內容

瀏覽器的地址資訊

在 window 中有一個物件叫做location
就是專門用來儲存瀏覽器的位址列內的資訊的

location.href

location.href這個屬性儲存的是瀏覽器位址列內 url 地址的資訊

console.log(window.location.href)

- 會把中文程式設計 url 編碼的格式
location.href這個屬性也可以給他賦值

window.location.href = './index.html'
// 這個就會跳轉頁面到後面你給的那個地址

location.reload

location.reload()這個方法會重新載入一遍頁面，就相當於重新整理是一個道理

window.location.reload()

- 注意：不要寫在全域性，不然瀏覽器就會一直處在重新整理狀態

瀏覽器的歷史記錄

window 中有一個物件叫做history
是專門用來儲存歷史記錄資訊的

history.back

history.back是用來會退歷史記錄的，就是回到前一個頁面，就相當於瀏覽器上的 ⬅️ 按鈕
window.history.back()
- 前提是你要有上一條記錄，不然就是一直在這個頁面，也不會回退

history.forword

history.forword是去到下一個歷史記錄裡面，也就是去到下一個頁面，就相當於瀏覽器上的 ➡️ 按鈕
window.history.forward()
- 前提是你要之前有過回退操作，不然的話你現在就是最後一個頁面，沒有下一個

瀏覽器的版本資訊（瞭解）

window 中有一個物件叫做navigator
是專門用來獲取瀏覽器資訊的

navigator.userAgent

navigator.userAgent是獲取的瀏覽器的整體資訊

console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

navigator.appName

navigator.appName獲取的是瀏覽器的名稱

console.log(window.navigator.appName)

navigator.appVersion

navigator.appVersion獲取的是瀏覽器的版本號

console.log(window.navigator.appVersion)

navigator.platform

navigator.platform獲取到的是當前計算機的作業系統

console.log(window.navigator.platform)

瀏覽器的 onload 事件

這個不在是物件了，而是一個事件
是在頁面所有資源載入完畢後執行的

window.onload = function () {
    console.log('頁面已經載入完畢')
}

在 html 頁面中把 js 寫在 head 裡面

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
        // 這個程式碼執行的時候，body 還沒有載入
      // 這個時候我們就獲取不到 body 中的那個 div
      
      // 就需要使用 window.onload 事件
      window.onload = function () {
        // 這個函式會在頁面載入完畢以後在執行
        // 那麼這個時候頁面的 DOM 元素都已經載入了，我們就可以獲取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

在 html 頁面中把 js 寫在 body 最後面

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>
    
    <script>
        // 這個程式碼執行的時候，body 已經載入完畢了
      // 在這裡就可以獲取到 div，寫不寫 window.onload 就無所謂了
      
      window.onload = function () {
        // 這個函式會在頁面載入完畢以後在執行
        // 那麼這個時候頁面的 DOM 元素都已經載入了，我們就可以獲取 div 了
      }
    </script>
  </body>
</html>

瀏覽器的 onscroll 事件

這個 onscroll 事件是當瀏覽器的滾動條滾動的時候觸發
或者滑鼠滾輪滾動的時候出發

window.onscroll = function () {
 console.log('瀏覽器滾動了')
}

- 注意：前提是頁面的高度要超過瀏覽器的可是窗口才可以

瀏覽器滾動的距離

瀏覽器內的內容即然可以滾動，那麼我們就可以獲取到瀏覽器滾動的距離
思考一個問題？
- 瀏覽器真的滾動了嗎？
- 其實我們的瀏覽器是沒有滾動的，是一直在那裡
- 滾動的是什麼？是我們的頁面
- 所以說，其實瀏覽器沒有動，只不過是頁面向上走了
所以，這個已經不能單純的算是瀏覽器的內容了，而是我們頁面的內容
所以不是在用 window 物件了，而是使用 document 物件

scrollTop

獲取的是頁面向上滾動的距離
一共有兩個獲取方式
- document.body.scrollTop
- document.documentElement.scrollTop

window.onscroll = function () {
 console.log(document.body.scrollTop)
 console.log(document.documentElement.scrollTop)
}

- 兩個都是獲取頁面向上滾動的距離
- 區別：
  - IE 瀏覽器
    - 沒有DOCTYPE宣告的時候，用這兩個都行
    - 有DOCTYPE宣告的時候，只能用document.documentElement.scrollTop
  - Chrome 和 FireFox
    - 沒有DOCTYPE宣告的時候，用document.body.scrollTop
    - 有DOCTYPE宣告的時候，用document.documentElement.scrollTop
  - Safari
    - 兩個都不用，使用一個單獨的方法window.pageYOffset

scrollLeft

獲取頁面向左滾動的距離
也是兩個方法
- document.body.scrollLeft
- document.documentElementLeft

window.onscroll = function () {
 console.log(document.body.scrollLeft)
 console.log(document.documentElement.scrollLeft)
}

- 兩個之間的區別和之前的scrollTop一樣

定時器

在 js 裡面，有兩種定時器，倒計時定時器和間隔定時器

倒計時定時器

倒計時多少時間以後執行函式
語法：setTimeout(要執行的函式，多長時間以後執行)
會在你設定的時間以後，執行函式

var timerId = setTimeout(function () {
 console.log('我執行了')
}, 1000)
console.log(timerId) // 1

- 時間是按照毫秒進行計算的，1000 毫秒就是 1秒鐘
- 所以會在頁面開啟 1 秒鐘以後執行函式
- 只執行一次，就不在執行了
- 返回值是，當前這個定時器是頁面中的第幾個定時器

間隔定時器

每間隔多少時間就執行一次函式
語法：setInterval(要執行的函式，間隔多少時間)

var timerId = setInterval(function () {
 console.log('我執行了')
}, 1000)

- 時間和剛才一樣，是按照毫秒進行計算的
- 每間隔 1 秒鐘執行一次函式
- 只要不關閉，會一直執行
- 返回值是，當前這個定時器是頁面中的第幾個定時器

定時器的返回值

設定定時器的時候，他的返回值是部分setTimeout和setInterval的
只要有一個定時器，那麼就是一個數字

var timerId = setTimeout(function () {
 console.log('倒計時定時器')
}, 1000)

var timerId2 = setInterval(function () {
 console.log('間隔定時器')
}, 1000)

console.log(timerId) // 1
console.log(timerId2) // 2

關閉定時器

我們剛才提到過一個 timerId，是表示這個定時器是頁面上的第幾個定時器
這個 timerId 就是用來關閉定時器的數字
我們有兩個方法來關閉定時器clearTimeout和clearInterval

var timerId = setTimeout(function () {
 console.log('倒計時定時器')
}, 1000)
clearTimeout(timerId)

- 關閉以後，定時器就不會在執行了

var timerId2 = setInterval(function () {
 console.log('間隔定時器')
}, 1000)
coearInterval(timerId2)

- 關閉以後定時器就不會在執行了
原則上是
- clearTimeout關閉setTimeout
- clearInterval關閉setInterval
但是其實是可以通用的，他們可以混著使用

var timerId = setTimeout(function () {
 console.log('倒計時定時器')
}, 1000)
// 關閉倒計時定時器
clearInterval(timerId)

var timerId2 = setInterval(function () {
 console.log('間隔定時器')
}, 1000)
// 關閉間隔定時器
clearTimeout(timerId2)