DOM編程系列之BOM我的分享

時間 2019-12-09

標籤 dom 編程系列 bom 我的分享欄目 HTML 简体版

原文原文鏈接

BOM

什麼是BOM

所謂BOM就是與瀏覽器相關的一系列對象,主要被用於管理瀏覽器窗口和瀏覽器窗口之間的通訊等功能
BOM主要是四個對象分別是:瀏覽器
- Window對象
- Navigator對象
- History對象
- Location對象
注意: BOM是沒有標準的在一些瀏覽器裏有,一些瀏覽器裏就沒有

window對象

window表示運行HTML頁面的瀏覽器窗口
window有兩個角色一個是做爲表明瀏覽器窗口的對象另外一個是Global對象(全局對象)
所謂的預約義函數仍是全局函數均可以經過window對象直接訪問,由於所爲的預約義函數指的就是全局對象的方法.
在全局做用域中定義的變量或者是對象都是window對象的屬性,在全局做用域中定義的函數都是window對象的方法
注意:window對象的屬性和方法在調用時 - 容許省略'window.'

示例代碼:app

<body>
<button id="btn">按鈕</button>
<script>
    // 1.window對象是瀏覽器窗口中的頂級(全局)對象

    // 全局變量 - window對象的屬性
    var v = 100;
    console.log(v);
    console.log(window.v);
    // 函數 - window對象的方法
    function fun(){
        console.log('this is function...');
    }
    fun();
    window.fun();

    // 刪除對象的屬性
    /*delete window.v;
    console.log(window.v);// 100*/

    // 2.window對象的屬性和方法在調用時 - 容許省略'window.'

    // 3.其餘5個BOM對象都是做爲window對象的屬性出現
    console.log(window.document);

    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        window.close();
    });


</script>
</body>

window對象的屬性

示例代碼:函數

<script>
    // BOM中其餘對象是做爲window對象的屬性存在
    console.log(window.navigator);
    console.log(window.location);
    console.log(window.history);
    console.log(window.document);
    // window對象的self屬性 - 表示window對象自己(是隻讀屬性)
    console.log(window);
    console.log(window.self);// 仍是window對象
    // window對象的innerWidth和innerHeight - 瀏覽器窗口的內部寬度和高度
    console.log(window.innerWidth, window.innerHeight);

</script>

window對象的方法

示例代碼:this

<body>
<!-- 點擊按鈕時，打開提示框 -->
<button id="btn">按鈕</button>
<div id="dialog"></div>

<script>
    // 提示框
    // window.alert('xxxxxx');
    // 肯定框
    // var flag = window.confirm('你肯定退出嗎？');
    // alert(flag);
    // 輸入框
    /*var result = window.prompt('請輸入你的用戶名:');
    alert(result);*/

    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        var dialog = document.getElementById('dialog');
        dialog.style.display = 'block';
    });

    /*
        * window.setTimeout()和window.clearTimeout()方法
          * 該組方法表示延遲執行
        * window.setInterval()和window.clearInterval()方法
          * 該組方法表示循環(週期)執行
     */

</script>
</body>

navigator對象

navigator對象就是判斷用戶的瀏覽器以及操做系統
經過navigator對象的userAgent屬性來判斷

示例代碼:操作系統

<body>
<script>
    console.log('瀏覽器的代碼名: ' + navigator.appCodeName);
    console.log('瀏覽器的名稱: ' + navigator.appName);
    console.log('瀏覽器的平臺和版本信息: ' + navigator.appVersion);
    console.log('運行瀏覽器的操做系統平臺: ' + navigator.platform);

    console.log(navigator.userAgent);

</script>
</body>

History對象

history對象提供一個屬性就是length
就是隻能獲得用戶曾經訪問過的網址的數量
history對象有三個方法分別是:
forward(): 表示前進
back(): 表示後退
go(): 是既有前進右有後退

定時器

延遲執行

延遲執行就是等一會在執行(經過設置的時間後在執行)

示例代碼:code

<body>
<script>
    console.log('第一個出現的...');
    /*
        setTimeout(function,delay)方法
          * 做用 - 設置一個定時器
          * 參數:
            * function - 表示延遲執行的代碼邏輯
            * delay - 表示延遲執行的時間,以毫秒爲單位
          * 返回值 - 表示當前定時器的標識
          * 注意 - 會打亂代碼默認的順序執行流程
     */
    var t = setTimeout(function () {
        console.log('一花一世界...');
    },500);
    console.log('應該是第三個出現的...');
</script>
</body>

週期執行

週期執行就是反覆執行不停的執行
只要設置後不中止或強制關閉就會一直執行
方法與延遲執行同樣同樣的

示例代碼:orm

<body>
<script>
    console.log('第一個出現的...');

    /*
        setInterval(function,delay)方法
          * 做用 - 設置一個週期執行的定時器
          * 參數:
            * function - 表示延遲執行的代碼邏輯
            * delay - 表示延遲執行的時間,以單位爲毫秒
          * 返回值 - 表示當前定時器的標識
     */
   /* setInterval(function () {
        console.log('一花一世界...');
    },1000);

    function fun() {
        console.log('一笑一人生...');
        setTimeout(fun,1000);
    }
    fun();*/

   // 自調函數方式
    (function fun() {
        console.log('一葉一孤城...');
        setTimeout(fun,1000);
    })();
    console.log('極樂世界...');
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。