JavaScript课程笔记 BOM

BOM

BOM综述

BOM（Browser Object Model） 窗口对象模型

Browser Object：浏览器提供的用户与浏览器窗口之间交互的对象及操作的接口。

Model：这些对象并不是独立存在的，对象与对象之间存在着层次结构，对象模型的作用就是描述这些层次结构。

window 对象

1. window 对象表示整个浏览器窗口

2. 系统对话框设置

① 警告框alert()

​ – window.alert( [message] )

​ – message 为要在警告框中显示的内容，如果传入其他类型的值,会转换成字符串。\

window.alert("你确定要关闭此窗口吗");

####② 确认窗口confirm()

​ – result = window.confirm( [message] );

​ – result 是一个布尔值

​ – message 为要在确认框中显示的文本内容

window.confirm("你确定要关闭此窗口吗");

####③ 输入框prompt()

​ – result = window.prompt([message],[defaultValue]);

​ – result 用来存储用户输入文字的字符串，或者是 null

​ – message 用来提示用户输入文字的字符串

​ – defaultValue 文本输入框中的默认值

window.prompt("请输入你的评价, 1(满意) 2(一般) 3(不满意)", "1");

3.周期性操作设置、延迟执行

####① window 对象定时器方法

方法	含义
setTimeout	在指定的时间后调用函数或计算表达式。
clearTimeout	取消由 setTimeout() 设置的定时器。
setInterval	按照指定的时间周期调用函数或计算表达式。
clearInterval	取消由 setInterval() 设置的定时器。

②延迟执行

延迟执行 setTimeout( ) ----- 只执行一次

– setTimeout( code, interval )

– code 为要延迟执行的 JavaScript 代码

– interval 为延迟执行的间隔时间，单位为毫秒

取消延迟执行 clearTimeout( )

– clearTimeout( id )

– id 是 setTimeout( ) 方法返回的值

var t=setTimeout(function(){
			window.alert("你确定要关闭此窗口吗");
		},3000);
		clearTimeout(t);

③周期执行

周期执行 setInterval( ) ----- 重复执行

– 重复执行，直到 clearInterval( ) 被调用或窗口被关闭

– setInterval( code,interval )

– code 为要周期执行的 JavaScript 代码

– interval 为周期执行的间隔时间，单位为毫秒

取消周期执行 clearInterval( )

– clearInterval( id )

– id 是 setInterval( ) 方法返回的值

var t=setInterval(function(){
			window.alert("你确定要关闭此窗口吗");
		},3000);
		clearInterval(t);

4.浏览器窗口的打开和关闭

打开浏览器窗口 ----- open ( )

– window.open( url,name,features,replace )

– url : 在打开的窗口中加载文档的 URL 地址。（可选参数)

– name : 新开窗口的名称。（可选参数)

– features : 新开窗口的特性。（可选参数)

– replace : 是否替换窗口中浏览的当前历史,布尔值。（可选参数）

关闭浏览器窗口 close ( )

– window.close( )

window.open("https://www.baidu.com/");
window.close();

###history对象

history 对象可以访问浏览器窗口的浏览历史

对象	方法	说明
history	back()	后退到上一个访问过的页面
history	forward()	前进到下一个访问过的页面
history	go(n)	跳转到某个访问过的页面

go(n) 如果 n 为正数，则前进到第 n 个访问过的网页；如果 n 为负数，则后退到第 n 个访问过的网页。

location 对象

location 对象包含当前窗口的 URL 信息。

– 可以通过修改 location 对象的属性来加载另一个文档。

对象	属性	说明
location	host	主机名和端口
location	hostname	主机名
location	href	当前页面的 URL
location	port	端口号

对象	属性	说明
location	reload	重新加载当前页面
location	hash	设置或返回 URL 的锚部分（从 # 号开始的部分）
location	search	设置或返回当前 URL 的查询部分（问号 ? 之后的部分）

navigator 对象

– 包含浏览器的信息，浏览器的类型、版本信息等

对象	属性	说明
navigator	appName	浏览器名称
navigator	appVersion	浏览器版本和运行平台
navigator	onLine	是否在线(非脱机)
navigator	platform	浏览器运行平台
navigator	userAgent	HTTP 用户代理请求头的字符串

screen对象

• screen对象包含客户端显示器屏幕的相关信息。

对象	属性	说明
screen	height	屏幕的垂直分辨率，单位：像素
screen	width	屏幕的水平分辨率，单位：像素
screen	availHeight	可用屏幕高度
screen	availWidth	可用屏幕宽度

document对象

• document 指向当前窗口内的文档节点

– document.write( )：将一串文本写入文档流