搜索
简帛阁>技术文章>JavaScript个人学习笔记---BOM

JavaScript个人学习笔记---BOM

一,概念

 BOM:browser object model    浏览器对象模型;与dom(document o

bject model)相对应;在DOM中是使用js(JavaScript)对文档流或者说html元素(也可以说是DOM节点)进行操作(包括对元素的增删改查),而BOM则是使用js对浏览器进行相应的操作。

核心:window(window是document的父元素)

特点:没有一套正式的官方标准且兼容性很差,原因是BOM是对浏览器进行操作,而各家的浏览器所拥有的特性又不相同。


二,BOM与DOM的关系

1、BOM 的 window 包含了 document,因此通过 window 对象的 document 属性就可以访问、

检索、修改文档内容与结构。

2、document 对象又是 DOM 模型的根节点


三,BOM组成

  • window  js的顶层对象,表示浏览器的窗口
  • navigator  包含客户端浏览器的信息
  • history  记录当前窗口访问过的URL,是一个类数组
  • location  显示当前页面的URL信息(通常来说就是浏览器地址栏的信息,包括不限于协议,域名,锚点等)
  • screen 包含显示屏的信息(使用频率非常低)

三(1),window

对于bom来说window是一个属性(对于BOM的其他组成元素这句话同样适用),但是对于window本身来说他是一个对象,window对象表示一个浏览器的窗口或者一个框架,在js中window对象是全局对象,在对当前窗口的属性进行操作是可以省略window,例如可以直接写document.sth,而不用写window.document.sth。

1),常用对象的属性和方法

属性描述
innerHeight返回窗口的文档(即只包括html部分)的高度,返回值为数字类型,默认单位为px(包括滚动条的宽高,而document.documentElement.clientWidth获取的宽高不包括滚动条的宽高)
innerWidth返回窗口的文档(即只包括html部分)的宽度,返回值为数字类型,默认单位为px(包括滚动条的宽高,而document.documentElement.clientWidth获取的宽高不包括滚动条的宽高)
pageXOffset返回当前窗口的左上顶点X坐标与页面的左上顶点的X坐标
pageYOffset返回当前窗口的左上顶点Y坐标与页面的左上顶点的Y坐标
方法描述
clearInterval()  清除setInterval()设置的timeout,一般用来让某一个定时器停止
setInterval()按照指定的周期来调用函数(毫秒级别)
setTimeou()在指定的毫秒数后执行或者调用函数

alert()

显示带有一段消息和一个确认按钮的警告框

open()

打开一个新的浏览器窗口或查找一个已命名的窗口。window.open(URL,name,features(特征值,可以设置新开窗口的宽高等属性),replace)

prompt()

显示可提示用户输入的对话框。

scrollBy()根据传的参数进行滚动条的滚动,可以累加,可以实现自动阅读的功能
scrollTo()滚动到指定的坐标

三(2),Navigator 对象

Navigator对象包含的属性描述了正在使用的浏览器。

常用属性:

属性描述
cookieEnabled返回一个布尔值,指明浏览器是否启用了cookie
onLine返回一个布尔值,指明是否联网
userAgent

返回由客户机发送服务器的 user-agent 头部的值。

三(3)History 对象

History对象包含了该窗口访问过的URL

常用属性和方法

方法中传的参数范围为(0,History.length)。

属性描述
length记录访问过的URL的数量
方法描述
back()返回上一个页面
forward()前往该页面的下一个页面
go()跳转访问过的某一个页面

一,概念BOM:browserobjectmodel浏览器对象模型;与dom(documentobjectmodel)相对应;在DOM中是使用js(JavaScript)对文档流或者说html元素(也
1、BOM简介。所谓的BOM即浏览器对象模型(BrowserObjectModel)。BOM赋予了JS操作浏览器的能力,即window操作。DOM则用于创建删除节点,操作HTML文档。BOM尚无正式
BOM的介绍BOM的结构图弹出系统对话框打开窗口、关闭窗口location对象HTML5存储技术localStoragesessionStorage(重点)BOM的介绍浏览器对象模型。操作浏览器部分
✨课程链接【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili✨学习笔记操作BOM对象window(⭐)window代表浏览器窗口windowinnerHeight936
javascript的BOMECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心。BOM提供了很多对象,用于
js组成我们都知道,javascript有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异。1DOM是W3C的标准;[
1navigator对象windownavigator对象包含有关访问者浏览器的信息。常用属性:appCodeName:返回浏览器的代码名appName:返回浏览器的名称appVersion:返回浏览
操作BOM对象浏览器介绍BOM:浏览器对象模型浏览器(内核)IE6~11ChromeSafariFireFoxOperawindowwindow代表浏览器窗口navigator(不建议使用)navi
操作BOMwindow所有浏览器都支持window对象。它代表浏览器的窗口。所有全局JavaScript对象,函数和变量自动成为window对象的成员。全局变量是window对象的属性。全局函数是wi
操作BOMwindow所有浏览器都支持window对象。它代表浏览器的窗口。所有全局JavaScript对象,函数和变量自动成为window对象的成员。全局变量是window对象的属性。全局函数是wi