JavaScript操作BOM对象——笔记

BOM的作用

浏览器对象模型（BOM）是JavaScript的组成之一，它提供独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关元素组织包装起来提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力，BOM是一个分层结构

Window对象

window对象是整个BOM的核心，在浏览器打开网页后，首先看到的是浏览器窗口，即顶层的Window对象；其次是网页文档内容，即document（文档）。它的内容包括一些超链接（link）表单、（from）、锚（anchor）等，表单由文本框（text）、单选按钮（radio）、按钮（button）等，表单元素组成。在浏览器中对象结构中，除了document对象外，window对象之下还有两个对象：地址对象（location）和历史对象（history），它们对应于浏览器地址栏和前进/后退按钮。

BOM通常可以实现如下功能：

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

常用的属性

window对象的常用属性

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

语法：window.属性名=“属性值”；

常用的方法

window对象的常用方法

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

语法：window.方法名（）；

window对象是全局对象，所以在使用window对象的属性和方法时，window可以省略

1、confirm（）

语法：window.confirm（"对话框中显示得纯文本"）；

在用户单击“确定”和取消按钮关闭对话框之前，它将阻止用户对浏览器的所有操作，即不会执行下一条语句，点击“确定”按钮confirm（）返回True，点击“取消”按钮confirm（）返回false

2、prompt()、alter()和confirm（）之间的区别

• alter（）只有一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
• prompt（）有两个参数，是输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
• confirm（）只有一个参数，是确认对话框，显示提示对话框的消息，点击“确定”按钮confirm（）返回True，点击“取消”按钮confirm（）返回false，因此与if-else语句搭配使用

3、close（）

语法：widow.close（）；

用于关闭浏览器窗口

4、open（）

语法：window.open（“弹出窗口的URL”，“窗口名称”，“窗口特征”）；

窗口的特征属性

名称	说明
height、width	窗口文档显示区的高度、宽度，以像素计
left、top	窗口的x坐标、y坐标，以像素计
toolbar=yes|no|1|0	是否显示浏览器的工具栏，默认是yes
scrollbars=yes|no|1|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	是否使用全屏模式显示浏览器，默认是yes

history对象

history对象的方法

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

• back（）方法会让浏览器加载前一个浏览过的文档，history.back()等效于浏览器中的“后退”按钮
• forward（）方法会让浏览器加载后一个浏览过的文档，history.forward()等效于浏览器中的“前进“按钮
• go(n)方法中的n是一个具体的数字，当n>0时，当n>0时，装入历史列表中往前数的第n个页面；当n=0时，装入当前页面；当n<0时，装入历史列表中往后数的第n个页面

location对象

location对象提供当前页面的URL信息，并且可以重新装载当前页面或装入新页面

location对象的属性

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

location对象的方法

名称	描述
reload（）	重新加载当前文档
replace（）	用新的文档替换当前文档

document对象的常用属性

document对象的常用属性

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

referrer语法：document.referrer

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

URL语法;document.URL

上网浏览某个页面时，由于不是由指定的页面进入的，因此系统将会提醒不能浏览本页面或者直接跳到其他页面，这样的功能实际上就是通过referrer属性来实现的

document对象的常用方法

document对象的常用方法

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

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

JavaScript内置对象

Date：用于操作日期和时间

Array：用于在单独的变量名中存储一系列的值

String：用于支持对字符串的处理

Math：使我们有能力执行常用的数学任务，它包含了若干个数字常量和函数

Date对象

语法：var 日期示例=new Date（参数）；

日期示例是存储Date对象的变量。可以省略参数，如果没有参数，则表示当前日期和时间

参数是字符串格式”MM DD ,YYYY,hh:mm:ss“例如：

var tdate=new Date("July 15，2013，16：34：28")；

Date对象常用的方法

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

• getFullYear（）返回四位数的年份，getYear（）返回二位或四位的年份，常用于获取年份getFullYear（）
• 获取星期几使用getDay（），0~6一次为周一至周天
• 各部分时间表示范围：除号数（一月中的每一天）外，其他均从0开始计数

Math对象

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

Math对象的常用方法

方法	说明	示例
ceil（）	对数进行上舍入	Math.ceil（25.5）；返回26 Math.ceil（-25.5）；返回-25
floor（）	对数进行下舍入	Math.floor（25.5）；返回25 Math.floor（-25.5）；返回-26
round（）	把数四舍五入为最接近的数	Math.round（25.5）；返回26 Math.round（-25.5）；返回-26
random（）	返回0~1的随机数	Math.random();例如：0.1321414314 random（）方法返回的随机数包括0， 不包含1

常用定时函数

1、setTimeout（）

setTimeout（）用于在指定的毫秒后调用函数或计算表达式

语法：setTimeout（”调用的函数名称“，等待的毫秒数）

2、setInterval（）

setInterval（）可按照指定周期（以毫秒记）来调用函数或计算表达式

语法：setInterval（“调用的函数名称”，周期性调用函数之间间隔的毫秒数）

3、clearTimeout（）和clearInterval（）

clearTimeout（）函数用来清除由setTimeout（）函数设置的定时器

语法：clearTimeout（setTimeout()返回的ID值）

clearInterval（）函数用来清除由setInterval（）函数设置的定时器

语法：clearInterval（setInterval（）返回的ID值）