BOM瀏覽器物件模型整理解析

本篇文章給大家帶來了關於的相關知識，其中主要介紹了關於BOM瀏覽器物件模型的相關問題，包括了windows物件的常見事件、定時器、js執行機制等等內容，下面一起來看一下，希望對大家有幫助。

【相關推薦：、】

1、BOM 概述

1.1 什麼是 BOM

BOM（Browser Object Model）即瀏覽器物件模型，它提供了獨立於內容而與瀏覽器視窗進行互動的物件，其核心物件是 window。

BOM 由一系列相關的物件構成，並且每個物件都提供了很多方法與屬性。

DOM：

1.檔案物件模型

2.DOM 就是把「檔案」當做一個「物件」來看待

3.DOM 的頂級物件是 document

4.5.DOM 主要學習的是操作頁面元素

DOM 是 W3C 標準規範

BOM：

1.瀏覽器物件模型

2.把「瀏覽器」當做一個「物件」來看待

3.BOM 的頂級物件是 window

4.BOM 學習的是瀏覽器視窗互動的一些物件

5.BOM 是瀏覽器廠商在各自瀏覽器上定義的，相容性較差

1.2 BOM 的構成

BOM 比 DOM 更大，它包含 DOM

1. 它是 JS 存取瀏覽器視窗的一個介面。

2. 它是一個全域性物件。定義在全域性作用域中的變數、函數都會變成 window 物件的屬性和方法。

在呼叫的時候可以省略 window，前面學習對話方塊都屬於 window 物件方法，如 alert()prompt()等。

3.注意：window下的一個特殊屬性 window.name

2. window 物件的常見事件

2.1 視窗載入事件

