BOM浏览器对象模型

最新推荐文章于 2022-11-28 00:21:08 发布

敲代码好难

最新推荐文章于 2022-11-28 00:21:08 发布

阅读量68

点赞数

文章标签： javascript bom

本文链接：https://blog.csdn.net/weixin_43989621/article/details/119360351

版权

BOM浏览器对象模型

BOM

BOM(Browser Object Model):浏览器对象模型
其实就是操作浏览器的一些能力
我们可以操作哪些内容
- 获取浏览器的相关信息（窗口的大小）
- 操作浏览器进行页面的跳转
- 获取浏览器的地址栏信息
- 操作浏览器的滚动条
- 浏览器的信息（浏览器的版本）
- 浏览器出现一个弹出框（alert/confirm/prompt）
BOM的核心就是window对象
window是浏览器的内置的一个对象，里面包含着操作浏览器的方法

在这里插入图片描述

窗口对象

常用方法

prompt() 显示可提示用户输入的对话框
alert() 显示带有一个提示信息和一个确认按钮的警示框
confirm() 显示一个带有提示信息、确定和取消按钮的对话框
close() 关闭浏览器
open() 打开一个新的窗口，加载给定URL所指定的文档
setTimeout() 在指定的毫秒数后调用函数或计算表达式
setInterval() 按照指定的周期（以毫秒计）来调用函数

获取浏览器窗口的尺寸

innerHeight 和innerWidth

这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

var windowHeight = window.innerHeight
document.write(widowHeigth)	//打印当前窗口高度
var windowWidth = window.innerWidth
document.write(windowWidth)	//打印当前窗口宽度

浏览器的弹出框

alert 是在浏览器弹出一个提示框
```
window.alert('我是一个提示框')
```
- 这个弹出层知识一个提示内容，只有一个确定按钮
- 点击确定按钮以后，这个提示框就消失了
confirm 是在浏览器弹出一个询问框
```
var boo = window.confirm
document.write(boo)
```
- 这个弹出的询问框有一个访问消息和两个按钮
- 点击确定，返回true
- 点击取消，返回false
prompt 是在浏览器弹出一个输入框
```
var str = window.prompt('请输入内容')
document.write(str)
```
- 这个弹出层有一个输入框和两个按钮
- 点击取消，得到的值是null
- 点击确定，得到的就是你输入的内容

浏览器的地址信息

在window中有一个对象叫做location
就是专门用来存储浏览器的地址栏内的信息的

location.href

location.href 这个属性存储的是浏览器地址栏内url地址信息
```
document.write(window.location.href)
```

location.href 这个属性也可以给他赋值

window.location.href = './index.html'
//这个就会跳转到后面的那个地址，相当于<a>标签

location.reload

location.reload() 这个方法就会重新加载页面，相当于刷新
```
window.location.reload()
```
- 注意：不要写在全局不然浏览器会一直处于刷新状态

浏览器的历史记录

window中有一个对象叫做history
是专门用来储存历史记录信息的

history.back

history.back 是用来回退历史记录的，就是回到前一个页面，就相当于浏览器上的← 按钮
```
window.history.back()
```
- 前提是你要有之前的记录。

浏览器的版本信息（了解）

window中有一个对象叫做navigator
是专门用来获取浏览器信息的

navigator.userAgent

navigator.userAgrent 是获取的浏览器的整体信息

document.write(window.navigator.userAgent)

//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36

navigator.appVersion

navigator.appVersion 获取的是浏览器的版本号
```
document.write(window.navigator.appVersion)
```

navigator.platform

navigator.platform 获取到的是当前计算机的操作系统
```
document.write(window.navigator.platform)
```

浏览器的 onload 事件

是在页面所有资源加载完毕后执行的，这是一个事件，不再是对象了
```
window.onload = function () {
  console.log('页面已经加载完毕')
}
```

在 html 页面中把 js 写在 head 里面

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
    	// 这个代码执行的时候，body 还没有加载
      // 这个时候我们就获取不到 body 中的那个 div
      
      // 就需要使用 window.onload 事件
      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

在 html 页面中把 js 写在 body 最后面

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>
    
    <script>
    	// 这个代码执行的时候，body 已经加载完毕了
      // 在这里就可以获取到 div，写不写 window.onload 就无所谓了
      
      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </body>
</html>

浏览器的 onscroll 事件

这个 onscroll 事件是当浏览器的滚动条滚动的时候触发
```
window.onscroll = function () {
  console.log('浏览器滚动了')
}
```
- 注意： 前提是页面的高度要超过浏览器的可视窗口才可以

浏览器滚动的距离

浏览器内的内容即然可以滚动，那么我们就可以获取到浏览器滚动的距离 ，其实浏览器没有动，只不过是页面向上走了
这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容
所以不是在用 window 对象了，而是使用 document 对象

scrollTop

获取的是页面向上滚动的距离
一共有两个获取方式
- document.body.scrollTop
- document.documentElement.scrollTop
```
window.onscroll = function () {
  console.log(document.body.scrollTop)
  console.log(document.documentElement.scrollTop)
}
```
- 两个都是获取页面向上滚动的距离
- 区别
  - IE 浏览器
    - 没有 DOCTYPE 声明的时候，用这两个都行
    - 有 DOCTYPE 声明的时候，只能用 document.documentElement.scrollTop
  - Chrome 和 FireFox
    - 没有 DOCTYPE 声明的时候，用 document.body.scrollTop
    - 有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop
  - Safari(苹果)
    - 两个都不用，使用一个单独的方法 window.pageYOffset

scrollLeft

获取向左的滚动距离，方法同上

定时器

在 js 里面，有两种定时器，倒计时定时器 和 间隔定时器

倒计时定时器

倒计时多少时间以后执行函数
语法： setTimeout(要执行的函数，多长时间以后执行)
会在你设定的时间以后，执行函数
```
var timerId = setTimeout(function () {
  console.log('我执行了')
}, 1000)
console.log(timerId) // 1
```
- 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
- 所以会在页面打开 1 秒钟以后执行函数
- 只执行一次，就不在执行了
- 返回值是，当前这个定时器是页面中的第几个定时器

间隔定时器

每间隔多少时间就执行一次函数
语法： setInterval(要执行的函数，间隔多少时间)
```
var timerId = setInterval(function () {
  console.log('我执行了')
}, 1000)
```
- 时间和刚才一样，是按照毫秒进行计算的
- 每间隔 1 秒钟执行一次函数
- 只要不关闭，会一直执行
- 返回值是，当前这个定时器是页面中的第几个定时器

定时器的返回值

设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的

只要有一个定时器，那么就是一个数字

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)

console.log(timerId) // 1
console.log(timerId2) // 2

关闭定时器

我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器
这个 timerId 就是用来关闭定时器的数字

我们有两个方法来关闭定时器 clearTimeout 和 clearInterval

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
clearTimeout(timerId)

关闭以后，定时器就不会在执行了

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
clearInterval(timerId2)

关闭以后定时器就不会在执行了

原则上是
- clearTimeout 关闭 setTimeout
- clearInterval 关闭 setInterval

但是其实是可以通用的，他们可以混着使用

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
// 关闭倒计时定时器
clearInterval(timerId)

var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
// 关闭间隔定时器
clearTimeout(timerId2)