原生js 之 (BOM操作)
创始人
2024-02-09 17:10:32
0

BOM(浏览器对象模型)
Window对象对应着浏览器窗口本身,它的属性和方法通常被统称为BOM (浏览器对象模型)

BOM 提供了独立于内容而与浏览器窗口进行交互的对象。
BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是Window
BOM由一系列相关的对象组成,每一个对象都提供了很多方法和属性
Window是BOM的顶级对象,所有的对象都是由Window延伸出来的,BOM也可以称为window的子对象

BOM的作用

BOM提供了一组访问窗口对象的一些方法,例如:移动窗口位置,改变窗口大小,打开窗口与关闭窗口,弹出对话框,进行导航以及获取客户的一些信息,如浏览器的品牌版本,屏幕分辨率。BOM最强大的功能是它提供了一个访问HTML页面的入口:document 对象,通过document 对象入口可以使用DOM的强大功能。

Window对象
认识Window对象

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

在使用Window身上的方法和属性时,因为Window对象是全局对象,所以不需要在它的属性和方法上加上前缀 Window,可直接调用它们。(Window的直接后代可不加前缀 window) 例如:alert() 、prompt() 等
除Window直接后代以外的对象,则需要在它们的前面加上前缀 window对象的名字,例如document对象是window的直接后代不需要加前缀 ,但是document对象的后代却需要document 前缀,

注意:window下有一个特殊有属性,window.name 。 此属性会在声明变量时需要注意 变量不能是name
Window对象的事件
页面(窗口)加载事件 (2种)

window.onload是窗口(页面) 加载事件,当页面内容完全加载完成后在触发该事件(包括图像,html,css文件等)就调用处理函数。

有了 window.onload就可以把 js代码写到页面元素的上方,因为window.onload是等页面的内容加载完毕再去执行处理函数。传统的注册事件方式只能注册一次,后者会覆盖前者,而使用addEventListener则没有限制
window.onload=function(){};  //传统的注册事件方式 只能注册一个//使用addEventListener可能注册多个事件
window.addEventListener("load",function(){});

DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。

只支持IE9以上 浏览器
优点:应用在图片加载较多时,交互效果不能实现,必然会影响用户的体验,此时使用DOMContentLoaded事件比较合适。

//应用在图片加载较多时,交互效果不能实现。
document.addEventListener("DOMContentLoaded",function(){
})

调整窗口大小事件

window.onresize是调整窗口大小的加载事件,当调整窗口大小时触发事件并执行处理函数。

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

    

UI事件
UI事件指的是哪些不一定与用户操作有关的事件,UI事件 如下表所示
在这里插入图片描述
定时器 (两种)
window.setTimeout() 一次性定时器(炸弹定时器)
window.setInterval() 循环定时器
定时器属性回调函数:普通函数是按顺序执行,而回调函数在事件触发时,回头调用处理函数。
setTimeout() 一次性定时器
setTimeout() 这是一个回调函数

window.setTimeout(调用函数,[延迟的毫秒数]); 

注意

window 可以省略
调用函数可以直接写函数,或者函数名
延迟的毫秒数可省略不写则为 0,如果写则,必须以毫秒
因为平时使用定时器较多,可给定时器赋值一个标识



清除 一次性定时器

window.clearTimeout(定时器的标识符)

clearTimeout ( ) 方法取消,先前通过调用 setTimeout() 建立的定时器

window可以省略

clearTimeout里面的参数是定时器的标识符。

    

setInterval()循环定时器

window.setInterval(回调函数,[间隔的毫秒数])

setInterval() 在间隔时间中重复调用函数,
可省略 window
调用函数可以直接写函数,或者函数名
延迟的毫秒数可省略不写则为 0,如果写则,必须以毫秒
第一次执行也是间隔毫秒之后执行,之后每隔毫秒数就执行一次。

  


清除循环定时器

window.clearInterval(定时器的标识符) 

clearInterval()方法可取消,先前通过setInterval创建的循环定时器
window可以省略
里面的参数就是定时器的标识符
案例:倒计时
在这里插入图片描述
在这里插入图片描述

   
123

this的指向问题

一般情况下,this指向的是函数的调用者

全局作用域或者普通函数中this指向的是全局对象window(注意定时器的this指向的是window)

在方法中调用this,谁调用this ,this指向谁

构造函数中this指向构造函数的实例

    

location对象

window对象提供了一个location属性用于获取 或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象
如果想获取文档中的URL字符串,有四种方式:

document.location;
document.location.href;
document.URL;
document.loction.toString();

解析URL地址的组成

URL:http://www.w3c.com:80/index.jsp? name=jim&when=2021#first
解析:protocol://hostname:port/pathname ? search #hash

在这里插入图片描述
location对象可以改变浏览器的历史

location.assign(url) 跟window.href与window.location 效果一样
location.replace( url ) 替换当前页面 不能 单击前进和后退按钮 跳转页面
location.reload( force ) 重新加载页面 force为 true 时从服务器重载,force为false则从缓存中重载。

在这里插入图片描述

   

history对象 (前进与后退)
window对象提供的 history 对象 ,与浏览器历史记录进行交互。
在这里插入图片描述
history.length=0 可以确定用户是否一开始就打开了某个页面

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

if(history.length==0){//这是用户打开窗口后的第一个页面
}

screen对象(客户端屏幕信息)
screen对象包含有关客户端显示屏幕的信息,例如显示器的尺寸大小,颜色、位置等。

screenc对象具体支持的属性会随着浏览器及其版本的改变而发生变化。不过screen对象至少能支持如下属性。
在这里插入图片描述
navigator对象 (浏览器的相关信息)
通过navigator对象 可以检查操作系统、浏览器、安全策略、语言以及是否用cookie。
注意

navigator数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误。
浏览器无法报告晚于浏览器发布的新操作系统。

下面前端代码可以判断用户打开的是哪个端的页面,实现跳转。