小白科普之JavaScript的BOM模型

2022-08-23 07:25:25

一、什么是BOM

1. BOM是browser object model的缩写，简称浏览器对象模型；

2. BOM提供了独立于内容而与浏览器窗口进行交互的对象，描述了与浏览器进行交互的方法和接口；

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

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

5. BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C；

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

二 BOM概览

　　1）可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等；
　　2）window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象；
　　3）由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象；

三、window对象-- window对象是BOM中所有对象的核心

window，中文"窗口"；
window对象除了是BOM中所有对象的父对象外，还包含一些窗口控制函数；

3.1 全局的window对象

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

例如：

var age= 29;

    function sayAge(){

     alert(this.age);(由于sayAge存在于全局作用域，this.age被影射到window.age)

}

alert(window.age);//

sayAge();//

window.sayAge();//

　　但是定义全局变量和在window上定义变量还是有一点差别：

全局变量不能通过delete操作符删除；
window对象上定义的属性可以删除；

var age= 29;

window.color = "red";

delete window.age;//false，通过chrome和ff运行都没有报错

delete window.color;//true

3.2 window与self对象

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

3.3 window的子对象

window的常见子对象包括：

（1）document对象

（2）frames 对象： HTML页面当前窗体的中的框架集合

（3）history 对象

（4）location 对象

（5）navigator 对象

（6）screen 对象

3.4 window函数

（1）窗体控制函数（下面四个函数不适用于框架，只能对最外层的window对象使用）

moveBy() 函数

moveBy(x,y) 从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体

moveTo() 函数

moveTo(x,y)移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会把窗体移出屏幕的可视区域

resizeBy() 函数

resizeBy(w,h) 相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体

resizeTo() 函数

resizeTo(w,h) 把窗体宽度调整为w个像素，高度调整为h个像素

（2）新建窗体函数

open() 函数-- 打开(弹出)一个新的窗体

　　window.open(url, name, features, replace)

　　　　url -- 要载入窗体的URL

　　　　name -- 新建窗体的名称(也可以是HTML target属性的取值，目标)

　　　　features -- 代表窗体特性的字符串，字符串中每个特性使用逗号分隔

　　　　replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定

参数名称	类型	说明
height	Number	设置窗体的高度，不能小于100
left	Number	说明创建窗体的左坐标，不能为负值
location	Boolean	窗体是否显示地址栏，默认值为no
resizable	Boolean	窗体是否允许通过拖动边线调整大小，默认值为no
scrollable	Boolean	窗体中内部超出窗口可视范围时是否允许拖动，默认值为no
toolbar	Boolean	窗体是否显示工具栏，默认值为no
top	Number	说明创建窗体的上坐标，不能为负值
status	Boolean	窗体是否显示状态栏，默认值为no
width	Number	创建窗体的宽度，不能小于100

（3）关闭窗口函数close()

　　所有的窗体都可以使用此函数关闭；

　　对于通过使用open函数打开的窗体，使用close函数将直接关闭；

　　非open打开的窗体，或者对整个浏览器调用close函数时将弹出一条关闭信息，询问是否关闭。用户可以拒绝关闭。

3.5 opener 属性

opener对象保存着打开它的原始窗口对象，这个属性只在弹出窗口的最外层window对象（top）中有定义，而且指向调用window.open()的窗口或框架。

var wroxWin = window.open("http://chinaso.com","wroxWindow","height=400,width=300");

alert(wroxWin.opener==window);//true

当把wroxWin.opener==null;时，就是告诉浏览器创建新的标签页不需要与打开它的标签页通信

3.6 对话框函数

alert() 函数：弹出消息对话框（对话框中有一个OK按钮）
confirm() 函数：弹出消息对话框（对话框中包含一个OK按钮与Cancel按钮）
prompt() 函数：弹出消息对话框（对话框中包含一个OK按钮、Cancel按钮与一个文本输入框）

　　prompt() 函数接收两个参数，要显示给用户的文本提示和文本输入域的默认值（可以是一个空字符串）

3.7 时间等待与间隔函数

（1）setTimeout() 函数

setTimeout(codes, interval);

参数：

　　codes：代码段的字符串表示(与eval函数的参数相同)，或者是匿名函数、函数名；

　　interval ：等待的毫秒数(通常用于产生动画效果)；

　　setTimeout函数的ID标识：每次调用setTimeout函数都会产生一个唯一的ID，可以通过clearTimeout函数(此函数的参数接收一个setTimeout返回的ID)暂停setTimeout函数还未执行的代码。

（2）clearTimeout() 函数

