JavaScript的BOM技術(shù)怎么用

發(fā)布時間：2022-01-31 16:29:58 來源：億速云閱讀：150 作者：iii 欄目：web開發(fā)

這篇文章主要講解了“JavaScript的BOM技術(shù)怎么用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript的BOM技術(shù)怎么用”吧！

1、BOM概述

BOM = Browser Object Model 瀏覽器對象模型
它提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象，其核心對象是 window
BOM 由一系列相關(guān)的對象構(gòu)成，并且每個對象都提供了很多方法與屬性
BOM 缺乏標準，JavaScript 語法的標準化組織是 ECMA, DOM 的標準化組織是 W3C, BOM最初是Netscape 瀏覽器標準的一部分

DOM	BOM
文檔對象模型	瀏覽器對象模型
DOM 就是把文檔當作一個對象來看待	把瀏覽器當作一個對象來看待
DOM 的頂級對象是document	BOM 的頂級對象是window
DOM 主要學(xué)習(xí)的是操作頁面元素	BOM 學(xué)習(xí)的是瀏覽器窗口交互的一些對象
DOM 是 W3C 標準規(guī)范	BOM 是瀏覽器廠商在各自瀏覽器上定義的，兼容性較差

1.1、BOM的構(gòu)成

JavaScript的BOM技術(shù)怎么用

BOM 比 DOM 更大。它包含 DOM。
window 對象是瀏覽器的頂級對象，它具有雙重角色
它是 JS 訪問瀏覽器窗口的一個接口
它是一個全局對象。定義在全局作用域中的變量、函數(shù)都會變成 window 對象的屬性和方法
在調(diào)用的時候可以省略 window，前面學(xué)習(xí)的對話框都屬于 window 對象方法，如 alert()、prompt()等。
注意：window下的一個特殊屬性 window.name

// 定義在全局作用域中的變量會變成window對象的屬性
var num = 10;
console.log(window.num);
// 10

// 定義在全局作用域中的函數(shù)會變成window對象的方法
function fn() {
    console.log(11);
}
console.fn();
// 11

var name = 10;  //不要用這個name變量,window下有一個特殊屬性window.name
console.log(window.num);

2、window 對象的常見事件

2.1、窗口加載事件

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

window.onload = function(){
    };// 或者window.addEventListener("load",function(){});

注意：

有了window.onload就可以把JS代碼寫到頁面元素的上方
因為onload是等頁面內(nèi)容全部加載完畢，再去執(zhí)行處理函數(shù)
window.onload 傳統(tǒng)注冊事件方式，只能寫一次
如果有多個，會以最后一個window.onload為準
如果使用addEventListener 則沒有限制

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

接收兩個參數(shù)：

DOMCountentLoaded事件觸發(fā)時，僅當DOM加載完成，不包括樣式表，圖片，flash等等
如果頁面的圖片很多的話, 從用戶訪問到onload觸發(fā)可能需要較長的時間
交互效果就不能實現(xiàn)，必然影響用戶的體驗，此時用 DOMContentLoaded事件比較合適。

2.1.1、區(qū)別

load等頁面內(nèi)容全部加載完畢，包括頁面dom元素，圖片，flash，css等
DOMContentLoaded 是DOM加載完畢，不包含圖片 flash css 等就可以執(zhí)行，加載速度比load更快一些

<script>
    // window.onload = function() {
    //     var btn = document.querySelector('button');
    //     btn.addEventListener('click', function() {
    //         alert('點擊我');
    //     })
    // }
    // window.onload = function() {
    //     alert(22);
    // }
    
    window.addEventListener('load', function() {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            alert('點擊我');
        })
    })
    window.addEventListener('load', function() {

        alert(22);
    })
    document.addEventListener('DOMContentLoaded', function() {
            alert(33);
        })
        // load 等頁面內(nèi)容全部加載完畢，包含頁面dom元素 圖片 flash  css 等等
        // DOMContentLoaded 是DOM 加載完畢，不包含圖片 falsh css 等就可以執(zhí)行 加載速度比 load更快一些</script>

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

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

