前端开发必须掌握的BOM对象操作,这里归纳总结全了,看看有没有你不知道的?

在利用JavaScript进行前端开发时,不可避免地要与浏览器窗口进行交互。浏览器的一些对象,例如可以移动,调整浏览器大小的window对象,可以用于导航的location对象与history对象,可以获取浏览器,操作系统与用户屏幕信息的navigator与screen对象,可以使用document作为访问HTML文档的入口,管理框架的frames对象等,那么操作这些对象都会用到什么方法或属性呢?本文将为你进行总结和归纳。

BOM概述

BOM是browser object model的缩写,简称浏览器对象模型

BOM提供了独立于内容而与浏览器窗口进行交互的对象,主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:

1.弹出新的浏览器窗口

2.移动、关闭浏览器窗口以及调整窗口大小

3.提供 Web 浏览器详细信息的定位对象

4.提供用户屏幕分辨率详细信息的屏幕对象

5.对 cookie 的支持

6.IE 扩展了BOM,加入了ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window

BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性

BOM缺乏标准, 是各个浏览器厂商根据DOM在各自浏览器上的实现(表现为不同浏览器定义有差别,实现方式不同);JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C

BOM最初是Netscape浏览器标准的一部分

前端交流群:621071874

window对象是BOM的顶层(核心)对象,不是JS对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。JavaScript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(文档对象模型),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。

BOM的组成

一、window对象

window对象是BOM的核心。它具有双重角色,既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以window作为其global对象。

全局的window对象

JavaScript中的任何一个全局函数或变量都是window的属性

window与self对象

self对象与window对象完全相同,self通常用于确认就是在当前的窗体内

window的子对象

1.document 对象

2.frames 对象

3.history 对象

4.location 对象

5.navigator 对象

6.screen 对象

window对象的函数和属性索引

窗体控制

moveBy() 函数可相对窗口的当前坐标把它移动指定的像素

moveTo() 函数可把窗口的左上角移动到一个指定的坐标

resizeBy() 函数用于根据指定的像素来调整窗口的大小

resizeTo() 函数用于把窗口大小调整为指定的宽度和高度

screenLeft 和 screenTop属性返回窗口相对于屏幕的X和Y坐标

screenX 和 screenY 属性返回窗口相对于屏幕的X和Y坐标

pageXOffset 和 pageYOffset 属性设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置

outerWidth 和 outerHeight 属性设置或返回一个窗口的外部宽度(高度),包括所有界面元素(如工具栏/滚动条)

窗体滚动轴控制

scrollBy() 函数可把内容滚动指定的像素数

scrollTo() 函数可把内容滚动到指定的坐标

提示:上面几个函数的名字最后都带有To或By,to是绝对的意思(从整体而言),by是相对的意思(从原先的位置而言)

窗体焦点控制

focus() 函数可把键盘焦点给予一个窗口

blur() 函数可把键盘焦点从顶层窗口移开

新建窗体

open() 函数用于打开一个新的浏览器窗口或查找一个已命名的窗口

close() 函数用于关闭浏览器窗口

createPopup() 函数用来创建一个弹出窗口

opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用

closed 属性可返回一个布尔值,该值声明了窗口是否已经关闭

对话框

alert() 函数用于显示带有一条指定消息和一个 确认 按钮的警告框

confirm() 函数用于显示一个带有指定消息和确认及取消按钮的对话框

prompt() 函数用于显示可提示用户进行输入的对话框

状态栏

window.defaultStatus 属性可设置或返回窗口状态栏中的默认文本。该属性可读可写

window.status 属性可设置或返回窗口状态栏中的文本

print() 函数用于打印当前窗口的内容

时间等待与间隔

setTimeout() 函数用于在指定的毫秒数后调用函数或计算表达式

clearTimeout() 函数可取消由 setTimeout() 方法设置的 timeout

setInterval() 函数可按照指定的周期(以毫秒计)来调用函数或计算表达式

clearInterval() 函数可取消由 setInterval() 设置的 timeout

二、document对象

