javascriptBOM瀏覽器對象模型應(yīng)用實例分析

這篇文章主要介紹了javascript BOM瀏覽器對象模型應(yīng)用實例分析的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇javascript BOM瀏覽器對象模型應(yīng)用實例分析文章都會有所收獲，下面我們一起來看看吧。

目前創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、姑蘇網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

javascript BOM瀏覽器對象模型應(yīng)用實例分析

1、BOM 概述

1.1 什么是 BOM

BOM（Browser Object Model）即瀏覽器對象模型，它提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象，其核心對象是 window。

BOM 由一系列相關(guān)的對象構(gòu)成，并且每個對象都提供了很多方法與屬性。

DOM：

1.文檔對象模型

2.DOM 就是把「文檔」當(dāng)做一個「對象」來看待

3.DOM 的頂級對象是 document

4.5.DOM 主要學(xué)習(xí)的是操作頁面元素

DOM 是 W3C 標準規(guī)范

BOM：

1.瀏覽器對象模型

2.把「瀏覽器」當(dāng)做一個「對象」來看待

3.BOM 的頂級對象是 window

4.BOM 學(xué)習(xí)的是瀏覽器窗口交互的一些對象

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

1.2 BOM 的構(gòu)成

BOM 比 DOM 更大，它包含 DOM

javascript BOM瀏覽器對象模型應(yīng)用實例分析

1. 它是 JS 訪問瀏覽器窗口的一個接口。

2. 它是一個全局對象。定義在全局作用域中的變量、函數(shù)都會變成 window 對象的屬性和方法。

在調(diào)用的時候可以省略 window，前面學(xué)習(xí)對話框都屬于 window 對象方法，如 alert()prompt()等。

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

2. window 對象的常見事件

2.1 窗口加載事件

（1）window.onload 是窗口 (頁面）加載事件,當(dāng)文檔內(nèi)容完全加載完成會觸發(fā)該事件(包括圖像、腳本文件、CSS 文件等), 就調(diào)用的處理函數(shù)。

代碼演示：

<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 是等頁面內(nèi)容全部加載完畢，再去執(zhí)行處理函數(shù)。

2. window.onload 傳統(tǒng)注冊事件方式只能寫一次，如果有多個，會以最后一個 window.onload 為準。

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

（2）DOMContentLoaded

事件觸發(fā)時，僅當(dāng)DOM加載完成，不包括樣式表，圖片，flash等等。

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

代碼演示:

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

<body>
    <script>
        //DOMContentLoaded 事件觸發(fā)時，僅當(dāng)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觸發(fā)可能需要較長的時間, 交互效果就不能實現(xiàn)，

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

2.2 調(diào)整窗口大小事件

1.window.onresize = function(){}

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

window.onresize 是調(diào)整窗口大小加載事件, 當(dāng)觸發(fā)時就調(diào)用的處理函數(shù)。

注意：

1. 只要窗口大小發(fā)生像素變化，就會觸發(fā)這個事件。

2. 我們經(jīng)常利用這個事件完成響應(yīng)式布局。 window.innerWidth 當(dāng)前屏幕的寬度

代碼演示：

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

3. 定時器

3.1 兩種定時器

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

1.setTimeout()

2.setInterval()

3.2 setTimeout() 定時器

window.setTimeout(調(diào)用函數(shù), [延遲的毫秒數(shù)]);

該定時器在定時器到期后執(zhí)行調(diào)用函數(shù)。

代碼演示：

<body>
    <script>
        // window.setTimeout(調(diào)用函數(shù), [延遲的毫秒數(shù)]); 
        window.setTimeout(function () {
            alert('你好');
        },1000);
    </script>
</body>

注意：

1. window 可以省略。

2. 這個調(diào)用函數(shù)可以直接寫函數(shù)，或者寫函數(shù)名或者采取字符串‘函數(shù)名()'三種形式。第三種不推薦。

3. 延遲的毫秒數(shù)省略默認是 0，如果寫，必須是毫秒。

4. 因為定時器可能有很多，所以我們經(jīng)常給定時器賦值一個標識符。

5.setTimeout() 這個調(diào)用函數(shù)我們也稱為回調(diào)函數(shù) callback

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

函數(shù)也是回調(diào) 函數(shù)。

3.3 停止 setTimeout() 定時器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通過調(diào)用setTimeout()建立的定時器。

代碼演示：

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

3.4 setInterval() 定時器

window.setInterval(
回調(diào)函數(shù)
, [
間隔的毫秒數(shù)
]);

setInterval() 方法重復(fù)調(diào)用一個函數(shù)，每隔這個時間，就去調(diào)用一次回調(diào)函數(shù)。

代碼演示:

<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);
        }

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

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

        h5 {
            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">
        <h4>歐冠決賽</h4>
        <p>UEFA Champions Final</p>
        <h5>倒計時</h5>
        <p class="box">
            <p></p>
            <p></p>
            <p></p>
        </p>
    </p>

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

        //封裝一個函數(shù)，傳入實參（時間），就會產(chǎn)生倒計時。
        function fn(imputTime1) {
            //獲取元素
            var box = document.querySelector('.box');
            var imputTime = new Date(imputTime1);
            //先調(diào)用一下函數(shù)，解決刷新頁面后數(shù)字空白現(xiàn)象
            fn();
            //設(shè)定一個倒計時,每隔一秒就執(zhí)行一次。
            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;
            }
        }
        //輸入結(jié)束的時間
        fn('2022-5-29 03:00:00');
    </script>