（1）window.onload 是視窗 (頁面）載入事件,當檔案內容完全載入完成會觸發該事件(包括影象、指令碼文件、CSS 檔案等), 就呼叫的處理常式。

程式碼演示：

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        // window.onload = function () {};
        // 在頁面元素全部載入完畢後
        window.addEventListener("load", function () {
            var box = document.querySelector('.box');
            box.onclick = function () {
                box.style.backgroundColor = 'red';
            };
        });
    </script>

    <p class="box"></p>
</body>

注意：

1. 有了 window.onload 就可以把 JS 程式碼寫到頁面元素的上方，因為 onload 是等頁面內容全部加載完畢，再去執行處理常式。

2. window.onload 傳統註冊事件方式只能寫一次，如果有多個，會以最後一個 window.onload 為準。

3. 如果使用addEventListener則沒有限制

（2）DOMContentLoaded

事件觸發時，僅當DOM載入完成，不包括樣式表，圖片，flash等等。

document.addEventListener('DOMContentLoaded',function(){})；

程式碼演示:

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        //DOMContentLoaded 事件觸發時，僅當DOM載入完成，不包括樣式表，圖片，flash等等。
        window.document.addEventListener('DOMContentLoaded', function () {
            var box = document.querySelector('.box');
            box.onclick = function () {
                box.style.backgroundColor = 'red';
            };
        })
    </script>
    <p class="box"></p>
</body>

注意：

1. Ie9以上才支援

2.如果頁面的圖片很多的話, 從使用者存取到onload觸發可能需要較長的時間, 互動效果就不能實現，

必然影響用戶的體驗，此時用 DOMContentLoaded 事件比較合適。

2.2 調整視窗大小事件

1.window.onresize = function(){}

2.window.addEventListener("resize",function(){});

window.onresize 是調整視窗大小載入事件, 當觸發時就呼叫的處理常式。

注意：

1. 只要視窗大小發生畫素變化，就會觸發這個事件。

2. 我們經常利用這個事件完成響應式佈局。 window.innerWidth 當前螢幕的寬度

程式碼演示：

<body>
    <script>
        // window.onresize = function () { }
        window.addEventListener("resize", function () {
            // window.innerWidth當前視窗的寬度；window.innerHeight當前視窗的高度。
            console.log(window.innerWidth, window.innerHeight);
        });
    </script>
</body>

3. 定時器

3.1 兩種定時器

window 物件給我們提供了 2 個非常好用的方法-定時器。

1.setTimeout()

2.setInterval()

3.2 setTimeout() 定時器

window.setTimeout(呼叫函數, [延遲的毫秒數]);

該定時器在定時器到期後執行呼叫函數。

程式碼演示：

<body>
    <script>
        // window.setTimeout(呼叫函數, [延遲的毫秒數]); 
        window.setTimeout(function () {
            alert('你好');
        },1000);
    </script>
</body>

注意：

1. window 可以省略。

2. 這個呼叫函數可以直接寫函數，或者寫函數名或者採取字串‘函數名()'三種形式。第三種不推薦。

3. 延遲的毫秒數省略預設是 0，如果寫，必須是毫秒。

4. 因為定時器可能有很多，所以我們經常給定時器賦值一個識別符號。

5.setTimeout() 這個呼叫函數我們也稱為回撥函數 callback

6.以前我們講的 element.onclick = function(){} 或者 element.addEventListener(「click」, fn); 裡面的

函數也是回撥函數。

3.3 停止 setTimeout() 定時器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通過呼叫setTimeout()建立的定時器。

程式碼演示：

<body>
    <script>
        // window.setTimeout(呼叫函數, [延遲的毫秒數]); 
        function fn() {
            alert('你好');
        };
        var timer = setTimeout(fn, 1000);
        //clearTimeout()方法取消了先前通過呼叫 setTimeout() 建立的定時器。
        clearTimeout(timer);
    </script>
</body>

3.4 setInterval() 定時器

window.setInterval(
回撥函數
, [
間隔的毫秒數
]);

setInterval() 方法重複呼叫一個函數，每隔這個時間，就去呼叫一次回撥函數。

程式碼演示:

<body>
    <script>
        // setInterval() 定時器
        function fn() {
            for(var i = 1; i <= 5; i++) {
                console.log(i);
            }
        }
        var timer = setInterval(fn,1000);
    </script>
</body>

案例：倒計時

程式碼演示：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .bigbox {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 250px;
            transform: translate(-50%, -50%);
            background-color: red;
            box-shadow: 0 5px 5px rgba(300, 50, 50, .5);
        }

        h3 {
            padding-top: 15px;
            color: #fff;
            text-align: center;
            font-size: 40px;
        }

        p {
            margin-top: 5px;
            text-align: center;
            color: #fff;
            opacity: .7;
        }

        h4 {
            margin-top: 20px;
            text-align: center;
            color: #fff;
            font-size: 30px;
            opacity: .9;
        }

        .box {
            margin: 0 auto;
            margin-top: 32px;
            width: 160px;
            display: flex;
            justify-content: space-between;
        }

        .box p {
            width: 50px;
            height: 50px;
            color: #fff;
            font-weight: 700;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            background-color: black;
        }
    </style>
</head>

<body>
    <p class="bigbox">
        <h3>歐冠決賽</h3>
        <p>UEFA Champions Final</p>
        <h4>倒計時</h4>
        <p class="box">
            <p></p>
            <p></p>
            <p></p>
        </p>
    </p>

    <script>
        // ① 這個倒計時是不斷變化的，因此需要定時器來自動變化（setInterval）
        // ② 三個黑色盒子裡面分別存放時分秒
        // ③ 三個黑色盒子利用innerHTML 放入計算的小時分鐘秒數
        // ④ 第一次執行也是間隔毫秒數，因此剛重新整理頁面會有空白
        // ⑤ 最好採取封裝函數的方式， 這樣可以先呼叫一次這個函數，防止剛開始重新整理頁面有空白問題

        //封裝一個函數，傳入實參（時間），就會產生倒計時。
        function fn(imputTime1) {
            //獲取元素
            var box = document.querySelector('.box');
            var imputTime = new Date(imputTime1);
            //先呼叫一下函數，解決重新整理頁面後數位空白現象
            fn();
            //設定一個倒計時,每隔一秒就執行一次。
            var timer = setInterval(fn, 1000);
            function fn() {
                var nowTime = new Date();
                var value = (imputTime.valueOf() - nowTime.valueOf()) / 1000;
                var h = parseInt(value / 60 / 60 % 24)
                h = h < 10 ? '0' + h : h;
                box.children[0].innerHTML = h;
                var m = parseInt(value / 60 % 60);
                m = m < 10 ? '0' + m : m;
                box.children[1].innerHTML = m;
                var s = parseInt(value % 60);
                s = s < 10 ? '0' + s : s;
                box.children[2].innerHTML = s;
            }
        }
        //輸入結束的時間
        fn('2022-5-29 03:00:00');
    </script>
</body>

演示結果：

3.5 停止 setInterval() 定時器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通過呼叫setInterval()建立的定時器。

程式碼演示：

<body>
    <script>
        // setInterval() 定時器
        function fn() {
            for (var i = 1; i <= 5; i++) {
                console.log(i);
            }
        }
        var timer = setInterval(fn, 1000);
        // 停止 setInterval() 定時器window.clearInterval(intervalID);
        clearInterval(timer);
    </script>
</body>

案例：傳送簡訊

點選按鈕後，該按鈕60秒之內不能再次點選，防止重複傳送簡訊

程式碼演示：

<body>
    <form action="" id="">
        <input type="text">
        <button>傳送</button>
    </form>

    <script>
        //  按鈕點選之後，會禁用 disabled 為true 
        //  同時按鈕裡面的內容會變化， 注意 button 裡面的內容通過 innerHTML修改
        //  裡面秒數是有變化的，因此需要用到定時器
        //  定義一個變數，在定時器裡面，不斷遞減
        //  如果變數為0 說明到了時間，我們需要停止定時器，並且復原按鈕初始狀態。
        
        //點選按鈕後，該按鈕60秒之內不能再次點選，防止重複傳送簡訊
        var btn = document.querySelector('button');
        btn.addEventListener('click', fn);
        function fn() {
            //禁用按鈕
            this.disabled = true;
            //宣告一個倒計時變數
            var time = 60;
            btn.innerHTML = time;
            //設定定時器
            var timer = setInterval(fn, 1000);
            function fn() {
                //每一秒就會讓time自減一下
                time--;
                //把值給btn
                btn.innerHTML = time;
                // 判斷當到了0秒後，就會停止定時器，解禁按鈕
                if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '傳送';
                }
            };
        }
    </script>