document对象用于表现HTML页面当前窗体的内容,是window对象的属性,包含了一个节点对象(该对象包含每个单独页面的所有HTML元素,这就是W3C的DOM对象,由于document对象内容比较我,我们将在后面专门撰写文章进行讲解)。

三、frames对象

frames对象用于表现HTML页面当前窗体的中的框架集合,是window对象的属性。如果页面使用框架,将产生一个框架集合frames,在集合中可用数字(从0开始,从左到右,逐行索引)或名字索引框架。

window:当前框架

self 属性可返回对窗口自身的只读引用

Top 属性返回当前窗口的最顶层浏览器窗口

parent 属性返回当前窗口的父窗口

四、history对象

history对象用于窗体中的导航,是window对象的属性,浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面,并可以实现浏览器前进与后退相似的导航功能;可以通过back函数后退一个页面,forward函数前进一个页面,或者使用go函数任意后退或前进页面,还可以通过length属性查看history对象中存储的页面数。

go() 函数可加载历史列表中的某个具体的页面

back() 函数可加载历史列表中的前一个 URL(如果存在)

forward() 函数可加载历史列表中的下一个 URL

length 属性声明了浏览器历史列表中的元素数量

五、location对象

location对象用于获取或设置窗体的URL并可以用于解析URL。它既是window对象的属性又是document对象的属性,包含8个属性,其中7个都是当前窗体的URL的一部分,剩下的也是最重要的一个是href属性,代表当前窗体的URL。8个属性都是可读写的,但是只有href与hash的写才有意义。

assign() 函数加载一个新的文档

replace() 函数可用一个新文档取代当前文档

reload() 函数用于刷新当前文档

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)

host 属性是一个可读可写的字符串,可设置或返回当前 URL 的主机名称和端口号

hostname 属性是一个可读可写的字符串,可设置或返回当前 URL 的主机名

href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL

pathname 属性是一个可读可写的字符串,可设置或返回当前 URL 的路径部分

port 属性是一个可读可写的字符串,可设置或返回当前 URL 的端口部分

protocol 属性是一个可读可写的字符串,可设置或返回当前 URL 的协议

search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号 ? 之后的部分)

navigator对象

navigator对象通常用于检测浏览器与操作系统的版本,是window对象的属性。由于navigator没有统一的标准,因此各个浏览器都有自己不同的navigator版本。常用的navigator函数和属性有:

taintEnabled() 函数可返回一个布尔值,该值声明了当前浏览器是否启用了 data tainting

appCodeName 属性是一个只读字符串,声明了浏览器的代码名

appName 属性可返回浏览器的名称

appVersion 属性可返回浏览器的平台和版本信息。该属性是一个只读的字符串

cookieEnabled 属性可返回一个布尔值,如果浏览器启用了 cookie,该属性值为 true。如果禁用了 cookie,则值为 false

platform 属性是一个只读的字符串,声明了运行浏览器的操作系统和(或)硬件平台

userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值

javaEnabled() 函数可返回一个布尔值,该值指示浏览器是否支持并启用了 Java。如果是,则返回 true,否则返回 false

screen对象

screen对象用于获取用户的屏幕信息,是window对象的属性。

width 属性声明了显示浏览器的屏幕的宽度,以像素计

height 属性声明了显示浏览器的屏幕的高度,以像素计

availWidth 属性声明了显示浏览器的屏幕的可用宽度,以像素计。在 Windows 这样的操作系统中,这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间

availHeight 属性声明了显示浏览器的屏幕的可用高度,以像素计。在 Windows 这样的操作系统中,这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间

colorDepth 属性返回目标设备或缓冲器上的调色板的比特深度

pixelDepth 属性返回显示屏幕的颜色分辨率(比特每像素)

话题到这里就结束了,web前端学习的可以来我的群,群里每天都有对应资料学习:621071874,包括这篇文章的高清图片,欢迎初学和进阶中的小伙伴。

如果想看到更加系统的文章和学习方法经验可以关注的微信号:‘web前端EDU’或者‘webxh5’关注后回复‘2017’可以领取一套完整的学习视频

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容