目录
一、概述
JS 的 BOM 对象就是浏览器对象模型,用于控制浏览器的行为,它提供了独立于内容与浏览器窗口进行交互的对象,BOM是一个分层结构:
二、window 对象
window对象表示浏览器窗口,所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员,全局变量是 window 对象的属性,全局函数是 window 对象的方法,编写时 window 可以省略
1、常用属性(对象)
- document:对 Document 对象的只读引用
- history:对 History 对象的只读引用
- innerheight:返回窗口的文档显示区的高度
- innerwidth:返回窗口的文档显示区的宽度
- location:用于窗口或框架的 Location 对象
- Navigator:对 Navigator 对象的只读引用
2、常用方法
- alert():显示带有一段消息和一个确认按钮的警告框
- blur():把键盘焦点从顶层窗口移开
- clearInterval():取消由 setInterval() 设置的 timeout
- clearTimeout():取消由 setTimeout() 方法设置的 timeout
- close():关闭浏览器窗口
- confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
- createPopup():创建一个 pop-up 窗口
- focus():把键盘焦点给予一个窗口
- moveBy():可相对窗口的当前坐标把它移动指定的像素
- moveTo():把窗口的左上角移动到一个指定的坐标
- open():打开一个新的浏览器窗口或查找一个已命名的窗口
- print():打印当前窗口的内容
- prompt():显示可提示用户输入的对话框
- resizeBy():按照指定的像素调整窗口的大小
- resizeTo():把窗口的大小调整到指定的宽度和高度
- scrollBy():按照指定的像素值来滚动内容
- scrollTo():把内容滚动到指定的坐标
- setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式(一直执行)
- setTimeout():在指定的毫秒数后调用函数或计算表达式(执行一次)
<html>
<head>
<title>oneStar</title>
</head>
<body>
<input type="button" value="open" onclick="funOpen()"/>
<script type="text/javascript">
//confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
var flage = window.confirm("是否删除?");
if(flage == true){
alert("删除成功!");
}else{
alert("删除失败!");
}
//prompt():显示可提示用户输入的对话框
window.prompt("请输入:","2");
//open():打开一个新的浏览器窗口或查找一个已命名的窗口
function funOpen(){
window.open("http://www.baidu.com","white = 300,height = 400");
}
//关闭窗口
//window.close();
//setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
var id1 = window.setInterval("alert('oneStar')","3000");
//clearInterval():取消由 setInterval() 设置的 timeout
clearInterval(id1);
//setTimeout():在指定的毫秒数后调用函数或计算表达式
var id2 = window.setTimeout("alert('oneStar')",3000);
//clearTimeout():取消由 setTimeout() 方法设置的 timeout
clearTimeout(id2);
</script>
</body>
</html>
三、History 对象
History 对象包含用户(在浏览器窗口中)访问过的 URL,History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
1、常用属性
- length:返回浏览器历史列表中的 URL 数量
2、常用方法
- back():加载浏览器历史列表中前一个url
-
forward():加载 history 列表中的下一个 URL
- go():加载 history 列表中的某个具体页面
<html>
<head>
<title>oneStar</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
<button onclick="history.back()">前一个</button>
<button onclick="history.forward()">后一个</button>
<button onclick="history.go(1)">前进</button>
<script type="text/javascript">
</body>
</html>
四、Location对象
Location 对象包含有关当前 URL 的信息
1、常用属性
- hash:设置或返回从井号 (#) 开始的 URL(锚)
- host:设置或返回主机名和当前 URL 的端口号
- hostname:设置或返回当前 URL 的主机名
- href:设置或返回完整的 URL
- pathname:设置或返回当前 URL 的路径部分
- port:设置或返回当前 URL 的端口号
- protocol:设置或返回当前 URL 的协议
- search:设置或返回从问号 (?) 开始的 URL(查询部分)
2、常用方法
-
assign():加载新的文档
-
reload():重新加载当前文档
-
replace():用新的文档替换当前文档
<html>
<head>
<title>oneStar</title>
</head>
<body>
<input type="button" value="跳转" onclick="fun();"/>
<br/>
<script type="text/javascript">
//href:设置或返回完整的 URL
document.write(location.href);
设置URL地址
function fun(){
window.location.href="../html/img1.html";
}
</script>
</body>
</html>
五、Navigator 和 screen 对象
- Navigator 对象:获取客户机的信息(浏览器的信息)
- screen 对象:获取屏幕信息
<html>
<head>
<title>oneStar</title>
</head>
<body>
<br/>
<script type="text/javascript">
//Navigator 对象:获取客户机的信息(浏览器的信息)
document.write(navigator.appName);
document.write("<hr/>");
//screen 对象:获取屏幕信息
document.write(screen.width);
document.write("<br/>");
document.write(screen.height);
</script>
</body>
</html>