js之浏览器对象模型bom

浏览器对象模型(BOM)

BOM概述

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

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

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

BOM的构成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FORDXjTK-1677570949539)(F:\大前端\笔记\js\API\img\BOM树.png)]

window 对象中的属性

属性	描述
closed	返回窗口是否已被关闭
defaultStatus	设置或返回窗口状态栏中的默认文本
document	对 Document 对象的只读引用
frames	返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个 或 标签
history	对 History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL
innerHeight	返回浏览器窗口的高度，不包含工具栏与滚动条
innerWidth	返回浏览器窗口的宽度，不包含工具栏与滚动条
localStorage	在浏览器中以键值对的形式保存某些数据，保存的数据没有过期时间，会永久保存在浏览器中，直至手动删除
sessionStorage	在浏览器中以键值对的形式存储一些数据，数据会在关闭浏览器窗口或标签页之后删除
length	返回当前窗口中 框架的数量
location	引用窗口或框架的 Location 对象，该对象中包含当前 URL 的有关信息
name	设置或返回窗口的名称
navigator	对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息
opener	返回对创建此窗口的 window 对象的引用
outerHeight	返回浏览器窗口的完整高度，包含工具栏与滚动条
outerWidth	返回浏览器窗口的完整宽度，包含工具栏与滚动条
pageXOffset	设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
pageYOffset	设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
parent	返回父窗口
screen	对 Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息
screenLeft	返回浏览器窗口相对于计算机屏幕的 X 坐标
screenTop	返回浏览器窗口相对于计算机屏幕的 Y 坐标
screenX	返回浏览器窗口相对于计算机屏幕的 X 坐标
screenY	返回浏览器窗口相对于计算机屏幕的 Y 坐标
self	返回对 window 对象的引用
status	设置窗口状态栏的文本
top	返回最顶层的父窗口

Window 对象及常见事件

• 所有浏览器都支持 window 对象,表示浏览器窗口。
  • 所有 JavaScript 全局对象
  • 函数以及变量均自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。
• HTML DOM 的 document 也是 window 对象的属性之一

浏览器的方法

方法	描述
alert()	在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮
atob()	解码一个 base-64 编码的字符串
btoa()	创建一个 base-64 编码的字符串
blur()	把键盘焦点从顶层窗口移开
clearInterval()	取消由 setInterval() 方法设置的定时器
clearTimeout()	取消由 setTimeout() 方法设置的定时器
close()	关闭某个浏览器窗口
confirm()	在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮
createPopup()	创建一个弹出窗口，注意：只有 IE 浏览器支持该方法
focus()	使一个窗口获得焦点
getSelection()	返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置
getComputedStyle()	获取指定元素的 CSS 样式
matchMedia()	返回一个 MediaQueryList 对象，表示指定的媒体查询解析后的结果
moveBy()	将浏览器窗口移动指定的像素
moveTo()	将浏览器窗口移动到一个指定的坐标
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
print()	打印当前窗口的内容
prompt()	显示一个可供用户输入的对话框
resizeBy()	按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素
resizeTo()	将窗口的大小调整到指定的宽度和高度
resize()	调整窗口大小加载事件，窗口大小改变触发
scrollBy()	将窗口的内容滚动指定的像素
scrollTo()	将窗口的内容滚动到指定的坐标
setInterval()	创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式
setTimeout()	创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次
stop()	停止页面载入
postMessage()	安全地实现跨源通信

浏览器窗口加载事件

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

//传统注册方式
window.onload = function(){}
//事件监听注册方式
window.addEventListener("load",function(){})

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用 户的体验，此时用 DOMContentLoaded 事件比较合适

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

对比

load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等

DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

弹出框

提示框alert()

语法

window.alert('提示文本')
//window对象可以省略

弹出一个提示框

表现形式：一个提示文本+确定按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Td8EylJc-1677570949540)(F:\大前端\笔记\js\API\img\弹出框.png)]

返回值：undefined

输入框prompt()

语法

window.prompt('提示文本')
//window对象可以省略

表现形式：一个提示文本+一个输入框+一个确定按钮+取消按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0w4s2qJe-1677570949541)(F:\大前端\笔记\js\API\img\提示框.png)]

返回值：当点击确定的时候返回值就是用户的输入的内容，当点击取消按钮的时候返回值是null

询问框confirm()

语法

window.confirm('提示文本')
//window对象可以省略

表现形式：一个提示文本+一个确定按钮+一个取消按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZDnBtC5w-1677570949541)(F:\大前端\笔记\js\API\img\询问框.png)]

返回值：当点击确定的时候返回true，当点击取消的时候返回false。

获取浏览器可视窗口尺寸

可视区域是指能看得见的区域，即在浏览器中能看到页面的区域（高度与宽度）。

获取窗口宽度

window.innerWidth

获取窗口高度

window.innerHeight

注意：获取的宽度和高度是包含滚动条在内的。

浏览器卷去

scrollTo()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KcJbxL6s-1677570949542)(F:\大前端\笔记\js\API\img\scroll.png)]

浏览器卷去的尺寸：

• 浏览器本身其实是不动的，滚动的时候应该是页面被滚走了。

• 研究浏览器卷去的尺寸其实就是研究页面被滚走的尺寸

