javascript知识点——BOM部分

末蓝、 2021-07-25 16:11 485阅读 0赞

# 什么是BOM？ #

BOM是browser object model的缩写，简称浏览器对象模型。  
主要处理浏览器窗口(window)和框架(iframe)，描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，不过通常浏览器特定的Javascript扩展都被看做BOM的一部分。扩展如下：  
1.1 弹出新的浏览器窗口  
1.2 移动/关闭浏览器窗口以及调整窗口大小  
1.3 提供web浏览器详细信息的定位对象  
1.4 提供用户屏幕分辨率详细信息的屏幕对象  
1.5 对cookie的支持  
1.6 IE扩展了BOM，加入了ActiveXObject类，可以通过Javascript实例化ActiveX对象

# BOM的核心？ #

Window对象是BOM的顶层(核心)对象，玩转BOM，就是玩转window的属性和方法。  
Window对象它具有双重角色，既是通过Js访问浏览器窗口的一个接口，又是一个全局对象。这意味着在网页中定义的任何对象，变量和函数，都是window的属性。

# BOM的组成 #

Window Javascript层级中的顶层对象表示浏览器窗口  
Navigator包含客户端浏览器的信息  
History包含浏览器窗口访问过的URL  
Location包含了当前URL的信息  
Screen包含客户端显示屏的信息

# 关于浏览器的几个参数 #

### Clientheight Clientwidth ###

document.documentElement.clientheight/clientwidth(不包含滚动条)

### innerheight innerwidth ###

window.innerheight/window.innerwidth(包含滚动条)

innerheight 返回窗口的文档显示区的高度  
innerwidth 返回窗口的文档县市区的宽度

### pageXOffset pageYOffset ###

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的X位置  
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的Y位置

# 淘宝网页的懒加载样式 #

注意几个参数  
1.1 一个元素距离文档顶部的距离：dom元素.offsetTop dom元素.offsetWidth  
1.2 窗口显示区域的宽高：window.innerHeight window.innerWidth  
1.3 窗口滚动的位置： window.pageYOffset window.pageXOffset  
当 dom元素.offsetTop <= window.pageYOffset + window.innerHeight的时候，则此元素需要被加载了。

# ScreenLeft screenTop screenX screen #

只读整数。声明了窗口的左上角在屏幕上的X坐标和Y坐标。IE Safari Chrome 和Opera 支持 screenLeft 和 screenTop,而Chrome friefox 和safari支持 screen 和 screen

# iframe标签 #

通过 iframe标签嵌套的元素，如果想要获取父级内容则需要通过window.parent  
如果是想要获取最顶级的祖先级的内容则需要通过window.top来进行获取

# 几种浏览器的弹窗 #

1.  Alert()，window.alert()弹窗提示信息，显示带有一段消息和一个确认按钮的警告框
2.  Confirm() window.confirm(‘提示信息’) 确认窗口，显示带有一段消息以及确认按钮和取消按钮的对话框
3.  Prompt() window.prompt();弹窗输入框,显示可提示用户输入的对话框
4.  Onberforeunload window.οnbefοreunlοad=function()\{\}; 关闭浏览器时弹窗提示信息

# 几种浏览器的操作 #

Close() 关闭浏览器窗口  
Open() 打开一个新的浏览器窗口或者找一个已命名的窗口。Window.open(URL,name,features,replace);  
ResizeBy() 按照指定的像素调整窗口的大小  
ResizeTo() 把窗口的大小调整到指定的宽度和高度  
ScrollBy() 按照指定的像素值来滚动内容  
scrollTo() 把内容滚动到指定的坐标  
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式  
setTimeout() 在指定的毫秒数后调用函数或计算表达式

# history模式 #

History历史模式， history.length历史记录的长度  
History.back() 回退到前一个页面 history.forward() 前进一个页面  
History.go(数字) 切换到某一个页面中，数字为正，则前进，数字为负，则后退。

# URL（资源定位器） #

Location url(资源定位器)  
https://www.baidu.com/s?ie=utf-8\#adfa  
https:是协议，协议一般分为 http 和https ；https对应的默认端口号是443；http对应的默认端口号是80；  
www.baidu.com是主机名或者域名  
/s 代表的是路径  
？后面的内容就是一个个的参数，就是传递后后端的参数。  
\# 后面对应的内容就是锚点。又称为hash值(哈希值)  
获取协议的方式：location.protocol  
获取主机名的方式：location.host  
获取路径的方式：location.pathname  
获取传递参数的方式：location.search  
获取哈希值锚点的方式：location.hash  
整个URL网址的修改方式：location.href=https://www.taobao.com

Location.assign(‘https://www.baidu.com’);结果就是在当前页面中加载百度网页  
Location.reload(‘参数’);重新加载当前文档，参数可选，不填或者填false则取浏览器缓存的文档  
Location.replace();用新的文档替换当前文档。不能通过history.back()返回过去。