BOM学习

目录

一、BOM概述

1、什么是BOM

DOM和BOM的比较 

2、BOM的构成

二、window对象的常见事件

window.load事件

DOMContentLoaded事件

Onresize事件

三、定时器

1.1  setTimeout( ) 定时器

1.2  clearTimeout( ) 清除定时器

2.1  setInterval( ) 定时器

2.2  clearInterval( )清除定时器

四、小练习

发送短信

活动倒计时

---

一、BOM概述

1、什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM缺乏标准，Javascript语法的标准化组织是ECMA,DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

DOM和BOM的比较 

DOM	BOM
文档对象模型	浏览器对象模型
DOM就是把文档当做一个对象来看待	把浏览器当做一个对象来看待
DOM的顶级对象是document	BOM的顶级对象是window
DOM主要学习的是操作页面元素	BOM学习的是浏览器窗口交互的一些对象
DOM是W3C标准规范	BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

2、BOM的构成

 window对象是浏览器的顶级对象，具有双重角色。

1.它是JS访问浏览器窗口的一个接口。

2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

<script>
        var num=10;
        console.log(num);
        console.log(window.num);

        function fn(){
            console.log(11);
        }
        fn();//结果输出11
        window.fn();//结果输出11
</script>

顶级对象window，在调用的时候可以省略，比如：alert,promt。

 alert(11);

window.alert(11);

注意：window下的一个特殊属性window.name 

二、window对象的常见事件

<button>点击</button>
    <script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            alert('点击我');
        })
    </script>