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值）