当前位置： 移动技术网 > IT编程>开发语言>Java > 小白入门之BOM笔记知识点详解

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

2020年07月20日  | 移动技术网IT编程  | 我要评论

小白入门之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 = './'
// 这个就会跳转页面到后面你给的那个地址

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网