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>