欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-10 21:02:33
小白入门之DOM笔记知识点详解window对象窗口大小系统对话框location对象navigator对象浏览器的版本信息(了解)navigator.userAgentnavigator.appNamenavigator.appVersionnavigator.platformscreen对象窗口位置history对象小结什么是DOM?BOM(Browser Object Model): 浏览器对象模型其实就是操作浏览器的一些能力我们可以操作哪些内容1、获取一些浏览器的相关信息(窗口的大小)2、...


什么是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('我是一个提示框');

显示如下图:

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

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

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

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

显示如下图:
小白入门之BOM笔记知识点详解
这个弹出层有一个输入框和两个按钮
当你点击取消的时候,得到的是 null
当你点击确定的时候得到的就是你输入的内容

  • window方法:confrim浏览器的询问框
//confirm 是在浏览器弹出一个询问框
window.confirm('我是一个询问框');

显示如下图:
小白入门之BOM笔记知识点详解
这个弹出层有一个询问信息和两个按钮
当你点击确定的时候,就会得到 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

相关标签: javascript dom