本文详细介绍了JavaScript中的浏览器对象模型(BOM)核心——window对象，包括如何使用它来弹出窗口、操作页面位置以及实现前进后退功能。此外，还讲解了Date对象用于处理日期和时间的方法，以及定时函数setTimeout和setInterval的用法，这些功能对于动态更新页面和创建交互体验至关重要。
JavaScript操作BOM对象
window对象
浏览器对象模型(BOM) 是JavaScript的组成之一，它提供 了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来.提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。BOM是一个分层结构。
window对象是整个BOM的核心，在浏览器中打开网页后，首先看到的是浏览器窗口，即顶层的window对象;其次是网页文档内容，即document (文档)。它的内容包括一些超链接(link)、 表单(form)、锚(anchor) 等，表单由文本框(text)、 单选按钮(radio). 按钮(butto) 等表单元素组成。在浏览器对象结构中，除了documnent 对象外. window 对象之下还有两个对象:地址对象(location)和历史对象(history), 它们对应于浏览器地址栏和前进/后退按钮，我们可以利用这些对象的方法，实现类似的功能。使用BOM通常可实现如下功能。
➢弹出新的浏览器窗口。
➢移动、关闭浏览器窗口及调整窗口的大小。
➢在浏览器窗口中实现页面的前进、后退功能。
window对象也称为浏览器对象。当浏览器打开HTML文档时，通常会创建一个window对象。如果文档定义了一个或多个框架，浏览器将为原始文档创建个window 对象，同时为每个框架另外创建一个window对象。下面我们就来学习window对象常用的属性和方法。
常用的属性
| 名称 | 说明 |
|---|---|
| history | 有关客户访问URL的信息 |
| locartion | 有关当前URL的信息 |
| screen | 只读属性，包含有关客户端显示屏幕的信息 |
在javaScript中，属性的语法如下。
语法：window.属性名=“属性值”
history和location这两个常用属性就是前面提到的BOM模型中的对象，后面会详细介绍，
常用的方法
| 名称 | 说明 |
|---|---|
| prompt( ) | 显示可提示用户输入的对话框 |
| alert( ) | 显示一个带有提示信息和一个“确定”按钮的警示对话框 |
| confirm( ) | 显示一个带有提示信息、“确定”和“取消”按钮的对话框 |
| close( ) | 关闭浏览器窗口 |
| open( ) | 打开一个新的浏览器窗口，加载给定URL所指定的文档 |
| setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval( ) | 按照指定的周期(以毫秒计)来调用函数或表达式 |
在JavaScript中，方法的使用格式如下。
语法：window.方法名();
window对象是全局对象，所以在使用window对象的属性和方法时，window 可以省略。例如.之前直接使用的alert( ).相当于写成window .alert( )。
- confirm( )
confirm( )将弹出一个确认对话框，代码格式如下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>确定框</title>
</head>
<body>
<script>
var flag=confirm ("确认要删除此条信息吗?");
if (flag==true) {
alert ("删除成功!") ;
}else{
alert ("你取消了删除");
}
</script>
</body>
</html>
在浏览器中运行如果单击“确定按钮则弹出如图所示的对话框:
如果单击“取消”按钮，则弹出如图所示的对话框。
➢alert( )只有一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变。
➢prompt( )有两个参数，是输入对话框，用来提示用户输入一些信息，单击"取消"按钮则返回null.单击确定” 按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息。
➢confirm( )只有一个参数，是确认对话框，显示提示对话框的消息、 确定”按钮和“取消”按钮，单击“确定”按钮返回true,单击“取消”按钮返回false,因此与if-else语句搭配使用。
➢close( )方法用于关闭浏览器窗口，语法格式如下。
语法：window.close();
➢open( )在页面上弹出一一个新的浏览器窗口，弹出窗口的语法格式如下。
语法：window.open(“弹出窗口的url”,“窗口名称”,“窗口特征”)
窗口的特征属性
| 名称 | 说明 |
|---|---|
| height、 width | 窗口文档显示区的高度、宽度，以像素计 |
| left、top | 窗口的x坐标、y坐标，以像素计 |
| toolbar=yes /no/1 /0 | 是否显示浏览器的工具栏，默认是yes |
| scrollbars =yes /no/l /0 | 是否显示滚动条，默认是yes |
| location=yes /no/1 /0 | 是否显示地址栏，默认是yes |
| status=yes /no/1 /0 | 是否添加状态栏，默认是yes |
| menubar=yes/no/1 /0 | 是否显示菜单栏，默认是yes |
| resizable= yes/no/1 /0 | 窗口是否可调节尺寸，默认是yes |
| titlebar=yes/no/1 /0 | 是否显示标题栏，默认是yes |
| fullscreen=yes/no/1 /0 | 是否使用全屏模式显示浏览器，默认是no |
history对象与location对象
history对象
history对象提供用户最近浏览过的URL列表。但出于隐私方面原因，history对象不允许脚本访问已经访问过的实际URL，可以使用history对象提供的、逐个返回访问过的页面的方法，如表所示
history对象的方法
| 名称 | 描述 |
|---|---|
| back() | 加载history对象列表中的前一个UR了 |
| 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()方法。
location对象
location对象提供当前页面的URL信息，并且可以重新装载当前页面或装入新页面，表2-5和表2-6列出了location对象的属性和方法。
表2-5 location 对象的属性
| 名称 | 描述 |
|---|---|
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或返回当前URL的主机名 |
| href | 设置或返回完整的URL |
表2-6 location 对象的方法
| 名称 | 描述 |
|---|---|
| reload( ) | 重新加载当前文档 |
| replace( ) | 用新的文档替换当前文档 |
location对象常用的属性是href.通过对此属性设置不同的网址，从而达到跳转功能。
document对象
document对象既是window对象的一部分.又代表了了整个HTML文档，可用来访问页面中的所有元素。所以在使用doue对象时，除了要适用于各浏览器外，也要符合W3C (万维网联盟)的标准。
本节主要学习docurment对象的常用属性和方法，下面首 先学习document对象的常用属性。
document对象的常用属性
document对象的常用属性如表2-7所示。
表2-7document对象的常用属性
| 属性 | 描述 |
|---|---|
| referrer | 返回载入当前文档的URL |
| URL | 返回当前文档的URL |
referrer的语法格式如下。
语法:document . referrer
当前文档如果不是通过超链接访问的，则doument referer 的值为null。
URL的语法格式如下。
语法:document . URL
上网浏览某个页面时，由于不是由指定的页面进入的，因此系统将会提醒不能浏览本页面或者直接跳转到其他页面，这样的功能实际上就是通过referrer 属性来实现。
document对象的常用方法
document对象的常用方法如表2-8所示。
表2-8 document 对象的常用方法
| 方法 | 描述 |
|---|---|
| getElementById( ) | 返回对拥有指定id的第- -个对象的引用 |
| getElementsByName( ) | 返回带有指定名称的对象的集合 |
| getElementsByTagName( ) | 返回带有指定标签名的对象的集合 |
| write( ) | 向文档写文本、HTML表达式或JavaScript代码 |
➢getElementByld( )方法-般用于访问 div、 图片、表单元素、网页标签等，但要求访问对象的id是唯一的。
➢getElementsByName( )方法与getElementByld( )方法相似，但它访问的是具有name属性的元素，由于一个文档中的name属性可能不唯一-，因此getElementsByName( )方法一般用于访问一组相同name属性的元素，如具有相同name属性的单选按钮、复选框等。
➢getElementsByTagName( )方法是按标签来访问页面元素的，一 般用于访问一 组相同的元素，如一组、-组图片等。
JavaScript内置对象
在JavaSoript中，系统的内置对象有Date对象.Array对象String对象和Math对象等。
➢Date用于操作 日期和时间。
➢Aray. 用于在单独的变量名中存储一系列的值。
➢String :用于支持对字符串的处理。
➢Math:使我们有能力执行常用的数学任务，它包含了若千个数字常量和函数。其中，Aray 对象和Sring对象前面已经学习过，下面将介绍 Dale对象和Math对象。
Date 对象
JavaScipt中的对象与Java中的类非常相似，需要使用"new 对象名()”的方法创建一一个实例语法格式如下。
语法:var日期实例= new Date(参数);
➢日 期实例是存储Date对象的变量。可以省略参数.如果没有参数，则表示当前日期和时间，例如:
var today = new Date(); //将当前日期和时间存储在变量today 中
➢参数是字符串格式“MM DD, YYYY, hh:mm;s"，表示日期和时间. 例如:
var tdate = new Date (“July 15, 2013, 16:34:28”);
Date对象有大量用于设置、获取和操作日期的方法，从而实现在页面中显示不同类型的日期时间。其中，常用的是获取日期的方法，如表2- -9所示。
表2-9 Date 对象的常用方法
| 方法 | 说明 |
|---|---|
| getDate( ) | 返回Date对象的一个月中的每一天，其值为1~31 |
| getDay() | 返回Date对象的星期中的每一天， 其值为0~ 6 |
| getHours( ) | 返回Date对象的小时数，其值为023 |
| getMinutes( ) | 返回Date对象的分钟数，其值为0~59 |
| getSeconds( ) | 返回Date对象的秒数，其值为0~59 |
| getMonth( ) | 返回Date对象的月份，其值为0~11 |
| getFullYear( ) | 返回Date对象的年份，其值为四位数 |
| getTime( ) | 返回自某一时刻(1970年1 月1日)以来的毫秒数 |
getFullYear( )返回四位数的年份，getYear( )返回二位或四位的年份， 常用于获取年份getFullYear( )。
➢获取星期几使用getDay(): 0表示周日，1表示周一，6表示周六。
➢各部分时间表示的范围: 除号数(- 个月中的每一天) 外.其他均从0开始计数。例如，月份0~11, 0表示1月份，11表示12月份。
常用定时函数
时间是静止的，不能动态更新。若要像电子表一样不停地动态改变时间，则需要使用将要学习的定时函数。
JavaScript中提供了两个定时函数setTimeout( )和setInterval( )。此外，还提供了用于清除定时器的两个函数clearTimeout( )和clearlnterval( )。
setTimeout( )
setTimeout( )用于在指定的毫秒后调用函数或计算表达式。语法格式如下。
setTimeout (“调用的函数名称” ,等待的毫秒数)
setInterval( )
setInterval( )可按照指定的周期(以毫秒计)来调用函数或计算表达式。语法格式如下。
语法:set Interval (“调用的函数名称”，周期性调用函数之间间隔的毫秒数)
clearTimeout( )和clearlnterval( )
clearTimeout( )函数用来清除由setTimeout( ) 函数设置的定时器，语法格式如下。
语法:clearTimeout (setTimeout ()返回的ID值)
clearInterval( )函数用来清除由SetInterval( )函数设置的定时器，语法格式如下。
语法:clearInterval (setInterval ()返回的ID值) ;
总结
➢使用window 对象可以实现弹出窗口、关闭当前窗口、弹出页面消息框等效果。
➢使用Date对象可以获得当前系统的日期、时间。
➢使用定时函数与Date( )对象可以制作时钟特效。
➢使用history和location对象的相关属性和方法可以轻松地实现浏览器中“后退” 前进” 和“刷新”按钮的功能。
➢document对象的getElementByld( )方法用于访问唯一的元素。
➢docurment 对象的getElementsByName( )方法用于访问相同name属性的一组元素。
➢docurment 对象的getElementsByTagName( )方法用于访问相同标签的一组元素。
扫一扫
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