window.onresize = function() {}// 或者window.addEventListener('resize',function(){});

只要窗口大小發(fā)生像素變化，就會觸發(fā)這個事件
我們經(jīng)常利用這個事件完成響應(yīng)式布局。window.innerWidth 當前屏幕的寬度

<body>
    <script>
        window.addEventListener('load', function() {
            var p = document.querySelector('p');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('變化了');
                if (window.innerWidth <= 800) {
                    p.style.display = 'none';
                } else {
                    p.style.display = 'block';
                }

            })
        })
    </script>
    <p></p></body>

3、定時器

window 對象給我們提供了兩個定時器

setTimeout()
setInterval()

3.1、setTimeout()定時器

setTimeout()方法用于設(shè)置一個定時器，該定時器在定時器到期后執(zhí)行調(diào)用函數(shù)。

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

注意：

window可以省略
這個調(diào)用函數(shù)

可以直接寫函數(shù)
或者寫函數(shù)名
或者采取字符串 ‘函數(shù)名()’ （不推薦）

延遲的毫秒數(shù)省略默認是0，如果寫，必須是毫秒
因為定時器可能有很多，所以我們經(jīng)常給定時器賦值一個標識符
setTimeout() 這個調(diào)用函數(shù)我們也稱為回調(diào)函數(shù)callback
普通函數(shù)是按照代碼順序直接調(diào)用，而這個函數(shù)，需要等待事件，事件到了才會去調(diào)用這個函數(shù)，因此稱為回調(diào)函數(shù)。

<body>
    <script>
        // 1. setTimeout 
        // 語法規(guī)范：  window.setTimeout(調(diào)用函數(shù), 延時時間);
        // 1. 這個window在調(diào)用的時候可以省略
        // 2. 這個延時時間單位是毫秒 但是可以省略，如果省略默認的是0
        // 3. 這個調(diào)用函數(shù)可以直接寫函數(shù) 還可以寫 函數(shù)名 還有一個寫法 '函數(shù)名()'
        // 4. 頁面中可能有很多的定時器，我們經(jīng)常給定時器加標識符 （名字)
        // setTimeout(function() {
        //     console.log('時間到了');

        // }, 2000);
        function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我們不提倡這個寫法
    </script></body>

3.2、clearTimeout()停止定時器

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

window.clearTimeout(timeoutID)

注意：

window可以省略
里面的參數(shù)就是定時器的標識符

<body>
    <button>點擊停止定時器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script></body>

3.3、setInterval()定時器

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

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

window可以省略
這個回調(diào)函數(shù):

可以直接寫函數(shù)
或者寫函數(shù)名
或者采取字符 ‘函數(shù)名()’

第一次執(zhí)行也是間隔毫秒數(shù)之后執(zhí)行，之后每隔毫秒數(shù)就執(zhí)行一次

<body>
    <script>
        // 1. setInterval 
        // 語法規(guī)范：  window.setInterval(調(diào)用函數(shù), 延時時間);
        setInterval(function() {
            console.log('繼續(xù)輸出');

        }, 1000);
        // 2. setTimeout  延時時間到了，就去調(diào)用這個回調(diào)函數(shù)，只調(diào)用一次 就結(jié)束了這個定時器
        // 3. setInterval  每隔這個延時時間，就去調(diào)用這個回調(diào)函數(shù)，會調(diào)用很多次，重復(fù)調(diào)用這個函數(shù)
    </script></body>

3.4、clearInterval()停止定時器

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

注意：

window可以省略
里面的參數(shù)就是定時器的標識符

<body>
    <button class="begin">開啟定時器</button>
    <button class="stop">停止定時器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局變量  null是一個空對象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script></body>

3.5、this指向

this的指向在函數(shù)定義的時候是確定不了的，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰

現(xiàn)階段，我們先了解一下幾個this指向

全局作用域或者普通函數(shù)中this指向全局對象window(注意定時器里面的this指向window)
方法調(diào)用中誰調(diào)用this指向誰
構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實例