（3）setInterval() 函数：间隔指定的毫秒数不停地执行指定的代码

　　setInterval(codes, interval)

　　setInterval函数的ID标识，每次调用setInterval函数都会产生一个唯一的ID，可以通过clearInterval函数(此函数的参数接收一个setInterval返回的ID)取消setInterval函数

（4）clearInterval() 函数

　　常用的使用间歇调用的例子：

var num=0;

var max=10;

var intervalId = null;

function incrementNumber(){

   num++;

   if (num==max){

    clearInterval( intervalId) ;

   alert(Done);

   }

}

intervalId = setInterval(incrementNumber,500);

　　使用超时来实现：

var num=0;

var max=10;

function incrementNumber(){

   num++;

   if(num<max){

       setTimeout(incrementNumber,500);

   }else{

   alert("Done");

   }

setTimeout(incrementNumber,500);

　　在使用超时调用时，没有必要跟踪超时调用id，所以用超时调用来模拟间歇调用是最好的。

四、frames 对象

frames用于表现HTML页面当前窗体的中的框架集合

框架集引用中使用的对象
window	当前框架
top	最顶层的框架，就是浏览器窗体
parent	包含当前框架的父框架
self	当前框架，总是等于window对象

五、document 对象

document用于表现HTML页面当前窗体的内容。

document是BOM中最重要对象之一
document对象是window对象的属性
document对象包含一个节点对象，此对象包含每个单独页面的所有HTML元素，这就是W3C的DOM对象
这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象

5.1 document属性

cookie -- 用户cookie
title -- 当前页面title标签中定义的文字
URL -- 当前页面的URL
anchors -- 文档中所有锚(a name="aname")的集合
applets -- 文档中所有applet标签表示的内容的集合
embeds -- 文档中所有embed标签表示的内容的集合
forms -- 文档中所有form标签表示的内容的集合
images -- 文档中所有image标签表示的内容的集合
links -- 文档中所有a(链接)标签表示的内容的集合

5.2 document函数

write() 函数-- 在文档中写入字符串
writeln() 函数-- 在文档中写入字符串，并在字符串的末尾增加一个换行符
document.open() 函数-- 打开已经载入的文档

var win = window.open("about:blank","dreamdu");//新建一个空白文档

win.document.open();打开文档

win.document.write("welcome to dreamdu!");

win.document.close();

document.close() 函数

六、location 对象

location用于获取或设置窗体的URL，并且可以用于解析URL，是BOM中最重要的对象之一。

location，中文"位置"
location既是window对象的属性又是document对象的属性
location包含8个属性，其中7个都是当前窗体的URL的一部分，剩下的也是最重要的一个是href属性，代表当前窗体的URL
location的8个属性都是可读写的，但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL，而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有)，而且页面不会被重新加载

6.1 location属性

hash 属性 -- 返回URL中#符号后面的内容
host 属性 -- 返回域名
hostname 属性 -- 返回主域名
href 属性 -- 返回当前文档的完整URL或设置当前文档的URL
pathname 属性 -- 返回URL中域名后的部分
port 属性 -- 返回URL中的端口
protocol 属性 -- 返回URL中的协议
search 属性 -- 返回URL中的查询字符串
assign() 函数 -- 改变浏览器的位置

location.assign("http://chinaso.com");

window.location = "http://chinaso.com";

location.href = "http://chinaso.com";

replace() 函数 -- 设置当前文档的URL，用户不能返回到前一个页面，并在浏览器的历史记录中不会生成新纪录
reload() 函数 -- 重新载入当前文档，如果页面自上次请求以来没有改变过，页面从浏览器缓存中重新加载；如果要强制从服务器加载，则reload(true);

七、navigator对象--通常用于检测浏览器与操作系统的版本、检测插件等

navigator没有统一的标准，因此各个浏览器都有自己不同的navigator版本，这里只介绍最普遍支持且最常用的navigator属性

appCodeName -- 浏览器的名称，通常都是Mozilla，即使在其他浏览器中也是
appName -- 完整的浏览器名称
appVersion -- 浏览器版本信息
cookieEnabled -- 如果启用cookie返回true，否则返回false
javaEnabled -- 如果启用java返回true，否则返回false
platform -- 浏览器所在的系统平台
plugins -- 安装在浏览器中的插件数组
taintEnabled -- 如果启用了数据污点返回true，否则返回false
userAgent -- 浏览器的用户代理字符串

八、history对象

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

history.go(-1);//后退一页

history.go(1);//前进一页

history.go(”chinaso.com“);//前进一页

九、screen对象

screen对象用于获取用户的屏幕信息，在编程中用处不大

码农公寓