JavaScript基础——BOM 浏览器对象模型

BOM概述

什么是BOM？

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
BOM

浏览器对象模型

把【浏览器】当做一个【对象】看待
BOM的顶级对象是window
BOM学习的是浏览器窗口交互的一些对象
BOM是浏览器厂商在各自浏览器上定义的，兼容性极差

BOM的构成

window对象是浏览器的顶级对象，他具有双重角色。
1.它是JS访问浏览器窗口的一个接口。
2.它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。

调用的时候可以省略window。

window对象的常见事件

窗口加载事件

window。onload() = function(){}
window.addEventListener('load',function(){})

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就会调用处理函数。


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

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等。
ie9以上才支持

调整窗口大小事件

window.onresize = function(){}
window.addEventListener('resize',function(){});

window.onresize 是调整串口大小加载的实践，但触发时就调用的处理函数。


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

两种定时器

window对象给我们提供了两个定时器方法，分别是：setTimeout()以及setInterval()，这两个定时器方法使用方式是一致的，只是在作用上前者执行一次结束，后者可以执行n次。下面只讲解setTimeout()

setTimeout()定时器

window.setTimeout(function(){}[,delay])

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。


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

setTime()这个调用函数我们也称为 回调函数callback，普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为 回调函数

停止setTimeout()定时器

window.clearTimeout(timeout ID)

1.window可以省略
2.里面的参数就是定时器的标识符。
clearTimeout()取消了之前通过调用setTimeout()建立的定时器

this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。

this的几个指向

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

JS执行机制

JS是单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务都需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题是：如果JS执行时间过长，这样就会造成渲染不连贯，导致页面渲染加载阻塞的感觉。

为了能解决这个问题，利用多核CPU的计算能力，HTML5提出WebWorker标准，允许JavaScript脚本创建多个线程，于是，JS出现了同步和异步。

同步

前一个任务结束后执行后一个任务，程序执行顺序与任务的排列顺序是一致的，同步的。

异步

在一个任务执行过程中，还可以同时进行多个任务。

两者本质区别：这条流水线上各个流程的执行顺序不同。

同步任务与异步任务

同步任务

同步任务都在主线程上执行。形成一个执行线。

异步任务

JS的异步任务是通过回调函数实现的。
一般而言，异步任务有以下三种类型。

ex(普通事件)ex 如click、resize()等。 *** ex(资源加载)ex 如load、error等。 *** ex(定时器)ex 包括setInterval()、setTimeout()等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

js执行过程

  1. 先执行执行线中的同步任务
  2. 异步任务（回调函数）放入任务队列中。
  3. 一旦执行栈中的所用同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于主线程不断重复获得任务、执行任务、再获取任务、再执行、所以这种机制被称为事件循环(event loop)

location对象

什么是location对象

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

URL

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

URL的一般语法格式为：

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

location对象的属性

location对象属性 返回值
location.href 获取或者设置整个URL
location.host 返回主机（域名） www.cnblogs.com
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段 #后面内容常见于链接 锚点
重点记住href和serch

location对象的方法

location对象方法 返回值
location.assign() 跟href一样，可以跳转页面（也称为重定向页面）
location.replace() 替换当前页面，因为记录历史，所以不能后退页面
location.reload() 重新加载页面，相当于刷新按钮或者f5如果参数为true 强制刷新 ctrl+f5

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

下面前端代码可以判断用户使用什么终端打开页面，实现跳转。

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

history 对象

window 对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对像包含用户（在浏览器窗口中），访问过的URL。

history 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能 参数如果是1 前进1个页面 如果是-1 后退一个页面
posted @ 2022-05-18 23:44  maplerain  阅读(43)  评论(0)  编辑  收藏  举报