js-BOM知识点小结

BOM是什么？有什么作用？

BOM（Browser Object Model）：浏览器对象模型，是JS的三大组成部分之一，简单理解就是使JS有能力操作和访问客户端（浏览器）。

Window对象

一个html文档（一个浏览器标签页）对应一个window对象
window对象是BOM的顶层对象，其他对象均是window对象的属性（子对象）
ECMAScript中规定的全局对象，所有全局变量和方法都将被解析成window对象的属性
window是BOM对象而非js对象

常用方法

alert()
confirm("")　　　　　　　　　　　选择框
prompt()　　　　　　　　　　　输入内容提示框
- 点击确认返回输入值，点击取消返回null
open(url,name,parameters)　　打开一个新窗口或查找已命名的窗口
- url(string)：子窗口路径
- name(string)：子窗口名称，方便引用
- parameters(string):参数逗号隔开
  - width、height
  - left、top：窗口位置
  - toolbar：是否显示工具栏
  - menubar：是否显示菜单栏
  - scrollbars：是否显示滚动条
  - location：是否显示地址
  - status：是否添加状态栏
close()　　　　　　　　　　　　关闭浏览器窗口

定时器方法

超时调用：setTimeout(code,millisec)
- code：不推荐直接写执行代码，性能不高，而是写函数
- 方法返回ID值，用于取消超时调用
间歇调用：setInterval(code,millisec)
- clearInterval(id)
  - 可与setTimeOut配合使用达到N秒后清除间歇调用定时器的作用

History对象

保存用户在浏览器访问页面的历史记录
只要url改变就会生成历史记录
常用方法
- back() 历史记录的上一步
  - 相当于history.go(-1)
- forward() 历史记录的下一步
  - 相当于history.go(1)
- go(x) 加载history列表中的某个具体页面
  - 加载history列表中的某个具体页面

Location对象

提供当前页面加载文档（html文件）中包含的信息
提供导航功能
包含有关当前URL的信息，把url解析成独立片段，通过属性可访问
既是window对象的属性，也是document对象的属性
属性
- location.href 返回当前加载页面的完整url
  - 某些浏览器协议及查询参数等信息隐藏会获取不到
- location.hash 返回URL的hash（#号后的值），不包含则返回空字符串
  - 也可设置值，做页面内锚点链接
    location.hash = "#top"; //寻找页面中id为top的元素并跳转到相应位置
- location.host 返回服务器名称和端口号
- location.hostname 返回服务器名称
- location.pathname 返回url中的目录与文件名
- location.port 返回url中的端口
- location.protocol 返回页面使用的协议
- location.search 返回url的查询字符串（？开头的字符串）
位置操作
- 可返回页面
  - location.href = ""
  - window.location = ""
  - location.assign(URL) 链接到一个新页面
- 不能返回之前的页面
  - location.replace(URL) 新页面覆盖当前页面
  - open() 新标签页打开页面
- location.reload() 刷新页面
  - 不传参数：尝试利用缓存刷新页面
  - 参数为true：忽略缓存，强制从服务器重新加载
  - reload后的代码可能执行也可能不执行，建议放在最后一行

Screen（不常用）

包含客户端屏幕信息
获取显示器屏幕高宽（不包括任务栏）
- Screen.availWidth
- Screen.availHeight
获取窗口文档显示区域宽高
- window.innerHeight
- window.innerWidth

Navigator

获取用户操作系统和浏览器信息
常用属性
- navigator.userAgent
  - 建议封装使用
  - 实现对浏览器识别，用于跨浏览器支持

posted @ 2020-08-12 18:02 sewell 阅读(181) 评论(0) 收藏举报

刷新页面返回顶部