JavaScript之BOM对象（上）

前言

接着上回的Dom对象的来讲，这次是BOM对象，BOM 即浏览器对象模型。它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window.，BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

好奇吗？开始我也好奇，所以我就去学习探索了一些，简单的说一些我探索的成果吧！

一、BOM的相关介绍

1.BOM与dom的区别

DOM就是把「文档」当做个「对象」来看待，而BOM把「浏览器」当做一个「对象】来看待，DOM 的顶级对象是document，BOM的顶级对象是window

DOM主要学习的是操作页面元素，BOM学习的是浏览器窗口交互的一些对象
 DOM是W3C标准规范，BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

2.BOM的构成

BOM比dom更大

window对象是浏览器的顶级对象,它具有双重角色。
1.它是JS访问浏览器窗口的一一个接口。

2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window ,前面学习的对话框都属于window对象方法.如alert0、prompt0等。
注意: window下的一个特殊属性window.name

3. window对象的常见事件

3.1 窗口加载事件
window .onload = function0) (}
或者window . addEventListener ("load"，function(0);
window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
注意:

•  有了window.onload就可以把JS代码写到页面元素的上方, 因为onload是等页面内容全部加载完毕，再去执行处理函数。
•   window.onload传统注册事件方式只能写-次,如果有多个,会以最后一个window.onload 为准。
•  如果使用addeventlistener则没有限制

DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片, flash等等。
le9以上才支持
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间交互效果就不能实现,必然影响用户的体验，此时用DOMContentl oaded事件比较合适。
两者区别：

• load等页面内容全部加载完毕，包含贝面dom元素图片flash
• DOMContentLoaded 是DOM 加载完毕，不包含图片falsh css 等就可以执行加载速度比load更快点

3.2 调整窗口大小事件
window. onresize = function() {}
window. addEventLi stener（‘resize", function() (});
window. onresize是调整窗口大小加载事件,当触发时就调用的处理函数。
注意:

•  只要窗口大小发生像素变化。就会触发这个事件。
•  .我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

二、.定时器

1. setTimeout()定时器

window . setTimeout (调用函数，[延迟的毫秒数]);
setTimeout0方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。即到时间才执行，就如定时炸弹，时间到了就开始响了
 而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。
简单理解:回调,就是回头调用的意思。上- 件事干完,再回头再调用这个函数。
以前我们讲的element.onlick= function0}或者entaddetitener('elick", fn);里面的函数也是回调
函数。

2. 停止setTimeout()定时器

window. clearTimeout (定时器名字)
clearTimeout 0方法取消了先前通过调用setTimeout 0)建立的定时器。
 

3. setInterval()定时器

window .setInterval (回调函数:[间隔的毫秒数]);
setlnterval)方法重复调用一个函数,每隔这个时间,就去调用一-次回调函数。

4 .停止setInterval()定时器

window. clearInterval (intervalID) ;
clearInterval ()方法取消了先前通过调用setInterval ()建立的定时器。

注意:

•  window可以省略。
•  这个调用函数可以直接写数,或者写函数名或者采取字符串‘函数名0"三种形式。 第三种不推荐
•  延迟的毫秒数省略默认是0 ,如果写,必须是毫秒。
•  因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。（起名字）

两者区别：
  setTimeout 
延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器
 setInterval
每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
 5.定时器案例-页面时钟

css样式

<style>
        .hours,
        .minter,
        .s {
            margin: 20px 10px;
            float: left;
            background-color: black;
            color: #fff;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        
        .d {
            margin: 100px auto;
        }
    </style>

body内容-html和js

  <div></div>
    <button class="no2">停止/开启</button>
    <!-- <button class="no1"></button> -->
    <script>
        // var no1 = document.querySelector('no1');
        var div = document.querySelector('div');
        var no2 = document.querySelector('.no2');

        getTime();

        var a = setInterval(getTime, 1000);

        function getTime() {
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            month = month < 10 ? '0' + month : month;
            var date = time.getDate();
            date = date < 10 ? '0' + date : date;
            var day = time.getDay();
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var hours = time.getHours();
            hours = hours < 10 ? '0' + hours : hours;
            var minutes = time.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes;
            var seconds = time.getSeconds();
            seconds = seconds < 10 ? '0' + seconds : seconds;
            var str = year + '年' + month + '月' + date + '日 ' + week[day] + ' ' + hours + '时' + minutes + '分' + seconds + '秒';
            div.innerHTML = str;

        }
        var flag = 0;

        no2.addEventListener('click', function() {
            if (flag == 0) {
                clearInterval(a);
                flag = 1;

            } else if (flag == 1) {
                a = setInterval(getTime, 1000);
                flag = 0;
            }

        })
    </script>

三、 location、navigator、history对象

1.location对象

window对象给我们提供了-个location属性用于获取或设置窗体的URL ,并且可以用于解析URL。因为这个属性返回的是一个对象所以我们将这个属性也称为location对象。

1.1 URL
统-资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式为:
protocol://host [:port]/path/ [?query]#fragment
http: //www. itcast . cn/ index. html 7name= andybage=18# link

组成                                           说明
protocol                           通信协议常用的htp.fp.maito等
host                              主机(域名) wwwithima.comm
port                            端口号可选，省略时使用方案的默认端口如http的默认端口为80
path                     路径由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query                  参数以键值对的形式通过&符号分隔开来
fragment                 片段#后面内容常见于链接锚点

1.2 location对象的属性
location.href          获取或者设置整个URL
location. search     返回参数
重点记住: href和search

2. navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客户机发送服务器的useragent头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转
if ( (navigator . usexAgent. match (/ (phone IpadlpodI iPhone liPodI iosI iPad lAndroidI
Mobile IBlackBerryl IEMobile IMQOBrowser I JUCI Fennec IwOSBrowser IBrowserNG| Webos
I Symbian IWindows Phone)/1))) {
window. location.href = “";
//手机
} else {
window. location.href =”";
//电脑

用来判断使用哪个浏览器或手机端打开 

  3. history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL.
history对象方法      作用
back（)         可以后退功能
forward()       前进功能
go(参数)        前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

4. 跳转网页的案例

<body>
    <button class="b1">去往IT教程吧-首页</button>
    <button class="b2">去往IT教程吧-技术博文</button>
    <script>
        var b1 = document.querySelector('.b1');
        var b2 = document.querySelector('.b2');
        b1.addEventListener('click', function() {
            location.assign('https://www.itjc8.com/');
        })
        b2.addEventListener('click', function() {
            location.assign('https://www.itjc8.com/forum-83-1.html');
        })
    </script>