BOM介绍
- BOM - Browser Object Model
- 浏览器对象模型
- 是浏览器提供的一套可以操作浏览器相关内容的方法或属性
- BOM中的顶级对象是
window对象
- 所有和浏览器操作相关的方法或属性都是属于
window对象的属性
- 用的时候可以省略
window. - 例如：
window.alert() ==> alert()
- 在全局中通过
var声明的变量或声明式函数，本质上都相当于是给window添加的属性
- 也就是说，在全局定义的变量都会自动挂载到
window中 - 在全局访问变量，也相当于在访问
window对象的属性 - 注意：
window对象自带的属性名，不能在全局中作为变量名定义
- 扩展：在html中标签的id值，在js中是可以直接使用的变量，表示js中获取的该元素
浏览器弹窗
- alert 提示弹窗
- 语法：
alert(内容) - 弹窗：包含 提示标题、确定按钮
- 返回值：
undefined
- confirm 确认弹窗
- 语法：
confirm(内容) - 弹窗：包含 提示标题、确定按钮、取消按钮
- 返回值：布尔值，点击确定返回
true，点击取消返回false
- prompt 询问弹窗
- 语法：
prompt(内容) - 弹窗：包含 提示标题、输入框、确定按钮、取消按钮
- 返回值：
- 点击确定返回输入框中的文本内容（字符串类型）
- 点击取消返回
null
- 浏览器弹窗
- 样式不可修改
- 不同浏览器的弹窗样式不一样
- 弹窗会阻断页面渲染及后续代码执行，只有当弹窗操作完毕后才会执行后续代码
浏览器可视窗口尺寸
- 获取方式：
- 语法：
window.innerWidth
- 语法：
window.innerHeight
浏览器事件
- load 页面加载事件
- 语法：
window.onload = 函数 - 触发时机：当页面中的所有资源加载完毕后触发事件
- resize 页面窗口尺寸变化事件
- 语法：
window.onresize = 函数 - 触发时机：当页面可视窗口尺寸变化时触发事件
- scroll 页面滚动事件
- 语法：
window.onscroll = 函数 - 触发时机：当页面滚动时（滚动条滚动）触发事件
浏览器地址栏
window对象有一个location属性，值为对象
- 操作浏览器地址栏的方法和属性都在
window.location对象中
- 利用
location中的方法或属性实现页面跳转
- 使用
href属性实现页面跳转
href属性：页面地址栏中的完整url地址（可读可写属性）
- 获取：
location.href
- 设置：
location.href = 新地址
- 赋值新地址后，当前页面地址栏中的地址将被替换（页面会刷新跳转）
- 直接给
location赋值新地址实现页面跳转
- 使用
location中的方法实现页面跳转
location.assign(新地址)location.replace(新地址)
location.search获取查询字符串location.hash获取哈希值location对象的reload方法
- 语法：
location.reload() - 作用：使页面重新加载（页面刷新）
- 注意：不要在全局中书写，否则会不断刷新页面
浏览器页面历史记录
window的history属性中的方法，可用于操作当前页面的历史记录
- 注意：页面中需要有历史记录才可以进行操作
- 历史记录操作方法：
- back
- 语法：
history.back() - 作用：当前页面回退到历史记录的上一个页面
- foward
- 语法：
history.forward() - 作用：当前页面前进到历史记录的下一个页面
- go
- 语法：
history.go(n) - 作用：
- 如果
n为0则仅仅刷新页面 - 如果
n小于0则退回到历史记录的上n个页面 - 如果
n大于0则前进到历史记录的下n个页面
浏览器信息
window的navigator属性中有浏览器相关的内部信息
- 比如：浏览器的版本信息、外部设备信息（蓝牙、摄像头、定位…）等
navigator的userAgent属性
- 语法：
navigator.userAgent - 可以得到浏览器版本等信息
浏览器标签页
- open
- 语法：
window.open(地址) - 作用：打开一个新的标签页
- 返回值：新标签页的标识对象
- close
- 语法：
window.close() - 作用：关闭当前标签页
<button id="btn1">打开</button>
<button id="btn2">关闭</button>
btn1.onclick = function() {
var wd = window.open('http://baidu.com')
setTimeout(function() {
wd.close()
}, 3000)
}
btn2.onclick = function() {
window.close()
}
浏览器页面卷去的距离
- 获取方式：
- 当html页面有DOCTYPE声明
- 语法：
document.documentElement.scrollTop 浏览器页面卷去的垂直距离 - 语法：
document.documentElement.scrollLeft 浏览器页面卷去的水平距离
- 当html页面没有DOCTYPE声明
- 语法：
document.body.scrollTop 浏览器页面卷去的垂直距离 - 语法：
document.body.scrollLeft 浏览器页面卷去的水平距离
- 兼容写法：
document.documentElement.scrollTop || document.body.scrollTopdocument.documentElement.scrollLeft || document.body.scrollLeft
浏览器页面滚动到
- 语法1：
window.scrollTo(水平位置, 垂直位置)
window.scrollTo(2000, 1000)
- 语法2：
window.scrollTo({配置对象})
- 传入的对象可写的属性：
left：表示水平位置top：表示垂直位置behavior：可以传递'smooth'，表示平滑滚动到目标位置
window.scrollTo({
left: 2000,
top: 1000,
behavior: 'smooth'
})
浏览器本地存储
- 也叫客户端本地存储
- 浏览器的存储空间
- 浏览器本地存储Storage
- Storage分为两种
- localStorage
- sessionStorage
- 存储空间大小：20MB左右
- 存储数据的形式
- 存储数据的有效性
- localStorage是永久存储
- sessionStorage是会话级别
- 存储位置
- 如果是服务器打开页面，则存储在对应的服务器域名下
- 如果是直接打开页面，则直接存储在打开的文件协议下
- 跨页面访问能力
- localStorage可以随意跨页面访问
- sessionStorage只有从当前页面跳转的目标页面才可以访问
- 浏览器提供了操作Storage的方法
- localStorage的操作属于BOM操作
- 设置数据
- 语法：
localStorage.setItem(键名, 键值)
- Storage中的键名是唯一的
- 如果键名不存在则是添加
- 如果键名存在则是修改
- 获取数据
- 语法：
localStorage.getItem(键名)
- 删除某一个数据
- 语法：
localStorage.removeItem(键名)
- 清空
- sessionStorage的操作属于BOM操作
- 设置数据
- 语法：
sessionStorage.setItem(键名, 键值)
- Storage中的键名是唯一的
- 如果键名不存在则是添加
- 如果键名存在则是修改
- 获取数据
- 语法：
sessionStorage.getItem(键名)
- 删除某一个数据
- 语法：
sessionStorage.removeItem(键名)
- 清空
- 语法：
sessionStorage.clear()
- 一般如果写入大量的数据，则会使用json格式字符串写入
var userList = [
{ name: 'zs', age: 12, score: 100 },
{ name: 'zls', age: 120, score: 1003 },
{ name: 'ww', age: 130, score: 1001 },
{ name: 'zl', age: 1200, score: 1002 }
]
localStorage.setItem('userData', JSON.stringify(userList))
var data = JSON.parse(localStorage.getItem('userData'))
785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
