【JavaScript】DOM之BOM

時間 2019-12-09

原文原文鏈接

BOM

1.BOM是什麼

提供了獨立頁面內容，與瀏覽器相關的一系列對象，管理窗口之間通訊瀏覽器

2.Window對象

具備雙重角色，對象便是容許JS訪問瀏覽器窗口的一個對象，和ECMAScript規範中的Global全局對象，在瀏覽器運行JS邏輯時，在全局做用域定義的對象，變量和函數app

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    form.addEventListener('submit',function (event) {
        console.log('該表單已被提交');
    });
</script>
</body>

window對象的屬性

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

window對象的方法

<style>
        #qh {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            display: none;
        }
    </style>
</head>
<body>
<!-- 點擊按鈕時，打開提示框 -->
<button id="btn">按鈕</button>
<div id="qh"></div>

<script>
    // 提示框
    // window.alert('xxxx');
    // 肯定框
    // 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('qh');
        dialog.style.display = 'block';
    });

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

</script>

Navigator對象

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

    console.log(navigator.userAgent);

</script>
</body>

定時器

延時執行

setlnterval（）方法設置個定時器，將該定時器只執行一次函數函數

`<script>
    console.log('this is message...');

    /*
        setTimeout(function, delay)方法
        * 設置個定時器
        * 參數
          function-表示延遲執行的代碼邏輯
          delay-表示延遲執行時間，單位爲毫秒
        * 返回值-表示當時器的標識
        * 注意-打亂代碼默認的順序執行流程
     */
    var t = setTimeout(function(){
        console.log('you my timeout...');
    },10000);

    // clearTimeout(t);

    console.log('you my message too...');

</script>`

週期執行

以setlnterval()方法，重複調用個函數或執行段代碼this

<script>
    console.log('you my message...');

    /*
        setInterval(function, delay)方法
        * 設置個週期執行的定時器
        *
          function - 表示延遲執行的代碼邏輯
          delay - 表示延遲執行的時間，單位爲毫秒
        * 返回值 - 表示當前定時器的標識
     */
    /*setInterval(function(){
        console.log('you my interval...');
    },1000);*/


    /*function fun(){
        console.log('you my interval...');
        setTimeout(fun,1000);
    }
    fun();*/
    (function fun(){
        console.log('you my interval...');
        setTimeout(fun,1000);
        // setTimeout(arguments.callee,1000);
    })();

    console.log('this is message too...');

</script>

相關標籤/搜索

每日一句

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