小白入门之BOM笔记知识点详解

什么是BOM？
BOM（Browser Object Model）： 浏览器对象模型
其实就是操作浏览器的一些能力
我们可以操作哪些内容
1、获取一些浏览器的相关信息（窗口的大小）
2、操作浏览器进行页面跳转
3、获取当前浏览器地址栏的信息
4、操作浏览器的滚动条
5、浏览器的信息（浏览器的版本）
6、让浏览器出现一个弹出框（alert/confirm/prompt）
7、BOM 的核心就是 window 对象
8、window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

window对象

窗口大小

IE、Safari、Opera、和Chrome都提供了innerHeight 和innerWidth属性，分别用于表示窗口相对与 屏幕左边和上边的位置信息，这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)

系统对话框

• window方法:alert浏览器的弹出层

//alert 是在浏览器弹出一个提示框
window.alert('我是一个提示框');

显示如下图：

alert这个弹出层知识一个提示内容，只有一个确定按钮

• window方法 confirm 是在浏览器弹出一个询问框

//prompt 是在浏览器弹出一个输入框

window.prompt('请输入内容','我的名字');

显示如下图：

这个弹出层有一个输入框和两个按钮
当你点击取消的时候，得到的是 null
当你点击确定的时候得到的就是你输入的内容

• window方法:confrim浏览器的询问框

//confirm 是在浏览器弹出一个询问框
window.confirm('我是一个询问框');

显示如下图：

这个弹出层有一个询问信息和两个按钮
当你点击确定的时候，就会得到 true
当你点击取消的时候，就会得到 false

location对象

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

• location.href
  location.href 这个属性存储的是浏览器地址栏内 url 地址的信息

console.log(window.location.href)

• 会把中文编程 url 编码的格式
• location.href 这个属性也可以给他赋值

window.location.href = './index.html'
// 这个就会跳转页面到后面你给的那个地址

location.onload()

• location.reload()这个方法会重新加载一下页面，也相当于刷新的意思
• 注意：这个方法不能写在全局变量里面，不然会一直刷新，一般用在事件当中。

window.location.onload();

navigator对象

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

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

navigator.userAgent

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

  console.log(window.navigator.userAgent)
  // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
  

navigator.appName

• navigator.appName 获取的是浏览器的名称

  console.log(window.navigator.appName)
  

navigator.appVersion

• navigator.appVersion 获取的是浏览器的版本号

  console.log(window.navigator.appVersion)
  

navigator.platform

• navigator.platform 获取到的是当前计算机的操作系统

  console.log(window.navigator.platform)
  

screen对象

• 其实JavaScript中对screen对象用处并不大，它只表明客户端的能力。

窗口位置

IE、Safari、Opera、和Chrome都提供了ScreenLeft和ScreenTop属性，分别用于表示窗口相对与 屏幕左边和上边的位置信息

var windowTop= window.screenTop
console.log(windowTop)

var windowleft= window.screenLeft
console.log(windowleft)

history对象

• window 中有一个对象叫做 history

• 是专门用来存储历史记录信息的。

• history.back 是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮。

window.history.back();

• history.forword 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮。

window.history.forword();

• 前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个。

• history.go()括号里面的传递一个参数，表示向前或向后的一个整数值。

//后退一页
window.history.go(-1);
//前进一页
window.history.go(1);
//前进两页页
window.history.go(2);

小结

是不是对BOM模型有一定的了解呢？如果对你有帮助的话，留下一个赞再走么~~

本文地址：https://blog.csdn.net/yzhlove_cs/article/details/107423964