BOM

系统管理员 2022-10-01 08:47 180阅读 0赞

## 一、 BOM概念 ##

BOM 是 browser object model 的缩写，简称浏览器对象模型。主要处理浏览器窗口和框架，描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，回退历史记录，获取 url……

## 二、 BOM 与 与 DOM （ Document Object Model ）的关系 ##

*  1、javacsript 是通过访问 BOM 对象来访问、控制、修改浏览器
 *  2、BOM 的 window 包含了 document，因此通过 window 对象的 document 属性就可以访问、检索、修改文档内容与结构。
 *  3、document 对象又是 DOM 模型的根节点。因此，BOM 包含了 DOM，浏览器提供出来给予访问的是 BOM 对象，从 BOM 对象再访问到 DOM 对象，从而 js 可以操作浏览器以及浏览器读取到的文档

## 三、 BOM 对象包含以下内容 ##

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

## 四、Window 对象 ##

Window 对象表示一个浏览器窗口或一个框架。在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。

### 1.window对象属性 ###

窗口位置
    window.screenLeft | window.screenX  //浏览器窗口相对于屏幕左边的距离
    window.screenTop  | window.screenY  //浏览器窗口相对于屏幕上方的距离
    窗口大小
    window.outerHeight //返回浏览器窗口本身高度
    window.outerWidth //返回浏览器窗口本身宽度
    文档显示区大小
    window.innerheight  //返回窗口的文档显示区的高度。
    window.innerwidth   //返回窗口的文档显示区的宽度。
    文档显示区位置
    window.pageXOffset	//设置或返回当前页面相对于窗口显示区左上角的 X偏移量。
    window.pageYOffset	//设置或返回当前页面相对于窗口显示区左上角的 Y偏移量。
    复制代码

### 2.window对象方法 ###

#### 2.1 弹出对话框 ####

*  alert() 显示带有一段消息和一个确认按钮的警告框。
 *  confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
 *  prompt() 显示可提示用户输入的对话框。

#### 2.2 间歇调用&超时调用 ####

*  setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
 *  setTimeout()在指定的毫秒数后调用函数或计算表达式
 *  clearInterval() 取消由 setInterval() 设置的 timeout
 *  clearTimeout() 取消由 setTimeout() 方法设置的 timeout
 *  close() 关闭浏览器窗口。
 *  open() 打开一个新的浏览器窗口或查找一个已命名的窗口。window.open(URL,name,features,replace）
 *  scrollBy()按照指定的像素值来滚动内容。
 *  scrollTo()把内容滚动到指定的坐标。

## 五、Navigator对象 ##

// Navigator 对象
    // userAgent 做浏览器嗅探
    // onLine 判断是否脱机 （有没有网络）
    // cookieEnabled判断是否能使用cookie
    复制代码

## 六、History对象 ##

history.length //返回浏览器历史列表的URL数量
    history.back()//加载 history 列表中的前一个 URL
    histoty.forward()//加载 history 列表中的下一个 URL。
    history.go(3)//往前加载history列表第三URL
    复制代码

## 七、Location对象 ##

hash: "" //#号后面的字符
    host: "juejin.im" //服务器名称和端口号
    hostname: "juejin.im" //不带端口的服务器
    href: "https://juejin.im/editor/drafts/5cd19f97e51d456e5238ca57"//完整URL
    origin: "https://juejin.im" //协议+域名
    pathname: "/editor/drafts/5cd19f97e51d456e5238ca57"//路径
    port: "" //端口
    protocol: "https:"//协议
    复制代码

转载于:https://juejin.im/post/5cd19f97e51d456e5238ca57