JS基础——认识BOM & DOM

  1.认识BOM

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

  常用方法:

  Alert()Confirm()Prompt()

  Close()open()

  moveBy()moveTo()移动窗口

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

  scrollBy()scrollTo()滚动

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

  ——wondow对象

I.全局作用域

由于window对象同时扮演着ECMAScriptGlobal对象的角色,因此所有在全局作用域中声明的变量、函数都会变成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对象位置的属性和方法有很多。IESrfariOperaChrome都提供了screenLeftscreenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox则在screenXscreenY属性中提供相同的窗口位置信息,SafariChrome也同时支持这两个属性。Opera虽然也支持screenXscreenY属性,但与screenLeftscreenTop属性并不对应,因此建议大家不要在Oprea中使用它们。

代码:

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

window.screenLeft:window.screenX;

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

window.screenTop:window.screenY;

这个例子运用三目运算符首先确定screenLeftscreenTop属性是否存在,如果是(在IESafariOperaChrome中),则取得这两个属性的值。如果不存在(在firefox),则取得screenXscreenY的值。

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对象的其他属性也可以改变当前加载的页面。

//假设初始URLhttp://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属性,保存着历史记录的数量。

原文地址:https://www.cnblogs.com/lsnan/p/5956750.html