什么是BOM
BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。
window对象
window对象是BOM的核心，它表示一个浏览器的实例。
在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局对象存在的。
全局作用域：
window对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。
window中的open与close方法
- 使用 window.open() 方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。
window.close():关闭本窗口page.close():需要关闭指定页面,那么就用指定的页面调用close方法
<script>
let open = document.getElementById('open');
let close = document.getElementById('close');
let page;
open.onclick = function () {
// 利用window对象来打开新的窗口页面
window.open('http://www.jd.com');
page = window.open('http://www.jd.com');
}
close.onclick = function () {
// 利用window对象关闭页面
window.close();//如果直接调用 ，那么就是关闭当前页面
// page.close(); //需要关闭指定页面，就要用指定页面调用close方法
}
</script>
window中的三个事件
window.onload：
等待页面加载完毕之后再执行window.onbeforeunload：
在页面关闭之前,要关闭还没关闭的那一刹那执行window.onunload：
页面正在关闭(执行完这个事件,整个页面就被关闭了)
window对象
location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
href属性：- href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面。
- 显示网站当前的地址
console.log(location.href);
assign() 方法- 所用和href一样，使浏览器跳转页面，新地址错误参数传递到assign ()方法中
replace()方法- 替换页面地址，只不过使用replace方法跳转地址不会体现到历史记录中。
reload() 方法- 用于强制刷新当前页面
- location = ‘./demo.html’;直接跳转demo.html
navigator对象
- navigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等
各种与浏览器相关的信息。 - 我们有时会使用
navigator的userAgent属性来检查用户浏览器的版
screen对象
- screen 对象基本上只用来表明客户端的能
力，其中包括浏览器窗口外部的显示器的
信息，如像素宽度和高度等。 - 该对象作用不大，我们一般不太使用。
history对象
history 对象保存着用户上网的历史记录，
从窗口被打开的那一刻算起。
go()- 使用 go() 方法可以在用户的历史记录中任意跳转，可以向后也可以向前。
back()- 向后跳转
forward()- 向前跳转
document对象
- document对象也是window的一个属性，这个对象代表的是整个网页的文档对象。
- 我们对网页的大部分操作都需要以document对象作为起点。
localStorage对象
利用localStorage保存的数据,是
永久存在,除非手动删除(关闭浏览器或者重启电脑也不会清空)
利用键值对的结构操作数据
localStorage.setItem(key, value);保存数据localStorage.getItem(key);获取数据localStorage.removeItem(key);删除数据localStorage.clear();清空所有数据- 保存对象需使用JSON.stringify()将js转换成json
- 获取对象需使用JSON.parse()将json转换成js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
</head>
<script>
window.onload = function () {
// 1.保存数据
let textKey = document.getElementById('textKey');
let textValue = document.getElementById('textValue');
let save = document.getElementById('save');
save.onclick = function () {
// 获得用户输入的数据
let key = textKey.value;
let value = textValue.value;
// 保存数据
localStorage.setItem(key, value);
}
// 获取数据
let getKey = document.getElementById('getKey');
let read = document.getElementById('read');
read.onclick = function () {
let key = getKey.value;
// 根据key值获取数据
console.log(localStorage.getItem(key));
}
// 删除数据
// 通过key值来删除
let removeKey = document.getElementById('removeKey');
let remove = document.getElementById('remove');
remove.onclick = function () {
let key = removeKey.value;
// 删除数据
localStorage.removeItem(key);
}
// 4.清空所有数据
let clear = document.getElementById('clear');
clear.onclick = function () {
// 所有的数据都会被删除
localStorage.clear();
}
}
</script>
<body>
数据的key：<input type="text" id="textKey">
<br>
数据的value: <input type="text" id="textValue">
<button id="save">保存数据</button>
<br>
根据key值获取数据： <input id="getKey">
<br>
<button id="read">获取数据</button>
<br>
根据key值删除数据：<input type="text" id="removeKey">
<br>
<button id="remove">删除数据</button>
<br>
<button id="clear">清空数据</button>
</body>
</html>
sessionStorage保存数据: 短暂的保存
使用与localStorage一样，只是localStorage是永久保存，sessionStorage是短暂保存数据
draggable: 拖拽属性
一般标签,默认都是无法拖拽的
图片标签,默认是支持拖拽的
拖拽属性一般都是配合拖拽事件使用
<div id="box" draggable="true"></div>