JS_02-JavaScript操作BOM对象

JavaScript操作BOM对象

浏览器对象模型（BOM）是JavaScript的组成之一，它提供了独立于内容与内容与浏览器窗口的进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。

window对象

window对象是整个BOM的核心，在浏览器中打开网页后，首先看到的就是浏览器窗口，即顶层的window对象。使用BOM对象通常可实现如下功能：

• 弹出新的浏览器窗口。
• 移动，关闭浏览器窗口及调整浏览器窗口大小。
• 在浏览器窗口中实现页面的前进，后退功能

window对象也称为浏览器对象。

1.常用的属性

window对象的常用属性：

名称	说明
history	有关客户访问过的URL的信息
location	有关当前URL的信息
screen	只读属性，包含有关客户端显示屏幕的信息

window对象的常用属性语法：

window.属性名="属性值"
//例如：表示跳转到百度网站主页
window.location = "http://baidu.cn"

2.常用的方法

window对象的常用方法：

名称	说明
prompt()	显示可提示用户输入的对话框
alert	显示一个带有提示信息和一个 “确定” 按钮的警示对话框
confirm	显示一个带有提示信息，“确定” 和 “取消” 按钮的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定的URL所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期（以毫秒计算）来调用函数或表达式

window对象的常用方法语法：

window.方法名();
//window对象是全局对象，所有window可以省略
//例：window.alert()，可以写成alert()。

• confirm() 方法

//confirm()将弹出一个确认对话框，语法：
window.confirm("对话框中显示的纯文本");

在confirm( )弹出的确认对话框中，有一条提示信息，一个 “确定” 按钮和一个 “取消” 按钮。 如果用户单击 “确定” 按钮， 则confirm( )返回true；如果单击 “取消” 按钮，则confirm( )返回false。 
在用户单击 “确定” 按钮或 “取消” 按钮将对话框关闭之前，它将阻止用户对浏览器的所有操作。也就是说，当调用confirm( )时，在用户做出应答（单击按钮或关闭对话框）之前，不会执行下一条语句。

• close() 方法

//close()方法用于关闭浏览器窗口，语法：
window.close();

• open() 方法

//在页面中弹出一个新的浏览器窗口，语法：
window.open("弹出窗口的URL","窗口名称","窗口特征");

history对象location对象

1.history对象

history对象提供用户最近浏览过的URL列表

history对象的常用方法：

名称	描述
back()	加载history对象列表中前一个URL
forward()	加载history对象列表中后一个URL
go()	加载history对象列表中的某个具体URL

➢back( )方法会让浏览器加载前一个浏览过的文档，history.back( )等效于浏览器中的 “后退” 按钮。

➢forward( )方法会让浏览器加载后一个浏览过的文档，history.forward( )等效于浏览器中的 “前进” 按钮。

➢go(n)方法中的n是一个具体的数字， 当n>0时，装入历史列表中往前数的第n个页面；当n=0时，装入当前页面：当n<0时，装入历史列表中往后数的第n个页面。

例如:
* history.go(1)代表前进1页，相当于浏览器中的 “前进” 按钮， 等价forward( )方法。
* history.go(-1)代表后退1页，相当于浏览器中的 “后退” 按钮，等价于back( )方法。

2.location对象

location对象提供当前页面的URL信息，并且可以重新装载当前页面或者装入新页面。
location 对象的常用属性：

名称	描述
host	设置或返回主机名和当前的URL的端口号
hostname	设置或返回当前的URL的主机名
href	设置或返回完整的URL

location 对象的常用方法：

名称	描述
reload	重新加载当前文档
hostname	设置或返回当前的URL的主机名
replace	用新的文档替换当前文档

location对象常用的属性是href，通过对此属性的设置不同的网址，从而达到跳转效果。可以使用location.href= “url” 实现页面跳转，这里也可省略href，直接使用location= "urI”来实现页面跳转。之前使用了< a href= “url” >的方式实现了页面跳转，但是这种方式跳转的是固定的页面，而使用location 对象的href属性可以动态地改变链接的页面。

document对象

document对象既是window对象的一部分，又代表了整个HTML文档，可以来访问页面中的所有元素。

1.document对象的常用属性

document对象的常用属性：

属性	描述
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

document对象的常用属性的语法：

• referrer 属性语法：

//当前文档如果不是超链接访问的，则document.referrer的值为null。
document.referrer

• URL 属性语法：

document.URL

2.document对象的常用方法

document对象的常用方法：

方法	描述
getElementById()	返回对拥有指定ID的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本，HTML表达式或JavaScript代码

➢getElementByld( )方法一般用于访问 div、图片、表单元素、网页标签等，但要求访问对象的id是唯一的。
➢getElementsByName( )方法与getElementByld( )方法相似，但它访问的是具有name属性的元素，由于一个文档中的name属性可能不唯一，因此getElermentsByName( )方法一般用于访问一组相同name属性的元素，如具有相同name属性的单选按钮、复选框等。
➢getElementsByTagName( )方法是按标签来访问页面元素的，一般用于访问一组相同的元素，如一组，一组图片等。