• 要求html文件中必须有doctype标签才可正常获取：

  • 获取页面纵向卷去的尺寸：document.documentElement.scrollTop
  • 获取页面横向卷去的尺寸：document.documentElement.scrollLeft

• 要求html文件没有doctype标签的时候:

  • 获取页面纵向卷去的尺寸:document.body.scrollTop
  • 获取页面横向卷去的尺寸:document.body.scrollLeft

• 兼容写法：不管有没有doctype都能成功获取

  • 获取页面纵向卷去的尺寸:var 变量名 = document.documentElement.scrollTop || document.body.scrollTop
  • 获取页面横向卷去的尺寸:var 变量名 = document.documentElement.scrollLeft || document.body.scrollLeft

浏览器历史记录

研究历史记录其实就是模仿浏览器上的前进和回退按钮

要求的前提是：页面必须有历史记录才行

前进和回退

• 当点击前进按钮的时候需要去到2页面
  • 前进：window.history.forward()
  • 回退：window.history.back()
• 去到指定的历史记录的页面：window.history.go(数字)

​ 写数字0：去到本页面，其实刷新的意思

​ 写正整数：比如写的是1，意思就是前进1页，写的是2，意思就是前进2页

​ 写负整数：比如写的是-1，意思就是回退1页，写的是-1，意思就是回退2页

浏览器常用事件

load事件

语法

window.onload = function(){
                    //代码
                }

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

resize事件

语法

window.onresize = function(){
                    //代码
                }

调整窗口大小加载事件，页面尺寸发生改变，就会自动执行function中的代码

scroll事件

语法

window.onscroll = function(){
                    //代码
                }

只要滚动条动了，就会执行function中的代码

浏览器地址栏

href

• 在window内有一个location属性，他是一个对象数据类型，里面存储了一些和地址栏相关的信息。

• window.location.href:单独拿到网址。

• window.location.href = ‘网址’==重新给href进行复制操作，可以实现达到网页跳转的效果，在本窗口跳转。

• 语法

   window.location.href = '网址'
  

reload()【刷新】

重新加载

window.location.reload()

定时器

setTimeout()【延时定时器】

1. window对象在调用的时候可以省略
2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 ‘函数名()’
4. 页面中可能有很多的定时器，我们可以给定时器起名字

语法

window.setTimeout(调用函数, 延时时间)

例子

setTimeout(function() {
    console.log('我过了1000ms，也就是1s')
}, 1000)
//也可以  这么写
 function callback() {
            console.log('时间到了')
        }
//调用定时器
        var timer1 = setTimeout(callback, 2000)
        var timer2 = setTimeout(callback, 6000)

清除定时器clearTimeout()

语法

 window.clearTimeout(timeoutID)
 //timeoutID   定时器名字

setInterval()【循环定时器】

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

语法

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

清除定时器clearInterval()

语法

 window.clearInterval(timeoutID)
 //timeoutID   定时器名字

两个定时器区别

• setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
• setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

存储

本地存储locationStorage

本地存储：将程序中产生的一些数据存储到本地

1. localStorage永久存储，你只要不手动删除，就一直存在
2. 存储据的语法：window.localStorage.setItem(key，value)
3. 获取储据的语法：window.localStorage.getItem(key)
4. 修改数据的语法和存的语法是一样的。
   • 键名第一次出现叫做存，第二次出现叫做修改
5. 删除数据的语法：window.localStorage.removeItem(‘键名’)
6. 一键清空：window.localStorage.clear()

• 特点：
  • 永久存储
  • 支持跨页面通讯，也就是在其他页面同样可以获取到你存好的数据。
  • 只能存储字符串类型的数据，不能存储复杂数据类型

本地存储sessionStorage

1. localStorage会话级别存储，生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过它存储的数据也就被清空了。
2. 存储据的语法：window.sessionStorage.setItem(key，value)
3. 获取储据的语法：window.sessionStorage.getItem(key)
4. 修改数据的语法和存的语法是一样的。
   • 键名第一次出现叫做存，第二次出现叫做修改
5. 删除数据的语法：window.sessionStorage.removeItem(‘键名’)
6. 一键清空：window.sessionStorage.clear()

• 特点：
  • 临时存储，会话级别，页面（浏览器）关闭就没了
  • 虽然支持跨页面通讯，但是要求必须是从当前页面跳转过去的并且是当前窗口打开才行。
  • 只能存储字符串类型的数据，不能存储复杂数据类型。

cookie存储

1. 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
2. Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
   • 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
   • 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
3. Cookie默认也是会话级别，浏览器关闭数据就没了
4. Cookie可以手动设置过期时间。
5. 因为cookie原生接口不好，需要自己封装函数

this和target

this

• this是函数体内的内置对象（只能出现在函数体内）
• this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this 的最终指向的是那个调用它的对象
• 与事件体连用，代表触发事件的元素本身
• 与普通函数连用(除了事件体,和构造函数),代表调用该方法的前缀对象
• 几个this指向
  1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例

bind

bind:修改this指向的函数,它是函数对象的函数
函数对象.bind(修改的this指向)

var oBox = document.querySelector("#box")
document.onclick = function(){
        this.style.display = "none"
    }.bind(oBox)

target

target 事件属性返回触发事件的元素。
我们可以认为target事件，会自动判断我们点的是哪个元素。

e.target 和 this 的区别：

• this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
• e.target 是事件触发的元素（对象）