JS基础——认识BOM & DOM

　　1.认识BOM

　　window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM（浏览器对象模型）。BOM向程序员提供了window.open和window.blur等方法。

　　常用方法：

　　Alert()、Confirm()、Prompt()

　　Close()、open()

　　moveBy()、moveTo()移动窗口

　　resizeBy()、resizeTo()重设窗口大小

　　scrollBy()、scrollTo()滚动

　　setInterval()、clearInterval()设置、删除定时器

　　——wondow对象

I.全局作用域

 

由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

 

栗子：

 

Var age=29;

 

Function sayAge(){

 

Alert(this.age);

 

}

 

Alert(window.age);//29

 

sayAge();//29

 

window.sayAge();//29

 

我们在全局作用域中定义了一个变量age和一个函数sayAge(),它们被自动归在了window对象名下。于是，可以通过window.age访问变量age,可以通过window.sayAge()访问函数sayAge().由于sayAge()存在于全局作用域中，因此this.age被映射到window.age,最终显示的仍然是正确的结果。

 

II.窗口关系及框架

 

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引或者框架名称来访问相应的window对象。每个window对象都有一个name属性，其中包含框架的名称。

 

下面是一个包含框架的页面：

 

核心代码：

 

<frameset rows=”160,*”>

 

<frame src=”frame.htm” name=”topFrame”>

 

<frame cols=”50%,50%”>

 

<frame src=”anotherframe.htm” name=”leftFrame”>

 

<frame src=”yetanotherframe.html” name=”rightFrame”>

 

</frameset>

 

III.窗口位置

 

用来确定和修改window对象位置的属性和方法有很多。IE、Srfari、Opera和Chrome都提供了screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox则在screenX和screenY属性中提供相同的窗口位置信息，Safari和Chrome也同时支持这两个属性。Opera虽然也支持screenX和screenY属性，但与screenLeft和screenTop属性并不对应，因此建议大家不要在Oprea中使用它们。

 

代码：

 

Var leftPos=(typeof window.screenLeft==”number”)?

 

window.screenLeft:window.screenX;

 

Var topPos=(typeof window.screenTop==”number”)?

 

window.screenTop:window.screenY;

 

这个例子运用三目运算符首先确定screenLeft和screenTop属性是否存在，如果是（在IE、Safari、Opera和Chrome中），则取得这两个属性的值。如果不存在（在firefox），则取得screenX和screenY的值。

 

IV.打开窗口

 

打开新窗口（window.open）

 

open()方法可以查找一个已经存在或者新建的浏览器窗口

 

window.open([URL],[窗口名称]，[参数字符串]);

 

参数说明：

 

URL:可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

 

窗口名称：可选参数，被打开的窗口的名称."_top"、"_blank"、"_self"具有特殊意义的名称。

 

_blank:在新窗口显示目标网页

 

_self:在当前窗口显示目标网页

 

_top:框架网页中在上部窗口中显示目标网页

 

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开

 

栗子：

 

打开百度首页，大小为300px*200px,无菜单，无工具栏，无状态栏，有滚动条窗口。

 

window.open

 

('http://www.baidu.com','_blank','width=300,height=200,menubar=n

 

o,toolbar=no,status=no,scrollbar=yes');

 

关闭窗口（window.close）

 

window.close();//关闭本窗口

 

<窗口对象>.close();//关闭指定的窗口

 

V.间歇调用和超时调用

 

超时调用是指在指定的时间过后执行代码，而间歇调用是每隔指定的时间就执行一次代码。

 

（1）超时调用需要使用window对象的setTimeout()方法。接受两个参数：要执行的代码和以毫秒表示的时间。第一个参数可以是一个包含js代码的字符串，也可以是一个函数。（动画部分用到）

 

调用setTimeout()之后，该方法会返回一个数值ID,表示超时调用。这个ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。这样就用到了clearTimeout()方法并将相应的超时调用ID作为参数传递给它。

 

栗子：

 

//设置超时调用

 

Var timeoutId=setTimeout(function(){

 

Alert(“Hello world!”);

},1000);

//取消

clearTimeout(timeoutId);

（2）间歇调用与超时调用类似，只不过他会按照指定的时间间隔重复执行代码，直到间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数与setTimeout相同。它也会返回一个间歇调用ID，可用于取消间歇调用。方法是clearInterval().

栗子：

Var num=0;

Var max=10;

Var intervalId=null;

Function incrementNumber(){

Num++;

//如果执行次数到了max设定的值，则取消后续尚未执行的调用

If(num==max){

clearInterval(intervalId);

Alert(“Done”);

}

}

intervalId=setInterval(incrementNumber,500);

VI.系统对话框

（1）.警告（alert消息对话框）

alert(字符串或变量);

（2）确认（confirm消息对话框）

弹出对话框允许用户做选择的动作（确定or取消）

confirm("你喜欢javascript吗？");

返回值：boolean值

确定，返回true

取消，返回false

（3）提问（prompt消息对话框）

弹出消息对话框（包含一个确定按钮，取消按钮与一个文本输入框）

prompt(str1,str2);

参数说明：

str1:要显示在消息对话框中的文本，不可修改

str2:文本框中的内容，可以修改

返回值：

I.点击确定按钮，文本框中的内容将作为函数返回值

II.点击取消按钮，将返回null

——location对象

 

Location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关 的信息，还提供了一些导航功能。

 

I.位置操作

 

使用location对象可以通过很多方式改变浏览器的位置。首先，也是最常用的方式，就是使用assign()方法并为其传递一个URL，如下所示：

 

Location.assign(“http://www.wrox.com’);

 

这样，就可以立即打开新URL，并在浏览器的历史记录中生成一条记录。下面两行代码与显式调用assign()方法的效果完全一样。

 

Window.location=”http://www.wrox.com”;

 

Location.href=”http://www.wrox.com”;

 

另外，修改location对象的其他属性也可以改变当前加载的页面。

 

//假设初始URL为http://www.wrox.com/WileyCDA/

 

//将URL修改为”http://www.wrox.com/WileyCDA/#section1”

 

Location.hash=”#section1”;

 

//将URL修改为”http://www.wrox.com/WileyCDA/?q=javascript”

 

Location.search=”?q=javascript”;

 

//将URL修改为”http://www.yahoo.com/WileyCDA/”

 

Location.hostname=”www.yahoo.com”;

 

//将URL修改为”http://www.yahoo.com/mydir/”

 

Location.pathname=”mydir”;

 

//将URL修改为”http://www.yahoo.com:8080/WileyCDA/”

 

Location.port=8080;

 

当通过上述任何一种方式修改URL之后，浏览器的历史记录就会生成一条新纪录，因此用户通过单击”后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用replace()方法。这个方法只接受一个参数，即要导航到的URL。

 

与位置有关的最后一个方法是reload(),作用是重新加载当前显示的页面。如果调用reload()时不传递任何参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要传递参数为true。

——Screen对象

 

Js中有几个对象在编程中用处不大，而screen对象就是其中之一。Screen对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的screen对象都包含着不同的属性。

——history对象

 

History对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

 

使用go()方法可以在用户的历史记录中任意跳转，可以向前也可以向后。这个方法接受一个参数，表示向前或向后的整数，负数表示向后跳，正数表示向前跳。还可以使用两个简写方法back()和faword()来代替go().除了上述几个方法外，history还有一个length属性，保存着历史记录的数量。