目录

​一、概述​

​二、window 对象​

​1、常用属性(对象)​

​2、常用方法​

​三、History 对象​

​1、常用属性​

​2、常用方法​

​四、Location对象​

​1、常用属性​

​2、常用方法​

​五、Navigator 和 screen 对象​


一、概述

JS 的 BOM 对象就是浏览器对象模型,用于控制浏览器的行为,它提供了独立于内容与浏览器窗口进行交互的对象,BOM是一个分层结构:

JavaScript 的 BOM 对象(window 对象、History对象、Location 对象、Navigator 和 screen 对象)_History对象

二、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>