</body>

演示結(jié)果：

javascript BOM瀏覽器對象模型應(yīng)用實例分析

3.5 停止 setInterval() 定時器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通過調(diào)用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>

案例：發(fā)送短信

點擊按鈕后，該按鈕60秒之內(nèi)不能再次點擊，防止重復(fù)發(fā)送短信

代碼演示：

<body>
    <form action="" id="">
        <input type="text">
        <button>發(fā)送</button>
    </form>

    <script>
        //  按鈕點擊之后，會禁用 disabled 為true 
        //  同時按鈕里面的內(nèi)容會變化， 注意 button 里面的內(nèi)容通過 innerHTML修改
        //  里面秒數(shù)是有變化的，因此需要用到定時器
        //  定義一個變量，在定時器里面，不斷遞減
        //  如果變量為0 說明到了時間，我們需要停止定時器，并且復(fù)原按鈕初始狀態(tài)。
        
        //點擊按鈕后，該按鈕60秒之內(nèi)不能再次點擊，防止重復(fù)發(fā)送短信
        var btn = document.querySelector('button');
        btn.addEventListener('click', fn);
        function fn() {
            //禁用按鈕
            this.disabled = true;
            //聲明一個倒計時變量
            var time = 60;
            btn.innerHTML = time;
            //設(shè)置定時器
            var timer = setInterval(fn, 1000);
            function fn() {
                //每一秒就會讓time自減一下
                time--;
                //把值給btn
                btn.innerHTML = time;
                // 判斷當(dāng)?shù)搅?秒后，就會停止定時器，解禁按鈕
                if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '發(fā)送';
                }
            };
        }
    </script>
</body>

演示結(jié)果：

javascript BOM瀏覽器對象模型應(yīng)用實例分析

3.6 this指向問題

this的指向在函數(shù)定義的時候是確定不了的，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰，一般情況下this 的最終指向的是那個調(diào)用它的對象現(xiàn)階段，我們先了解一下幾個this指向

1. 全局作用域或者普通函數(shù)中this指向全局對象window（注意定時器里面的this指向window）

2. 方法調(diào)用中誰調(diào)用this指向誰

3.構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)的實例

4. JS 執(zhí)行機制

4.1 JS 是單線程

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

4.2同步和異步

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

JavaScript 腳本創(chuàng)建多個線程。于是，JS 中出現(xiàn)了同步和異步

1.同步

前一個任務(wù)結(jié)束后再執(zhí)行后一個任務(wù)，程序的執(zhí)行順序與任務(wù)的排列順序是一致的、同步的。

2.異步

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

3.同步任務(wù)

同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧。

