JavaScript操作BOM对象
浏览器对象模型(BOM)是JavaScript的组成之一,它提供了独立于内容与内容与浏览器窗口的进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。
JavaScript操作BOM对象
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( )方法用于访问相同标签的一组元素。