十.浏览器对象模型BOM

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

DOM文档对象模型:

• DOM 就是把「文档」当做一个「对象」来看待
• DOM 的顶级对象是 document
• DOM 主要学习的是操作页面元素
• DOM 是 W3C 标准规范

BOM浏览器对象模型:

• 把「浏览器」当做一个「对象」来看待
• BOM 的顶级对象是 window
• BOM 学习的是浏览器窗口交互的一些对象
• BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差中
• BOM 包含 DOM

一.window对象

window 是客户端浏览器对象模型的基类，window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。

双重角色:

• 1.它是 JS 访问浏览器窗口的一个接口。
• 2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法（全局变量=window 的属性：“window.变量名”就能打印出该变量的值，同样，函数则变成 window 的方法）。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt()等。

1.1 使用系统对话框-三个人机交互的方法

• 1.alert()：确定提示框。由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。如果没有指定参数，则弹出一个空的对话框。

• 2.confirm()：选择提示框。。由浏览器向用户弹出提示性信息，弹出的对话框中包含两个按钮，分别表示“确定”和“取消”按钮。如果点击“确定”按钮，则该方法将返回 true；单击“取消”按钮，则返回 false。confirm() 方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个空的对话框。

• 3.prompt()：输入提示框。可以接收用户输入的信息，并返回输入的信息。prompt() 方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个没有提示信息的输入文本对话框。

      var user = prompt("请输入您的用户名");
      if (!!user) {
        //把输入的信息转换为布尔值
        var ok = confirm("您输入的用户名为：\n" + user + "\n 请确认。"); //输入信息确认
        if (ok) {
          alert("欢迎您：\n" + user);
        } else {
          //重新输入信息
          user = prompt("请重新输入您的用户名：");
          alert("欢迎您：\n" + user);
        }
      } else {
        //提示输入信息
        user = prompt("请输入您的用户名：");
      }
复制代码

1.2 窗口事件

1.2.1 窗口加载事件 window.onload

• window.onload 是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等),就调用的处理函数。
• 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
• window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。如果使用 addEventListener 则没有限制

window .onload = function (){
//在里面写js代码
}
//或者
window.addEventListener ("load" , function() { 
//在里面写js代码
});
复制代码

1.2.2 窗口加载事件 DOMContentLoaded

• DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表，图片，flash 等等。
• 如果页面的图片很多的话,从用户访问到 onload 触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。
• DOMContentLoaded 是 DOM 加载完毕，不包含图片 flash css 等就可以，执行加载速度比 load 更快一些
• le9 以上才支持;

document.addEventListener("DOMContentLoaded", function () {

});
复制代码

1.2.3 调整窗口大小事件resize

• window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数。
• 注意 ∶

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

window.onresize = function () {};
window.addEventListener("resize", function () {});
复制代码

1.3 定时器

window 对象包含 4 个定时器专用方法，说明如下表所示，使用它们可以实现代码定时执行，或者延迟执行，使用定时器可以设计演示动画。

setTimeout(回调函数,延时时间(毫秒)); 倒计时结束之后调用函数

clearTimeout(定时器名字)： 清除 setTimeOut 的定时器；

setInterval(回调函数,间隔时间)： 每间隔多少时间就执行一次回调函数

clearInterval(定时器名字)： 清除 setInterval 的定时器；

区别：

• setTimeout() 方法主要用来延迟代码执行，而 setInterval() 方法主要实现周期性执行代码。它们都可以设计周期性动作，其中 setTimeout() 方法适合不定时执行某个动作，而 setInterval() 方法适合定时执行某个动作。

• setTimeout() 方法不会每隔固定时间就执行一次动作，它受 JavaScript 任务队列的影响，只有前面没有任务时，才会按时延迟执行动作。而 setInterval() 方法不受任务队列的限制，它只是简单的每隔一定的时间就重复执行一次动作，如果前面任务还没有执行完毕，setInterval() 可能会插队按时执行动作。

二.navigator对象

navigator 对象存储了与浏览器相关的基本信息，如名称、版本和系统等。通过 window.navigator 可以引用该对象，并利用它的属性来读取客户端基本信息。

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转:

      if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
      Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
      |Symbian|Windows Phone)/i))) {
       window.location.href = ""; //手机
      }
      else {
       window.location.href = ""; //电脑
      }
复制代码

三.location 对象

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

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

3.1 location对象的属性

以该url举例：www.baidu.com:8080/web/javascr…

3.2 自定义查询字符串参数返回对象

//假设当前URL：'http://www.maxiaofei.com/Web/test.js?name=mafei&age=24&sex=m'

function getQueryObj(){
    let location = window.location;
    let queryStr = location.search.length > 0 ? location.search.substring(1) : '';
    let obj = {},item;
    let queryArr = queryStr.length > 0 ? queryStr.split('&') : []
    
    for(let i=0;i<queryArr.length;i++){
        item = queryArr[i].split('=');
        obj[item[0]] = item[1]
    }

    return obj
}