4.異步任務(wù)

JS 的異步是通過回調(diào)函數(shù)實現(xiàn)的。

一般而言，異步任務(wù)有以下三種類型:

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

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

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

異步任務(wù)相關(guān)回調(diào)函數(shù)添加到任務(wù)隊列中（任務(wù)隊列也稱為消息隊列）。

4.3 JS 執(zhí)行機制

1. 先執(zhí)行執(zhí)行棧中的同步任務(wù)。

2. 異步任務(wù)（回調(diào)函數(shù)）放入任務(wù)隊列中。

3. 一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會按次序讀取任務(wù)隊列中的異步任務(wù)，于是被讀取的異步任務(wù)結(jié)束等待狀態(tài)，進入執(zhí)行棧，開始執(zhí)行。

5. location 對象

5.1 什么是 location 對象

window 對象給我們提供了一個 location 屬性用于獲取或設(shè)置窗體的 URL，并且可以用于解析URL 。因為這個屬性返回的是一個對象，所以我們將這個屬性也稱為 location 對象。

5.2 URL

統(tǒng)一資源定位符 (Uniform Resource Locator, URL) 是互聯(lián)網(wǎng)上標準資源的地址?；ヂ?lián)網(wǎng)上的每個文件都有一個唯一的 URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。

URL 的一般語法格式為：

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

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

javascript BOM瀏覽器對象模型應(yīng)用實例分析

案例： 5秒鐘之后自動跳轉(zhuǎn)頁面

代碼演示：

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

案例：獲取 URL 參數(shù)數(shù)據(jù)

代碼演示：

<body>
    <form action="02案例： 獲取 URL 參數(shù)數(shù)據(jù).html">
        用戶名:<input type="text" name="uname">
        <input type="submit" value="登錄">
    </form>
</body>

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

        // console.log(location.search);
        // 1.截取字符串
        var params = location.search.substr(1);//uname = red;
        // 2.利用=把字符串分割為數(shù)組 split('=');
        var arr = params.split('=');
        // 3.把用戶名打印出來
        // console.log(arr[1]);
        var p = document.querySelector('p');
        p.innerHTML = arr[1];
    </script>
</body>

5.4 location 對象的方法

javascript BOM瀏覽器對象模型應(yīng)用實例分析

6. navigator 對象

navigator 對象包含有關(guān)瀏覽器的信息，它有很多屬性，我們最常用的是 userAgent，該屬性可以

返回由客戶機發(fā)送服務(wù)器的 user-agent 頭部的值。

下面前端代碼可以判斷用戶那個終端打開頁面，實現(xiàn)跳轉(zhuǎn)

代碼演示：

<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。

javascript BOM瀏覽器對象模型應(yīng)用實例分析

history 對象一般在實際開發(fā)中比較少用，但是會在一些 OA 辦公系統(tǒng)中見到。

javascript BOM瀏覽器對象模型應(yīng)用實例分析

關(guān)于“javascript BOM瀏覽器對象模型應(yīng)用實例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“javascript BOM瀏覽器對象模型應(yīng)用實例分析”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：javascriptBOM瀏覽器對象模型應(yīng)用實例分析
路徑分享：http://muchs.cn/article32/ipgopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)站維護、定制開發(fā)、建站公司、搜索引擎優(yōu)化、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

javascriptBOM瀏覽器對象模型應(yīng)用實例分析

1、BOM 概述

1.1 什么是 BOM

1.2 BOM 的構(gòu)成

2. window 對象的常見事件

2.1 窗口加載事件

2.2 調(diào)整窗口大小事件

3. 定時器

3.1 兩種定時器

3.2 setTimeout() 定時器

3.3 停止 setTimeout() 定時器

3.4 setInterval() 定時器

3.5 停止 setInterval() 定時器

3.6 this指向問題

4. JS 執(zhí)行機制

4.1 JS 是單線程

4.2同步和異步

4.3 JS 執(zhí)行機制

5. location 對象

5.1 什么是 location 對象

5.2 URL

5.4 location 對象的方法

6. navigator 對象

7. history 對象

1、BOM 概述