JavaScript 浏览器对象模型BOM使用介绍(JavaScript浏览器扩展)

推荐整理分享JavaScript 浏览器对象模型BOM使用介绍(JavaScript浏览器扩展)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:JavaScript 浏览器插件,javascript浏览器怎么打开,JavaScript 浏览器对象,JavaScript浏览器打开,JavaScript 浏览器对象,JavaScript 浏览器对象,JavaScript 浏览器对象,javascript浏览器怎么打开,内容如对您有帮助，希望把文章链接给更多的朋友！

BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关;BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准;

一 window对象

1.window对象的属性和方法window对象有一系列的属性,这些属性本身也是对象;

(1).属性属性 含义closed 当窗口关闭时为真;defaultStatus 窗口底部状态栏显示的默认状态信息;document 窗口中当前显示的文档对象;frames 窗口中的框架对象数组;history 保存有窗口最近加载的URL;length 窗口中的框架数;location 当前窗口中的URL;name 窗口名;offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容,控制屏幕更新;opener 打开当前窗口的窗口;parent 指向包含另一个窗口的窗口(由框架使用);screen 显示屏幕相关信息,如高度/宽度(以像素为单位;)self 指示当前窗口;status 描述由用户交互导致的状态栏的临时信息;top 包含特定窗口的最顶层窗口(由框架使用);window 指示当前窗口,与self等效;

(2).方法alert(text) 创建一个警告对话框,显示一条信息;blur() 将焦点从窗口移除;clearInterval(interval) 清除之前设置的定时器间隔;clearTimeOut(timer) 清除之前设置的超时;close() 关闭窗口;confirm() 创建一个需要用于确认的对话框;focus() 将焦点移至窗口;open(url,name,[options]) 打开一个新窗口并返回新window对象;prompt(text,defaultInput) 创建一个对话框要求用户输入信息;scroll(x,y) 在窗口中滚动到一个像素点的位置;setInterval(expression,milliseconds) 经过指定时间间隔计算一个表达式;setInterval(function,millisenconds,[arguments]) 经过指定时间间隔后调用一个函数;setTimeout(expression,milliseconds) 　　　　　　　在定时器超过后计算一个表达式;steTimeout(function,milliseconds,[arguments]) 在定时器超过后调用一个函数;print() 调出打印对话框;find() 调出查找对话框;// window下的属性和方法,可以使用window.属性、window.方法()或者直接属性、方法()的调用;// window.alert(text)=alert(text);

2.系统对话框浏览器通过alert()/confirm()和prompt()方法调用系统对话框向用户显示信息;系统对话框与浏览器中显示的网页没有关系,也不包含HTML;它们的外观由操作系统及(或)浏览器设置决定,而不是由CSS决定;这几个方法打开的对话框都是同步和模态的;也就是说,显示这些对话框的时候代码会停止运行,而关掉这些对话框后代码又会恢复执行;

3.新建窗口(open())

// 使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口;// 它接收四个参数:// (1).要加载的URL;// (2).窗口的名称或窗口目标;// (3).一个特定字符串;// (4).一个表示新页面是否取代浏览器记录中当前加载页面的布尔值;open('www.baidu.com'); // chrome- // 新建页面并跳转到百度;open(' // 新建页面 打开百度页面 并命名窗口;并不会自动跳转;并且再次调用时只是刷新那个页面;open(' // 在本页面打开百度;'_blank'是指定新页面打开;// 第三个字符串参数设置 值 说明width 数值 新窗口的宽度,不小于px;height 数值 新窗口的高度,不小于px;top 数值 新窗口的Y坐标,不能是负值;left 数值 新窗口的X坐标,不能是负值;location boolean 是否在浏览器窗口中显示地址栏;不同浏览器默认值不同;menubar boolean 是否在浏览器窗口显示菜单栏,默认为no;resizable boolean 是否通过拖动浏览器窗口边框来改变大小;默认no;scrollbars boolean 如果页面内容显示不下,是否显示滚动条;默认no;status boolean 是否在浏览器窗口中显示状态栏,默认no;toolbar boolean 是否在浏览器中显示工具栏;默认no;fullscreen boolean 浏览器窗口是否最大化;仅IE支持;open(' open()本身返回window对象var box = open(); // 返回了一个window对象,打开了一个新空白页面;box.alert(''); // 然后指定在open()返回的对象打开的新页面弹窗;

// 字窗口操作父窗口document.onclick = function(){　　　　　　　　 // 在新的窗口中点击docuement对象;opener.document.write('子窗口让我输出的!');// 此时在产生它的父窗口会生成文字内容;}

4.窗口的位置和大小

5.间歇调用和超时调用1 // JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行;2 // 超时值:在指定的时间过后执行代码;3 // 间隔值:每隔指定的时间就执行一次代码;

二 location对象

location是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能;事实上,location对象是window对象的属性,也是document对象的属性;alert(location); // 获取当前的URL

(1).location对象的属性属性 描述的URL内容hash 如果该部分存在,表示锚点部分;host 主机名:端口号;hostname 主机名;href 整个URL;pathname 路径名;port 端口号;protocol 协议部分;search 返回URL的查询字符串('&#;gws_rd=ssl#safe=strict&q=ab'),这个字符串以问号开头;(2).location对象的方法assign() 跳转到指定页面,与href等效;reload() 重载当前URL;replace() 用新的URL替换当前页面;

location.hash = '#1'; // 设置#后的字符串,并跳转;location.hostname = 'Jack'; // 设置主机名;location.search = '&#;id=5'; // 设置&#;后的字符串;

三 history对象

history对象是window对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起;

(1).history对象的属性

length history对象中的记录数;(2).history对象的方法back() 前往浏览器历史条目前一个URL,类似后退;forward() 前往浏览器历史条目下一个URL,类似前进;go(num) 浏览器在history对象中向前或向后;

四 小结

浏览器对象模型(BOM)以window对象为依托,表示浏览器窗口以及页面可见区域; 同时window对象还是ECMAScript中的Global对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下; (1).使用location对象可以通过编程方式来访问浏览器的导航系统;设置相应的属性,可以逐段或整体性地修改浏览器的URL; (2).调用replace()方法可以导航到一个新的URL,同时该URL会替换浏览器历史记录中当前显示的页面; (3).screen对象:保存着与客户端显示器有关的信息,这些信息一般只用于站点分析; (4).history对象:为访问浏览器的历史记录开了一个小缝隙,开发人员可以据此判断历史记录的数量,也可以在历史记录中向后或向前导航到任意页面;

JavaScript DOM基础 DOM(DocumentObjectModel)即文档对象模型,针对HTML和XML文档的API(应用程序接口);DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部

JavaScript DOM进阶方法 DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点;一DOM类型类型名说明Node表示所有类型值的

JavaScript DOM元素尺寸和位置 一获取元素的CSS大小1.通过style内联获取元素的大小varbox=document.getElementById('box');//获得元素;box.style.width;//px;box.style.height;//px;//PS:style获取只能取到行