什么是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>