第九章：BOM
1.概述
JavaScript的实现包括以下3个部分：
| ECMAScript(核心) | 描述了JS的语法和基本对象。 |
|---|---|
| 文档对象模型 （DOM） | 处理网页内容的方法和接口 |
| 浏览器对象模型（BOM） | 与浏览器交互的方法和接口 |
javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象
- DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
- BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
- window 是 BOM 对象，而非 js 对象；javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)
BOM 是 Browser Object Model，浏览器对象模型。
刚才说过 DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。
浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面，只需要
location.href = “http://www.xxxx.com”;这个 location 就是 BOM 里的一个对象。
由于BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。
可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
2.window对象
Window 对象表示浏览器中打开的窗口
https://www.runoob.com/jsref/obj-window.html
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 或 每次出现时被自动创建。
2.1 案例演示
alert()
prompt() 输入框
confirm()确认框
定义和用法
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
语法
window.open(URL,name,specs,replace)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//window是顶层对象，可以省略
function dodel(){
if(window.confirm('真的要删除么？')){
alert('删除了');
}else{
var msg=window.prompt('告诉我，为什么放弃?')
alert(msg);
}
}
//演示打开一个窗体
function openwin(){
myWindow=window.open('02.html','_blank','width=600,height=300,left=300,top=200');
myWindow.focus();
}
</script>
</head>
<body>
<button onclick="dodel();">删除</button>
<a href="javascript:void(0);" onclick="openwin();" >打开...</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function closeme(){
if(confirm('真的要关闭么？')){
window.close();
}
}
</script>
</head>
<body>
<h1>我是一个新页面</h1>
<button onclick="closeme();">关闭</button>
</body>
</html>
3.Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
https://www.runoob.com/jsref/obj-screen.html
Screen 对象属性
| 属性 | 说明 |
|---|---|
| availHeight | 返回屏幕的高度（不包括Windows任务栏） |
| availWidth | 返回屏幕的宽度（不包括Windows任务栏） |
| colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
| height | 返回屏幕的总高度 |
| pixelDepth | 返回屏幕的颜色分辨率（每象素的位数） |
| width | 返回屏幕的总宽度 |
//演示打开一个窗体
function openwin(){
//居中显示
var height=window.screen.availHeight/2-150;
var width=window.screen.availWidth/2-300;
myWindow=window.open('02.html','_blank',`width=600,height=300,left=${width},top=${height}`);
myWindow.focus();
}
4.History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。 浏览历史
History 对象属性
| 属性 | 说明 |
|---|---|
| length | 返回历史列表中的网址数 |
History 对象方法
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function goto(){
let page=parseInt(prompt("跳转到第几个?"));
history.go(page);
}
</script>
</head>
<body>
<div>
<a href="javascript:void(0)" onclick="window.history.back();">后退</a>
<a href="javascript:void(0)" onclick="history.forward()">前进</a>
<a href="javascript:void(0)" onclick="goto();">跳转</a>
<a href="javascript:void(0)" onclick="alert('共浏览了:'+history.length)">查看历史</a>
</div>
</body>
</html>
5.Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 **window.location.**xxx 格式的相关属性对其进行访问
Location 对象属性
| 属性 | 描述 |
|---|---|
| hash | 返回一个URL的锚部分 |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| href | 返回完整的URL |
| pathname | 返回的URL路径名。 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
| search | 返回一个URL的查询部分 |
Location 对象方法
| 方法 | 说明 |
|---|---|
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前文档 |
| replace() | 用新的文档替换当前文档 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
console.log('href',location.href);//网址
console.log('hostname',location.hostname);//主机
//console.log(location.hash);//哈希
console.log('pathname',location.pathname);//pathname
console.log('search',location.search);//查询字符串
var d1=new Date();
console.log(d1.toTimeString());
</script>
</head>
<body>
<h1>location地址栏对象</h1>
<a href="javascript:void(0)" onclick="location.assign('02.html');">查看案例02</a>
<a href="javascript:void(0)" onclick="location.reload();">重新加载</a>
<a href="javascript:void(0)" onclick="location.replace('02.html')">替换,没有浏览历史</a>
</body>
</html>
6.JavaScript 存储对象
6.1 就是使用cookie来存储
6.2 会话存储或本地存储
常用在前后端分离的项目中，比如，身份认证，登录成功后，保持登录信息token
Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
- localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
存储对象属性
| 属性 | 描述 |
|---|---|
| length | 返回存储对象中包含多少条数据。 |
存储对象方法
| 方法 | 描述 |
|---|---|
| key(n) | 返回存储对象中第 n 个键的名称 |
| getItem(keyname) | 返回指定键的值 |
| setItem(keyname, value) | 添加键和值，如果对应的值存在，则更新该键对应的值。 |
| removeItem(keyname) | 移除键 |
| clear() | 清除存储对象中所有的键 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function save(){
let key=prompt("请输入key:");
let value=prompt("请输入值:");
window.localStorage.setItem(key,value);
alert('SAVE OK!');
}
function read(){
let key=prompt("请输入key:");
//如果不存在那么null
let value=window.localStorage.getItem(key);
console.log("value-->",value);
//key方法判断key，如果不存在 null
console.log("key-->",localStorage.key('123'));
if(value){
alert(value);
}else{
alert('读取失败');
}
}
function remove(){
let key=prompt("请输入key:");
if(localStorage.getItem(key)==null){
alert(key+'不存在');
return ;
}
localStorage.removeItem(key);
alert('删除OK');
}
function clearAll(){
if(confirm('真的要清空么?')){
localStorage.clear();
alert('存储以清空');
}
}
</script>
</head>
<body>
<button onclick="save();">save 存数据</button>
<button onclick="read();">读取 存数据</button>
<button onclick="remove();">删除</button>
<button onclick="clearAll();">清空</button>
<hr />
</body>
</html>
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
