瀏覽器物件模型BOM（Browser Object Model）

阿新 • • 發佈：2020-09-13

BOM全稱Browser Object Model - 瀏覽器物件模型，他提供了很多物件，用於訪問瀏覽器的功能，沒有規範，BOM的核心是window

什麼是window，什麼是document?

window是js中最大的物件，表示視窗，包含document

document文件物件，表示HTML

1、window物件

1、window

// 所有的全域性變數和全域性函式，都是window的成員。

var a = 5;
function fn() {
    console.log('平頭哥');
}

console.log(a);
console.log(window.a);

fn();
window.fn();


 
// -----------------------
// window是一個物件，它下面就有很多的屬性和方法
// console.log(window); // {}
var n = 0;
for (var attr in window) {
    n++;
    console.log(n, attr, window[attr]);
}

系統對話方塊

// 所有 JavaScript 全域性物件均自動成為 window 物件的成員。
// alert：有確定按鈕的彈出窗，返回undefined
var n = window.alert('彈出');
console.log(n);

// confirm：有確定和取消的彈出窗，確定返回true，取消返回false 

var n = window.confirm('來不來？');
console.log(n);

// prompt：有輸入框的彈出窗，確定返回輸入框的內容，取消返回null
var n = window.prompt('請填入你的年齡', 800);
console.log(n);

open和close

<button>開啟</button>
<button>關閉</button>

// 可以通過js的方式，開啟一個頁面

// 開啟
// window.open(url, 開啟視窗的方式, 設定視窗大小, 新視窗是否取代瀏覽器記錄中的位置) 

//      _self ：在當前視窗開啟
//      _blank:在新視窗開啟
//      返回新頁面的window物件

// 關閉
// 被關閉視窗的window物件.close();  只能關閉由js開啟的視窗

var btn = document.querySelectorAll('button');
var w = null; // 新開啟視窗的window物件的引用

// 開啟
btn[0].onclick = function () {
    w = open('https://www.baidu.com/', '_blank', 'width=600px,height=400px', false);
    // console.log(w);
}

// 關閉
btn[1].onclick = function () {
    w.close();
}

2、location物件

// location 是最有用的 BOM 物件之一，它提供了與當前視窗中載入的文件有關的資訊，還提供了一些導航功能。
console.log(location);

// 從location裡面獲取資訊
// console.log(location.href); // url地址
// console.log(location.hash); // #號後面的東西，包括#號
// console.log(location.search); // ?號後面的東西，包括?號
// console.log(location.host); // 返回伺服器名稱和埠號
// console.log(location.hostname); // 域名
// console.log(location.pathname); // 檔案地址
// console.log(location.port); // 埠號
// console.log(location.protocol ); // 協議

// 設定
// location.hash = '123'
// location.search = 'a=2&c=3'
setTimeout(function () {
    // 跳轉頁面
    location.href = 'https://www.baidu.com/'
}, 3000);

3、history物件

儲存著使用者上網的歷史記錄，從視窗被開啟的那一刻算起。

    history.go(-1); // 後退一頁

    history.go(1); // 前進一頁

    history.go(2); // 前進兩頁

    history.back(); // 後退

    history.forward(); // 前進

4、navigator物件

navigator 物件的屬性通常用於檢測顯示網頁的瀏覽器型別

console.log('瀏覽器代號', navigator.appCodeName);
console.log('瀏覽器名稱', navigator.appName);
console.log('瀏覽器版本', navigator.appVersion);
console.log('是否啟用了cookie', navigator.cookieEnabled);
console.log('硬體平臺', navigator.platform);
console.log('使用者代理', navigator.userAgent);
console.log('代理語言', navigator.systemLanguage);

2、位置屬性

1、元素寬高

獲取元素的寬高（不能獲取隱藏元素的寬高）