<body>
    <button>點擊</button>
    <script>
        // this 指向問題 一般情況下this的最終指向的是那個調(diào)用它的對象

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

        function fn() {
            console.log(this);

        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);

        }, 1000);
        // 2. 方法調(diào)用中誰調(diào)用this指向誰
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 這個對象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn這個按鈕對象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn這個按鈕對象

            })
            // 3. 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)的實例
        function Fun() {
            console.log(this); // this 指向的是fun 實例對象

        }
        var fun = new Fun();
    </script></body>

4、JS執(zhí)行機制

4.1、JS是單線程

JavaScript 語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。這是因為 Javascript 這門腳本語言誕生的使命所致——JavaScript 是為處理頁面中用戶的交互，以及操作 DOM 而誕生的。比如我們對某個 DOM 元素進行添加和刪除操作，不能同時進行。應(yīng)該先進行添加，之后再刪除。
單線程就意味著，所有任務(wù)需要排隊，前一個任務(wù)結(jié)束，才會執(zhí)行后一個任務(wù)。這樣所導(dǎo)致的問題是：如果 JS 執(zhí)行的時間過長，這樣就會造成頁面的渲染不連貫，導(dǎo)致頁面渲染加載阻塞的感覺。

4.2、一個問題

以下代碼執(zhí)行的結(jié)果是什么？

console.log(1);setTimeout(function() {
    console.log(3);},1000);console.log(2);

那么以下代碼執(zhí)行的結(jié)果又是什么？

console.log(1);setTimeout(function() {
    console.log(3);},0);console.log(2);

4.3、同步和異步

為了解決這個問題，利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，允許 JavaScript 腳本創(chuàng)建多個線程
于是，JS 中出現(xiàn)了同步和異步。
同步:

前一個任務(wù)結(jié)束后再執(zhí)行后一個任務(wù)

異步：

在做這件事的同時，你還可以去處理其他事情

同步任務(wù)

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

異步任務(wù)

JS中的異步是通過回調(diào)函數(shù)實現(xiàn)的
異步任務(wù)有以下三種類型

普通事件，如click,resize等
資源加載，如load,error等
定時器，包括setInterval,setTimeout等

異步任務(wù)相關(guān)回調(diào)函數(shù)添加到任務(wù)隊列中

JavaScript的BOM技術(shù)怎么用

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

JavaScript的BOM技術(shù)怎么用

此時再來看我們剛才的問題：

console.log(1);setTimeout(function() {
    console.log(3);},1000);console.log(2);

執(zhí)行的結(jié)果和順序為 1、2、3

console.log(1);setTimeout(function() {
    console.log(3);},0);console.log(2);

執(zhí)行的結(jié)果和順序為 1、2、3

// 3. 第三個問題console.log(1);document.onclick = function() {
    console.log('click');}console.log(2);setTimeout(function() {
    console.log(3)}, 3000)

JavaScript的BOM技術(shù)怎么用

同步任務(wù)放在執(zhí)行棧中執(zhí)行，異步任務(wù)由異步進程處理放到任務(wù)隊列中，執(zhí)行棧中的任務(wù)執(zhí)行完畢會去任務(wù)隊列中查看是否有異步任務(wù)執(zhí)行，由于主線程不斷的重復(fù)獲得任務(wù)、執(zhí)行任務(wù)、再獲取任務(wù)、再執(zhí)行，所以這種機制被稱為事件循環(huán)（ event loop）。

5、location對象

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

5.1、url