</body>

演示結果：

3.6 this指向問題

this的指向在函數定義的時候是確定不了的，只有函數執行的時候才能確定this到底指向誰，一般情況下this 的最終指向的是那個呼叫它的物件現階段，我們先了解一下幾個this指向

1. 全域性作用域或者普通函數中this指向全域性物件window（注意定時器裡面的this指向window）

2. 方法呼叫中誰呼叫this指向誰

3.建構函式中this指向建構函式的範例

4. JS 執行機制

4.1 JS 是單執行緒

JavaScript 語言的一大特點就是單執行緒，也就是說，同一個時間只能做一件事。

4.2同步和非同步

為了解決這個問題，利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，允許

JavaScript 指令碼創建多個執行緒。於是，JS 中出現了同步和非同步

1.同步

前一個任務結束後再執行後一個任務，程式的執行順序與任務的排列順序是一致的、同步的。

2.非同步

你在做一件事情時，因為這件事情會花費很長時間，在做這件事的同時，你還可以去處理其他事情。比如做飯的非同步做法，我們在燒水的同時，利用這10分鐘，去切菜，炒菜。

3.同步任務

同步任務都在主執行緒上執行，形成一個執行棧。

4.非同步任務

JS 的非同步是通過回撥函數實現的。

一般而言，非同步任務有以下三種型別:

（1）普通事件，如 click、resize 等

（2）資源載入，如 load、error 等

（3）定時器，包括 setInterval、setTimeout 等

