BOM对象
今日日志
学习内容
- js的事件
- BOM对象
- setInterval方法中的函数调用可以用函数名、函数对象、直接写入函数。
易错点和需要注意的点
- 打开新窗口的参数中的宽高不需要设置单位px
- 新窗口的url一般为相对路径
- resizeTo(x,y)与resizeBy(x,y)不同在于:resizeTo(x,y)中的x、y是“改变后”的数值,而resizeBy(x,y)中的x、y是“增加或减少”的数值。
- 标签能够识别用writeln中的换行符但需要作为参数写入writeln。
BOM对象
- BOM,全称浏览器对象模型,只要用来对浏览器窗口进行操作和管理的对象。最核心的对象是window对象。
Window对象
- 窗口对象,主要定义了关于窗口的操作方法。一个浏览器窗口就是一个窗口对象
- window对象是最核心的对象,document对象、history对象等都是window对象的子对象。
方法 | 说明 |
---|---|
open()、close() | 打开窗口、关闭窗口 |
resizeBy()、resizeTo() | 改变窗口大小 |
moveBy()、moveTo() | 移动窗口 |
setTimeout()、clearTimeout() | 设置或取消“一次性”执行的定时器 |
setInterval()、clearInterval() | 设置或取消“重复性”执行的定时器 |
常用方法
关于对话框
- alert():用来弹出消息提示框
- confirm():用来弹出确定提示框,让用户确认或取消,确认时返回true,取消返回false
- prompt():用来接收用户输入的提示框,可以接收输入,返回值是用户输入的参 数。
窗口
方法 | 说明 |
---|---|
top | 窗口顶部距离屏幕顶部的距离,默认单位为px |
left | 窗口左边距离屏幕左边的距离,默认单位为px |
width | 窗口的宽度,默认单位为px |
height | 窗口的高度,默认单位为px |
scrollbars | 是否显示滚动条 |
resizable | 窗口大小是否固定 |
toolbar | 浏览器工具条,包括前进或后退按钮 |
menubar | 菜单条,一般包括文件、编辑及其它一些条目 |
location | 地址栏,是可以输入URL的浏览器文本区 |
location | 地址栏,是可以输入URL的浏览器文本区 |
打开窗口
window.open(URL, 窗口名称, 参数);
- URL:指的是打开窗口的地址,如果URL为空字符串,则浏览器打开一个空白窗口,并且可以使用document.write()方法动态输出HTML文档。
- 窗口名称:指的是window对象的名称,可以是a标签或form标签中target属性值。如果指定的名称是一个已经存在的窗口名称,则返回对该窗口的引用,而不会再新打开一个窗口。
- 参数:对打开的窗口进行属性设置。其中width和height不需要单位。
close:关闭窗口
使用window.open()方法动态创建的窗口时,我们可以将窗口以变量形式保存,然后再使用close()方法关闭动态创建的窗口。
-
关闭当前窗口的方法
window.close();
close();
this.close(); -
关闭子窗口
窗口名.close();
改变窗口的大小
-
window.resizeTo(x,y);
x表示改变后的水平宽度,y表示改变后的垂直高度。x和y的单位都是px,浏览器自带单位,我们只需要使用数值即可。
-
window.resizeBy();
当x、y的值大于0时为扩大,小于0时为缩小。其中x和y的单位都是px。
-
resizeTo()和resizeBy()的区别
resizeTo(x,y)与resizeBy(x,y)不同在于:resizeTo(x,y)中的x、y是“改变后”的数值,而resizeBy(x,y)中的x、y是“增加或减少”的数值。
移动窗口(了解)
-
moveTo(x,y);
-
moveBy(x,y);
x,y为屏幕的横纵坐标,用法类比于resizeTo()和resizeBy();
Location对象
- 浏览器对象,主要定义浏览器地址栏的对象。
- location.reload();刷新
- location.replace(url);
- location.href=‘url’//使用js进行跳转
history对象
- 浏览器历史记录对象,主要定义浏览的历史记录。
history对象的属性
属性 | 说明 |
---|---|
current | 当前窗口的URL |
next | 历史列表中的下一个URL |
previous | 历史列表中的前一个URL |
length | 历史列表的长度,用于判断列表中的入口数目 |
history对象的方法
方法 | 说明 |
---|---|
go() | 进入指定的网页 |
back() | 返回上一页 |
forward() | 进入下一页 |
定时器方法
setInterval()和clearInterval()
- var 变量名 = setInterval (code , time)重复调用函数可用clearInterval()清空。
- 其中clearInterval的参数是setInterval方法。
定时任务
setTimeout()和clearTimeout()
- var 变量名 = setTimeout(code , time)毫秒计时,延时执行函数。
document对象
- 文档对象,主要用来访问网页中的文档。
属性 | 说明 |
---|---|
title | 文档标题,即title标签内容 |
URL | 文档地址 |
fileCreateDate | 文档创建日期 |
fileModifiedDate | 文档修改时间(精确到天) |
lastModified | 文档修改时间(精确到秒) |
fileSize | 文档大小 |
fgColor | 定义文档的前景色 |
bgColor | 定义文档的背景色 |
linkColor | 定义“未访问”的超链接颜色 |
alinkColor | 定义“被激活”的超链接颜色 |
vlinkColor | 定义“访问过”的超链接颜色 |
-
title
在head标签中已经设置标题之后可以使用document.title来改变标题
-
文档信息
属性 说明 fileCreateDate 文档创建日期 fileModifiedDate 文档修改时间(精确到天) lastModified 文档修改时间(精确到秒) fileSize 文档大小 Url 文档地址 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> document.write("创建日期:" + document.fileCreatedDate + "<br/>"); document.write("修改日期:" + document.fileModifiedDate + "<br/>"); document.write("创建时间:" + document.lastModified + "<br/>"); document.write("文件大小:" + document.fileSize); document.write("当前页面的URL是:" + document.URL); </script> </head> <body> </body> </html>
-
颜色属性
属性 说明 fgColor 定义文档的前景色 bgColor 定义文档的背景色 linkColor 定义“未访问”的超链接颜色 alinkColor 定义“被激活”的超链接颜色 vlinkColor 定义“访问过”的超链接颜色
方法 | 说明 |
---|---|
document.write() | 输入文本到当前打开的文档 |
document.writeIn() | 输入文本到当前打开的文档,并添加换行符“\n” |
document.getElementById() | 获取某个id值的元素 |
document.getElementsByName() | 获取某个name值的元素,用于表单元素 |