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

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

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

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

1、BOM 概述

1.1 什么是 BOM

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

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

DOM：

1.文檔對(duì)象模型

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

3.DOM 的頂級(jí)對(duì)象是 document

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

DOM 是 W3C 標(biāo)準(zhǔn)規(guī)范

BOM：

1.瀏覽器對(duì)象模型

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

3.BOM 的頂級(jí)對(duì)象是 window

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

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

1.2 BOM 的構(gòu)成

BOM 比 DOM 更大，它包含 DOM

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

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

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

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

3.注意：window下的一個(gè)特殊屬性 window.name

2. window 對(duì)象的常見事件

2.1 窗口加載事件

（1）window.onload 是窗口 (頁面）加載事件,當(dāng)文檔內(nèi)容完全加載完成會(huì)觸發(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 代碼寫到頁面元素的上方，因?yàn)?onload 是等頁面內(nèi)容全部加載完畢，再去執(zhí)行處理函數(shù)。

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

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

（2）DOMContentLoaded

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

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

代碼演示:

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

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

必然影響用戶的體驗(yàn)，此時(shí)用 DOMContentLoaded 事件比較合適。

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

1.window.onresize = function(){}

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

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

注意：

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

2. 我們經(jīng)常利用這個(gè)事件完成響應(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. 定時(shí)器

3.1 兩種定時(shí)器

window 對(duì)象給我們提供了 2 個(gè)非常好用的方法-定時(shí)器。

1.setTimeout()

2.setInterval()

3.2 setTimeout() 定時(shí)器

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

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

代碼演示：

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

注意：

1. window 可以省略。

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

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

4. 因?yàn)槎〞r(shí)器可能有很多，所以我們經(jīng)常給定時(shí)器賦值一個(gè)標(biāo)識(shí)符。

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

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

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

3.3 停止 setTimeout() 定時(shí)器

window.clearTimeout(timeoutID)

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

代碼演示：

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

3.4 setInterval() 定時(shí)器

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

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

代碼演示:

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

案例：倒計(jì)時(shí)

代碼演示：

<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>倒計(jì)時(shí)</h5>
        <p class="box">
            <p></p>
            <p></p>
            <p></p>
        </p>
    </p>

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

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

演示結(jié)果：

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

3.5 停止 setInterval() 定時(shí)器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通過調(diào)用setInterval()建立的定時(shí)器。

代碼演示：

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

案例：發(fā)送短信

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

代碼演示：

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

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

演示結(jié)果：

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

3.6 this指向問題

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

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

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

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

4. JS 執(zhí)行機(jī)制

4.1 JS 是單線程

JavaScript 語言的一大特點(diǎn)就是單線程，也就是說，同一個(gè)時(shí)間只能做一件事。

4.2同步和異步

為了解決這個(gè)問題，利用多核 CPU 的計(jì)算能力，HTML5 提出 Web Worker 標(biāo)準(zhǔn)，允許

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

1.同步

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

2.異步

你在做一件事情時(shí)，因?yàn)檫@件事情會(huì)花費(fèi)很長(zhǎng)時(shí)間，在做這件事的同時(shí)，你還可以去處理其他事情。比如做飯的異步做法，我們?cè)跓耐瑫r(shí)，利用這10分鐘，去切菜，炒菜。

3.同步任務(wù)

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

4.異步任務(wù)

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

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

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

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

（3）定時(shí)器，包括 setInterval、setTimeout 等

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

4.3 JS 執(zhí)行機(jī)制

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

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

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

5. location 對(duì)象

5.1 什么是 location 對(duì)象

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

5.2 URL

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

URL 的一般語法格式為：

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

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

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

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

代碼演示：

<body>
    <button>點(diǎn)我跳轉(zhuǎn)頁面</button>
    <script>
        //案例： 5秒鐘之后自動(dòng)跳轉(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>
        //  第一個(gè)登錄頁面，里面有提交表單， action 提交到 index.html頁面
        //  第二個(gè)頁面，可以使用第一個(gè)頁面的參數(shù)，這樣實(shí)現(xiàn)了一個(gè)數(shù)據(jù)不同頁面之間的傳遞效果
        //  第二個(gè)頁面之所以可以使用第一個(gè)頁面的數(shù)據(jù)，是利用了URL 里面的 location.search參數(shù)
        //  在第二個(gè)頁面中，需要把這個(gè)參數(shù)提取。
        //  第一步去掉？ 利用 substr 
        //  第二步 利用=號(hào)分割 鍵 和 值 split(‘=‘)
        //  第一個(gè)數(shù)組就是鍵 第二個(gè)數(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 對(duì)象的方法

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

6. navigator 對(duì)象

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

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

下面前端代碼可以判斷用戶那個(gè)終端打開頁面，實(shí)現(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 = ""; //手機(jī)
        } else {
            window.location.href = ""; //電腦
        }
    </script>
</body>

7. history 對(duì)象

window 對(duì)象給我們提供了一個(gè) history 對(duì)象，與瀏覽器歷史記錄進(jìn)行交互。該對(duì)象包含用戶（在瀏覽器窗口中）訪問過的 URL。

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

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

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

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

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

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

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

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

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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

1、BOM 概述

1.1 什么是 BOM

1.2 BOM 的構(gòu)成

2. window 對(duì)象的常見事件

2.1 窗口加載事件

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

3. 定時(shí)器

3.1 兩種定時(shí)器

3.2 setTimeout() 定時(shí)器

3.3 停止 setTimeout() 定時(shí)器

3.4 setInterval() 定時(shí)器

3.5 停止 setInterval() 定時(shí)器

3.6 this指向問題

4. JS 執(zhí)行機(jī)制

4.1 JS 是單線程

4.2同步和異步

4.3 JS 執(zhí)行機(jī)制

5. location 對(duì)象

5.1 什么是 location 對(duì)象

5.2 URL

5.4 location 對(duì)象的方法

6. navigator 對(duì)象

7. history 對(duì)象

1、BOM 概述