非同步任務相關回撥函數新增到任務佇列中（任務佇列也稱為訊息佇列）。

4.3 JS 執行機制

1. 先執行執行棧中的同步任務。

2. 非同步任務（回撥函數）放入任務佇列中。

3. 一旦執行棧中的所有同步任務執行完畢，系統就會按次序讀取任務佇列中的非同步任務，於是被讀取的非同步任務結束等待狀態，進入執行棧，開始執行。

5. location 物件

5.1 什麼是 location 物件

window 物件給我們提供了一個 location 屬性用於獲取或設定表單的 URL，並且可以用於解析URL 。因為這個屬性返回的是一個物件，所以我們將這個屬性也稱為 location 物件。

5.2 URL

統一資源定位符 (Uniform Resource Locator, URL) 是網際網路上標準資源的地址。網際網路上的每個檔案都有一個唯一的 URL，它包含的資訊指出檔案的位置以及瀏覽器應該怎麼處理它。

URL 的一般語法格式為：

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

案例： 5秒鐘之後自動跳轉頁面

程式碼演示：

<body>
    <button>點我跳轉頁面</button>
    <script>
        //案例： 5秒鐘之後自動跳轉頁面
        var btn = document.querySelector('button');
        btn.addEventListener('click', fn)
        function fn() {
            var time = 5;
            document.body.innerHTML = '還有' + time + '秒跳轉頁面...';
            var timer = setInterval(fn, 1000);
            function fn() {
                time--;
                document.body.innerHTML = '還有' + time + '秒跳轉頁面...';
                if (time == 0) {
                    location.href = 'http://www.itcast.cn';
                    clearInterval(timer);
                }
            };
        }
    </script>
</body>

案例：獲取 URL 引數資料

程式碼演示：

<body>
    <form action="02案例： 獲取 URL 引數資料.html">
        使用者名稱:<input type="text" name="uname">
        <input type="submit" value="登入">
    </form>
</body>

<body>
    <p></p>    
    
    <script>
        //  第一個登入頁面，裡面有提交表單， action 提交到 index.html頁面
        //  第二個頁面，可以使用第一個頁面的引數，這樣實現了一個資料不同頁面之間的傳遞效果
        //  第二個頁面之所以可以使用第一個頁面的資料，是利用了URL 裡面的 location.search引數
        //  在第二個頁面中，需要把這個引數提取。
        //  第一步去掉？ 利用 substr 
        //  第二步 利用=號分割 鍵 和 值 split(‘=‘)
        //  第一個陣列就是鍵 第二個陣列就是值

        // console.log(location.search);
        // 1.擷取字串
        var params = location.search.substr(1);//uname = red;
        // 2.利用=把字串分割為陣列 split('=');
        var arr = params.split('=');
        // 3.把使用者名稱列印出來
        // console.log(arr[1]);
        var p = document.querySelector('p');
        p.innerHTML = arr[1];
    </script>
</body>

5.4 location 物件的方法

6. navigator 物件

navigator 物件包含有關瀏覽器的資訊，它有很多屬性，我們最常用的是 userAgent，該屬性可以

返回由客戶機傳送伺服器的 user-agent 頭部的值。

下面前端程式碼可以判斷使用者那個終端開啟頁面，實現跳轉

程式碼演示：

<body>
    <script>
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile | BlackBerry | IEMobile | MQQBrowser | JUC | Fennec | wOSBrowser | BrowserNG | WebOS
            | Symbian | Windows Phone) / i))) {
            window.location.href = ""; //手機
        } else {
            window.location.href = ""; //電腦
        }
    </script>
</body>

7. history 物件

window 物件給我們提供了一個 history 物件，與瀏覽器歷史記錄進行互動。該物件包含使用者（在瀏覽器視窗中）存取過的 URL。

history 物件一般在實際開發中比較少用，但是會在一些 OA 辦公系統中見到。

【相關推薦：、】

以上就是BOM瀏覽器物件模型整理解析的詳細內容，更多請關注TW511.COM其它相關文章！