getQueryObj()
//=》{
    name: 'maxiaofei',
    age: 24,
    sex: 'm'
}
复制代码

3.3 修改location

每次修改 location 的 hash　以外的任何属性，页面都会以新URL重新加载

window.location = 'http://www.maxiaofei.com'

location.search = '?name=mafei&age=18'

location.hostname = 'www.baidu.com'

location.pathname = 'web/html/a.html'

location.port = '1234'
复制代码

除了 hash 值以外的任何修改，都会在浏览器的历史记录中生成一条新的记录，可以通过浏览器的回退按钮导航到前一个页面，可以通过 replace() 方法禁止这种行为，使用 replace 打开的页面，不能返回到前一个页面

// 尝试在浏览器控制台输入如下代码，浏览器将不支持回退
location.replace('http://www.baidu.com')
复制代码

3.4 重新加载

通过 location.reload() 方法可以重新加载页面

location.reload() : 重新加载（有可能会从缓存中加载）

location.reload(true)： 重新加载（从服务器重新加载）

四. history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起，因为 history 是 window 对象的属性，因此每个浏览器窗口，每个标签乃至每个框架，都有自己的 history对象与特定的 window 对象关联

history 常用的有如下3个方法和一个属性:

1. history.go()

接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转

history.go('maixaofei.com')		//向前或者向后寻找指定字符串页面，没有找到则无响应
history.go(3)	//向前跳转三个记录
history.go(-1)	//向后跳转一个记录
复制代码

2. history.forward()

向前跳转一个页面

3. history.back()

向后跳转一个页面

4. history.length

获取历史记录数，如果是打开的第一个页面，则 history.length == 0，可以用该属性来判断当前打开的网页是不是该窗口打开的首个网页

history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

五.screen对象是用处不大的对象

它基本上只用来表明客户端的能力，其中包括了浏览器窗口外部的显示器信息，比如像素和宽高等，常用属性如下所示：

availHeight    //屏幕的像素高度减去系统部件的高度

availWidth     //屏幕的像素宽度减去系统部件的宽度

availLeft        //未被系统部件占用的最左侧像素值

availTop       // 未被系统部件占用的最上侧像素值

height          // 屏幕像素高度

width           // 屏幕像素宽度
复制代码

六.其他

6.1 元素可视区client

Element.clientTop 和 Element.clientLeft 获取可视区域的偏移值(实际上就等于元素上下 border 值) 四舍五入（整数）后的结果;

Element.clientWidth 和 Element.clientHeight 获取可视区域（padding + 元素内容区域的宽高，不包含滚动条）的宽高

6.2 元素偏移量 offset(块级元素,只读属性)

1. Element.offsetParent

Element.offsetParent 是一个只读属性， 返回当前元素最近的一个父级定位元素。

2. Element.offsetLeft && Element.offsetTop

Element.offsetLeft 和 Element.offsetTop 是一个只读属性，返回当前元素相对于父级元素左侧和上侧的偏移量。

3. Element.offsetWidth && Element.offsetHeight

Element.offsetWidth 和 Element.offsetHeight 是一个只读属性，返回一个元素布局的宽高（元素布局包括： border、滚动条、padidng、内容块）， 该属性返回的值为一个四舍五入的整数.

6.2.1 offset 与 style 区别

offset：

• offset 可以得到任意样式表中的样式值
• offset 系列获得的数值是没有单位的
• offsetWidth 包含 padding+border+width·
• offsetWidth 等属性是只读属性，只能获取不能赋值·

所以，我们想要获取元素大小位置，用 offset 更合适

style：

• style 只能得到行内样式表中的样式值
• style.width 获得的是带有单位的字符串
• style.width 获得不包含 padding 和 border 的值
• style.width 是可读写属性，可以获取也可以赋值

所以，我们想要给元素更改值，则需要用 style 改变·

6.3 scroll(用于对可滚动元素进行求值)

6.3.1 Element.scrollTop 和 Element.scrollLeft

用于获取或设置元素被卷起的宽高（子元素顶部或左侧到当前元素可视区域顶部或左侧的距离）

补充：

• 对于不可滚动的元素 Element.scrollTop 和 Element.scrollLeft 值为 0
• 如果给 scrollTop（scrollLeft） 设置的值小于0，那么 scrollTop（scrollLeft） 的值将变为0。
• 如果给 scrollTop（scrollLeft） 设置的值大于元素内容最大宽度，那么 scrollTop（scrollLeft） 的值将被设为元素最大宽度（高度）。

6.3.2 Element.scrollWidth && Element.scrollHeight

• Element.scrollWidth 和 Element.scrollHeight 是只读属性， 表示元素可滚动区域的宽高； 实际上又等于 clientHeight/clientWidth + 未显示在屏幕中内容的宽高;
• 它们的值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。
• 测量方式与 clientWidth(clientHeight) 相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。 它还可以包括伪元素的宽度，例如::before或::after。
• 如果元素的内容可以适合而不需要水平滚动条，则其 scrollWidth 等于 clientWidth; (最小值为元素的可视区域宽高： clientWidth (clientHeight))