BOM模型
BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM可实现功能
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口的大小
- 页面的前进、后退
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一。
Window对象的常用属性
常用属性
| 属性名称 | 说 明 |
|---|---|
| history | 有关客户访问过的 URL 的信息 |
| location | 有关当前 URL 的信息 |
语法
window.属性名="属性值";
eg:
window.location="http://www.baidu.com";
常用方法
| 方法名称 | 说 明 |
|---|---|
| prompt( ) | 显示可提示用户输入的对话框 |
| alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
| confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
| close( ) | 关闭浏览器窗口 |
| open( ) | 打开一个新的浏览器窗口，加载给定 URL 所指定的文档 |
| setTimeOut( ) | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval( ) | 按照指定的周期（以毫秒计）来调用函数或表达式 |
confirm( )、alert( )和prompt( )区别
- alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
- prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击 “取消” 按钮则返回null，单击 “确定” 按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
- confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定” 按钮和 “取消” 按钮，单击 “确定” 按钮返回true，单击 " 取消" 按钮返回false，因此常与if-else语句搭配使用
open( )方法
window.open(URL,name,features,replace)
| 参数 | 描述 |
|---|---|
| URL | 一个可选的字符串，声明了要在新窗口中显示的文档的URL。如何省略了这个参数，或则它的值是空字符串，那么新窗口就不会显示任何文档 |
| name | 可选。指定target属性或窗口的名称。支持以下值_blank(加载到一个新的窗口，默认)、_parent(加载到父框架)、_self(替换当前页面)、_top(替换任何可加载的框架集)、name(窗口名称) |
| features | 可选。一个逗号分隔的项目列表。支持以下值：在这不做详细介绍，下面会提到 |
| replace | Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true- （URL替换浏览历史中的当前条目）。false- （URL 在浏览历史中创建新的条目） |
上面features会在接下来提到
窗口特征(features)
history对象
常用方法
| 名称 | 说 明 |
|---|---|
| back() | 加载 history 对象列表中的前一个URL |
| forward() | 加载 history 对象列表中的下一个URL |
| go() | 加载 history 对象列表中的某个具体URL |
注意:
history.back()——>history.go(-1)（等价）
history.forward()——>history.go(1)
location对象
常用属性
| 名称 | 说 明 |
|---|---|
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或返回当前URL的主机名 |
| href | 设置或返回完整的URL |
常用方法
| 名称 | 说 明 |
|---|---|
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |
Document 对象
常用属性
| 名称 | 说明 |
|---|---|
| referrer | 返回载入当前文档的URL |
| URL | 返回当前文档的URL |
document对象的常用方法
| 名称 | 说 明 |
|---|---|
| getElementById() | 返回对拥有指定id的第一个对象的引用 |
| getElementsByName() | 返回带有指定名称的对象的集合 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |
innerHTML
innerHTML在 JS 中是双向功能，获取对象的内容 或 向对象插入内容
innerHtml 属性用于设置或返回指定标签之间的 HTML内容。
语法
object.innerHTML="HTML";//设置
var html=object.innerHTML;//获取
JavaScript 内置对象
Array:用于在单独的变量名中存储一系列的值
String:用于支持对字符串的处理
Math:用于执行常用的数学任务，它包含了若干个数字常量和函数
Date:用于操作日期和时间
Date对象
语法
var 日期对象=new Date(参数);
eg:
var today=new Date();//返回当前日期和时间
var today=new Date("June 28,2020,20:03:24");
常用方法
| 方法 | 说 明 |
|---|---|
| getDate() | 返回 Date 对象的一个月中每一天，其值介于1~31之间 |
| getDay() | 返回 Date 对象的星期中的每一天，其值介于0~6之间 |
| getHours() | 返回 Date 对象的小时数，其值介于0~23之间 |
| getMinutes() | 返回 Date 对象的分钟数，其值介于0~59之间 |
| getSeconds() | 返回 Date 对象的秒数，其值介于0~59之间 |
| getMonth() | 返回 Date 对象的月份，其值介于0~11之间 |
| getFullYear() | 返回 Date 对象的年份，其值为4位数 |
| getTime() | 返回自某一时刻(1970年1月1日)以来的毫秒数 |
Math对象
常用方法
| 方法 | 说 明 | 示例 |
|---|---|---|
| ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26 |
| floor() | 把数进行下舍入 | Math.floor(25.5);返回25 |
| round() | 把数四舍五入为最接近的数 | Math.round(25.5);//返回26 |
| random() | 返回0~1之间的随机数(不含1) | Math.random();返回0.654598898665 |
定时函数
setTimeout()
语法
setTimeOut("调用的函数","等待的毫秒数");//只执行一次
eg:
var myTime=setTimeOut("disptime()",1000);//1秒后执行函数
disptime()一次
setInterval()
语法
setInterval("调用的函数",间隔的毫秒数);//每隔多少毫秒执行一次
eg:
var myTime=setInterval("disptime()",1000);//每隔1秒执行函数
disptime()一次
提示
如果要多次调用，使用setInterval()或者让setTimeout()里的函数自身再次调用
setTimeout()。
清除函数
clearTimeout
语法
clearTimeout(setTimeout()返回的ID值)
eg:
var myTime=setTimeout("disptime()",1000);
clearTimeout(myTime);
clearInterval()
语法
clearInterval(setInterval()返回的ID值)
eg:
var myTime=setInterval("disptime()",1000);
clearInterval(myTime);
归纳