var box = document.getElementById('box');
console.log(box.clientWidth); // 120  width + padding
console.log(box.offsetWidth); // 122  width + padding + border
console.log(box.clientHeight); // 120  height + padding
console.log(box.offsetHeight); // 122  height + padding + border

獲取特殊標籤

console.log(document.body); // body標籤
console.log(document.documentElement); // html標籤
document.title = '起飛了'; // 獲取title標籤

獲取可視區寬高（html的寬高）

alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);

元素上邊框和左邊框(用處不大)

console.log(box.clientTop); // 獲取元素上邊邊框的寬度
console.log(box.clientLeft); // 獲取元素左邊邊框的寬度

2、元素位置

元素.offsetParent 返回離它最近的有定位屬性的父級，如果沒有定位的父級，則返回body
元素.offsetTop 返回離它最近的有定位屬性的父級的頂邊的距離，如果沒有定位的父級，則返回body的距離
元素.offsetLeft 返回離它最近的有定位屬性的父級的左邊的距離，如果沒有定位的父級，則返回body的距離

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

var box3 = document.getElementById('box3');
console.log(box3.offsetLeft);
console.log(box3.offsetParent);

// 封裝一個方法，用於獲取元素到文件的距離
console.log(getPos(box3));

function getPos(ele) {
    var l = 0;
    var t = 0;

    while (ele) {
        l += ele.offsetLeft;
        t += ele.offsetTop;
        ele = ele.offsetParent;
        // console.log(ele);
    }
    return {
        left: l,
        top: t
    }
}

3、滾動

獲取元素的滾動條
- 元素.scrollTop 被捲去的高
- 元素.scrollLeft 被捲去的寬
設定滾動條
- 元素.scrollTop = 值
- 元素.scrollLeft = 值
滾動事件(在滾動的時候，會不斷的觸發)
- 元素.onscroll = function(){}
視窗的滾動條
- 標準瀏覽器認為是滾動條的高度是html的，而谷歌認為是body的（新版谷歌也認為是html的），所以要做相容
- console.log(document.documentElement.scrollTop);
- console.log(document.body.scrollTop);

// 在頁面中滾動時，打出它的滾動條的高度
window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop);
}

// 在頁面中點選一下，讓滾動條到500
document.onclick = function () {
    document.documentElement.scrollTop = 500;
    document.body.scrollTop = 500;
}

案例：返回頂部

4、總結

// client系列
// 元素.clientWidth         width + padding    （可視區的寬高）
// 元素.clientHeight        height + padding
// 元素.clientTop           上邊框的高度（不常用）
// 元素.clientLeft          左邊框的寬度

// offset系列
// 元素.offsetWidth         width + padding + border
// 元素.offsetHeight        height + padding + border
// 元素.offsetParent        有定位的父級
// 元素.offsetTop           到有定位父級頂邊的距離
// 元素.offsetLeft          到有定位父級左邊的距離


// scroll系列
// 元素.scrollTop          被捲去的高
// 元素.scrollLeft         被捲去的寬
// 元素.scrollWidth        獲取元素實際內容寬
// 元素.scrollHeight       獲取元素實際內容高

3、懶載入

先只加載可視視窗區域的圖片，當用戶向下拖動滾動條時再繼續載入後面的圖片（也是隻載入目前可視視窗區域內的圖片）。

1、這樣減少了載入時的執行緒數量，使可視區域內的圖片也能夠快速載入，優化了使用者體驗。

2、減少了同一時間發向伺服器的請求數，伺服器壓力劇減。

方法：在寫網頁<img>標籤時並不會將圖片的路徑放入src屬性。而是自定義一個其他的屬性src。將路徑放入這個自定義的屬性中。那麼在載入頁面時，這個圖片一開始是無法載入的。而當瀏覽器的可視區域移動到此圖片上時，將src中的路徑賦值給src屬性，並開始載入。

resize事件

// resize事件，視窗大小發生變化時觸發
window.onresize = function () {
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    console.log(w, h);
}