关于前端学习:Javascript操作BOM的API

理解 BOM

• BOM (Browser Object Model) 是浏览器对象模型
• 浏览器提供了一套可应用 JS 操作浏览器窗口的属性与办法
• BOM 的顶级对象是 window，每个页面就有一个 window，所有全局变量页都定义在 window 下
• 操作 BOM 相干 API 都是以 window.xxx格局，个别可省略 window

浏览器可视窗口大小操作 API(蕴含滚动条尺寸)

可视窗口的宽度：window.innerWidth
可视窗口的高度：window.innerHeight

返回值是以后浏览器窗口可视区域的大小

浏览器弹出层 API(可在浏览器弹出一个弹窗显示一些信息)

正告提示框弹出层

• 特点：弹出一个正告提示框，提示框内显示一些文本，并且有一个确定按钮

语法：window.alert('提醒文本会变量')
返回值：点击确定后，返回 undefined

抉择提示框弹出层

• 特点：弹出一个抉择提示框，提示框内显示一些文本，并且有一个确定按钮和一个勾销按钮

语法：window.confirm('提醒文本会变量')
返回值：点击确定后，返回 true，点击勾销后，返回 false

输出提示框弹出层

• 特点：弹出一个输出提示框，提示框内显示一些文本，并且有一个确定按钮和一个勾销按钮，还有一个输入框

语法：window.prompt('提醒文本会变量')
返回值：输入框内有内容，点击确定返回输入框内的内容，输入框内无内容，点击确定按钮返回值空字符串，输入框无论是否有内容，点击勾销返回值都是 null

地址栏 API

浏览器地址栏地址形成局部

• 传输协定：如 http、https、ftp 等
• 域名(服务器地址)：如 www.baidu.com
• 查问字符串(关上网页携带的信息)：如?fr=aladdin#4
• 哈希(锚点定位)：如 #4

网页地址栏信息对象——location 对象

• 获取和设置地址栏地址

获取地址栏地址语法：window.location.href
返回值：以后网页地址栏地址

设置跳转地址：window.location.href='跳转页面地址'
window.location.href="https://www.baidu.com"

• 获取和设置地址栏中的查问字符串

获取地址栏地址语法：window.location.search
返回值：以后网页地址栏地址的查问字符串

设置地址栏的查问字符串：window.location.search='查问字符串'
window.location.search="fr=aladin"

• 获取和设置地址栏中的哈希值

获取地址栏地址语法：window.location.hash
返回值：以后网页地址栏地址的哈希值

设置地址栏的查问字符串：window.location.search='哈希值'
window.location.search="4"

• 页面刷新

设置属性：window.location.reload()
须要写在限度条件内，如果不写在限度条件内会导致浏览器解体

浏览器历史记录 API——history 对象

• 回退到上一个网页操作：window.history.back()
• 后退到下一个网页操作：window.history.forward()

• 蕴含回退、刷新、后退操作：window.history.go(整数)

  • 正整数示意后退，2 以上示意多级后退；0 示意刷新；负整数示意回退，- 2 以上示意多级回退

浏览器信息 API——navigator 对象

• 获取以后浏览器版本信息：window.navigator.userAgent
• 获取浏览器名称：window.navigator.appName
• 获取浏览器以后运行零碎：window.navigator.platform

浏览器滚动时卷去的宽高 API

获取卷去的高度

HTML 文件存在 DOCTYPE 标签时获取形式：var 变量 = document.documentElement.scrollTop

HTML 文件不存在 DOCTYPE 标签时获取形式：var 变量 = document.body.scrollTop

兼容语法：var 变量 =  document.documentElement.scrollTop || document.body.scrollTop

获取卷去的宽度

HTML 文件存在 DOCTYPE 标签时获取形式：var 变量 = document.documentElement.scrollLeft

HTML 文件不存在 DOCTYPE 标签时获取形式：var 变量 = document.body.scrollLeft

兼容语法：var 变量 =  document.documentElement.scrollLeft || document.body.scrollLeft

设置浏览器滚动到指定地位 API

语法①：window.scrollTo(X 轴坐标, Y 轴坐标)
特点：霎时定位到指标地位

语法②：window.scrollTo{
  // 定位到的指标坐标地位
  top: 0,
  left: 0,
  // 设置定位时的滚动形式
  // 平滑滚动：smooth
  // 霎时定位：instant
  behavior: smooth
}

操作 BOM 的事件

页面加载事件
特点：页面所有资源加载完后触发，可将 JS 代码前置，并失常应用

window.onload = function(){ 执行代码}

滚动条滚动事件
特点：滚动条滚动时触发，可实现楼层显示、顶部导航栏适时固定显示、回到顶部、渐进页面加载显示、瀑布流等操作

window.onscroll = function(){ 执行代码}

实时监测可视窗口大小事件
特点：可视窗口变动时触发，联合 innerWidth 与innerHight判断屏幕尺寸，实现监测挪动端的横竖屏、响应式布局

window.onresize=function(){ 执行代码}