==統(tǒng)一資源定位符（uniform resouce locator）==是互聯(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

組成	說明
protocol	通信協(xié)議常用的http,ftp,maito等
host	主機(域名) www.itheima.com
port	端口號，可選
path	路徑由零或多個`'/'`符號隔開的字符串
query	參數(shù) 以鍵值對的形式，通過`&`符號分隔開來
fragment	片段 `#`后面內(nèi)容常見于鏈接錨點

5.2、location對象屬性

location對象屬性	返回值
location.href	獲取或者設(shè)置整個URL
location.host	返回主機（域名）www.baidu.com
location.port	返回端口號，如果未寫返回空字符串
location.pathname	返回路徑
location.search	返回參數(shù)
location.hash	返回片段 #后面內(nèi)容常見于鏈接錨點

重點記?。?mark>href和search

需求：5s之后跳轉(zhuǎn)頁面

<body>
    <button>點擊</button>
    <p></p>
    <script>
        var btn = document.querySelector('button');
        var p = document.querySelector('p');
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                p.innerHTML = '您將在' + timer + '秒鐘之后跳轉(zhuǎn)到首頁';
                timer--;
            }

        }, 1000);
    </script></body>

5.3、location對象方法

location對象方法	返回值
location.assign()	跟href一樣，可以跳轉(zhuǎn)頁面（也稱為重定向頁面）
location.replace()	替換當前頁面，因為不記錄歷史，所以不能后退頁面
location.reload()	重新加載頁面，相當于刷新按鈕或者 f5 ，如果參數(shù)為true 強制刷新 ctrl+f5

<body>
    <button>點擊</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 記錄瀏覽歷史，所以可以實現(xiàn)后退功能
            // location.assign('http://www.itcast.cn');
            // 不記錄瀏覽歷史，所以不可以實現(xiàn)后退功能
            // location.replace('http://www.itcast.cn');
            location.reload(true);
        })
    </script></body>

5.4、獲取URL參數(shù)

我們簡單寫一個登錄框，點擊登錄跳轉(zhuǎn)到 index.html

<body>
    <form action="index.html">
        用戶名： <input type="text" name="uname">
        <input type="submit" value="登錄">
    </form></body>

接下來我們寫 index.html

<body>
    <p></p>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取幾個字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割為數(shù)組 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var p = document.querySelector('p');
        // 3.把數(shù)據(jù)寫入p中
        p.innerHTML = arr[1] + '歡迎您';
    </script></body>

這樣我們就能獲取到路徑上的URL參數(shù)

6、navigator對象

navigator 對象包含有關(guān)瀏覽器的信息，它有很多屬性
我們常用的是userAgent,該屬性可以返回由客戶機發(fā)送服務(wù)器的user-agent頭部的值

下面前端代碼可以判斷用戶是用哪個終端打開頁面的，如果是用 PC 打開的，我們就跳轉(zhuǎn)到 PC 端的頁面，如果是用手機打開的，就跳轉(zhuǎn)到手機端頁面

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 = "";     //電腦
 }

7、history對象

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

history對象方法	作用
back()	可以后退功能
forward()	前進功能
go(參數(shù))	前進后退功能，參數(shù)如果是 1 前進1個頁面如果是 -1 后退1個頁面

<body>
    <a href="list.html">點擊我去往列表頁</a>
    <button>前進</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        })
    </script></body>

感謝各位的閱讀，以上就是“JavaScript的BOM技術(shù)怎么用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript的BOM技術(shù)怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

JavaScript的BOM技術(shù)怎么用

1、BOM概述

1.1、BOM的構(gòu)成

2、window 對象的常見事件

2.1、窗口加載事件

2.1.1、區(qū)別

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

3、定時器

3.1、setTimeout()定時器

3.2、clearTimeout()停止定時器

3.3、setInterval()定時器

3.4、clearInterval()停止定時器

3.5、this指向

4、JS執(zhí)行機制

4.1、JS是單線程

4.2、一個問題

4.3、同步和異步

5、location對象

5.1、url

5.2、location對象屬性

5.3、location對象方法

5.4、獲取URL參數(shù)

6、navigator對象

7、history對象

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

1、BOM概述

2、window 對象的常見事件

2.1、窗口加載事件

2.1.1、區(qū)別

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

3、定時器

3.2、clearTimeout()停止定時器

3.4、clearInterval()停止定時器

3.5、this指向

4、JS執(zhí)行機制

4.1、JS是單線程

4.2、一個問題

5、location對象

5.2、location對象屬性

5.3、location對象方法

5.4、獲取URL參數(shù)

6、navigator對象

7、history對象