• innerHTML 是几乎所有的HTML元素都有的属性。它是一个字符串，用来设置或获取当前对象的开始标签和结束标签之间的HTML。
• document对象应用于获取页面元素，改变页面内容，或者改变页面元素的样式等。

JavaScript内置对象

在JavaScript 中，系统的内置对象有Date对象、Array 对象、 String对象和Math对象等。

• Date：用于操作日期和时间。
• Array：用于在单独的变量名中存储一系列的值。
• String：用于支持对字符串的处理。
• Math：使我们有能力执行常用的数学任务，它包含了若干个数字常量和函数。

1.Date对象

JavaScript 中的对象与Java中的类非常相似，需要使用 “new 对象名()” 的方法创建一个实例。

Date对象的语法：

//Date对象可以省略参数，如果没有参数则表示当前日期和时间
var 日期实例 = new Date(参数);
//Date带参，参数是字符串格式："MM DD,YYYY, hh:mm:ss" 表示日期和时间
var 日期实例 = new Date("July 15,2013, 16:34:28"); 

Date对象的常用方法：

方法	说明
getDate()	返回Date对象的一个月中的每一天，其值为1～31
getDay()	返回Date对象的星期中的每一天，其值为0一6
getHours()	返回Date对象的小时数，其值为0~23
getMinutes()	返回Date对象的分钟数，其值为0~59
getSeconds()	返回Date对象的秒数，其值为0～59
getMonth()	返回Date对象的月份，其值为0～1
getFullYear()	返回Date对象的年份，其值为四位数
gctTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

➢getFullYear( )返回四位数的年份，getYear( )返回二位或四位的年份，常用于获取年getFullYear()。
➢获取星期几使用getDay( )，0表示周日，1表示周一，6表示周六。
➢ 各部分时间表示的范围：除号数(一个月中的每一天) 外，其他均从0开始计数。例如， 月份0~11，0表示1月份，11表示12月份。

2.Math对象

Math对象提供了许多与数学相关的功能，它是JavaScript的一个全局对象，不需要创建，直接作为对象使用就可以调用其他属性和方法。

Math对象的常用方法：

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5) 返回26，负数相反
floor()	对数进行下舍入	Math.ceil(25.5) 返回25，负数相反
round()	把数四舍五入为最接近的数	Math.ceil(25.5) 返回26，负数相反
random()	返回 0~1 之间的随机数	Math.random() 返回 0.562841528

//random() 方法返回一个1~100之间的数，包括1和100。
var iNmu = Math.floor(Math.random()*100+1);
//random() 方法返回一个2~99之间的数，只有98个数，第一个值为2。
var iNmu = Math.floor(Math.random()*98+2);

定时函数

1.常用的定时函数

JavaScript中提供了两个定时函数setTimeout( )和setInterval( )。此外，还提供了用于清除定时器的两个函数clearTimeout( )和clearInterval( )。

定义定时函数：

• setTimeout() 方法

//setTimeout()用于在指定毫秒后调用函或计算表达式，语法如下：
setTimeout("调用的函数名称","等待的毫秒数");
//例：3000表示3000毫秒，即3秒

• setIntervsl() 方法

//setlnterval()可按照指定的周期（以毫秒计算）来调用函数或计算表达式，语法如下：
setlnterval("调用的函数名称","周期性调用函数之间间隔的毫秒数")
//setlnterval()方法会不停的调用函数，直到窗口被强行关闭，或者被其他方法强行停止

setlnterval()方法会不停的调用函数，直到窗口被强行关闭，或者被其他方法强行停止
setTimeout()只执行一次函数，如果要多次调用函数，则需要使用setlnterval()或者被调用的函数再次调用

清楚定时函数：

• clearTimeout() 和 clearlnterval()

//clearTimeout()用来清除由setTimeout()设置的定时器 语法如下：
clearTimeout(setTimeout()返回的ID值);

//clearlnterval()用来清除由setIntervsl()设置的定时器 语法如下：
clearlnterval(setIntervsl()返回的ID值);

JavaScript操作BOM对象总结

➢使用window对象可以实现弹出窗口、关闭当前窗口.弹出页面消息框等效果。
➢使用Date对象可以获得当前系统的日期、时间。
➢使用定时函数与Date()对象可以制作时钟特效。
➢使用 history和location对象的相关属性和方法可以轻松地实现浏览器中“后退”“ 前进” 和”刷新”按钮的功能。
➢document对象的getElementByld( )方法用于访问唯一的元素。
➢document对象的getEletsByName( )方法用于访问相同name属性的一组元素。
➢document 对象的getElentsByTagNamel( )方法用于访问相同标签的一组元素。