1、简介
BOM(Browser Object Mode) 是指(浏览器对象模型),是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
2、DOM和BOM的区别
DOM | BOM |
浏览器对象模型 | 文档对象模型 |
DOM就是把【文档】当做一个【对象】来看待 | BOM就是把【浏览器】当做一个【对象】来看待 |
DOM的顶级对象是document | BOM的顶级对象是window |
DOM主要学习的是操作页面元素 | BOM主要学习的是浏览器窗口交互的一些对象 |
DOM是W3C标准规范 | BOM是浏览器厂商在各自浏览器上的定义,兼容性较差 |
3、BOM的顶级对象window
BOM比DOM更大,它包含DOM
- window对象是浏览器的顶级对象,它具有双重角色。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- 在调用的时候可以省略window,浏览器对话框都属于window对象方法,如alert()、prompt()等,完整的写法: window.alert() 、 window.prompt()
注意:window下的一个特殊属性window.name 定义变量时的变量名不要是: var name = 10;
代码示例:
<body>
<div>123</div>
<script>
// BOM比DOM更大,它包含DOM
var div = window.document.querySelector('div')
console.log(div);
// 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
var num = 10;
console.log(num);
console.log(window.num);
function fn() {
console.log(11);
}
// 完整写法
window.fn()
window.alert(11)
// 简写
fn()
alert(11);
console.dir(window);
</script>
</body>
4、window 常见事件
4.1 窗口加载事件
窗口加载事件1:
window.onload,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)
注意:
- 有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数。
- window.onload 传统的注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。
- 如果使用 addEventListener 注册的事件则没有限制,写多少个都行
窗口加载事件2:
DOMContentLoaded 事件触发,仅当DOM加载完成,不包括样式,图片,flash等等。 le9以上才支持
优点:如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然影响用户体验,此时用DOMContentLoaded事件更合适。
代码示例:
<body>
<button>点击1</button>
<button>点击2</button>
<script>
// window.onload = function () {
// var btn = document.querySelector('button');
// btn.addEventListener('click', function () {
// alert('知否知否,点我应有弹框在手~');
// })
// }
var btn = document.querySelectorAll('button');
window.addEventListener('load', function () {
btn[0].addEventListener('click', function () {
alert('知否知否,点我应有弹框在手——————');
})
})
// window.onload 是窗口加载事件,当文档内容完全加载完成会触发该事件
window.addEventListener('load', function () {
alert('文档内容完全加载完成');
})
// DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式,图片,flash等等。ie9以上才支持
window.addEventListener('DOMContentLoaded', function () {
btn[1].addEventListener('click', function () {
alert('知否知否,点我应有弹框在手!!!!!');
})
})
</script>
</body>
4.2 调整窗口大小事件
window.onresize 是调整窗口大小加载事件,当触发时就调用的处理函数。
注意:
- 只要窗口大小发生变化,就会触发这个事件
- 我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
代码示例:
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<script>
window.addEventListener('DOMContentLoaded', function () {
var div = document.querySelector('div');
window.addEventListener('resize', function () {
// 判断窗口大小 小于等于800 时隐藏div盒子
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
console.log('当前窗口宽度大小为:', innerWidth);
})
})
</script>
<div></div>
</body>
5、定时器
5.1 定义定时器
介绍
window对象给我们提供了2个非常好用的方法-定时器
- setTimeout()
- setlnterval()
语法
- window.setTimeout(调用函数,[延迟的毫秒数]),setlnterval() 的格式一样
- window.setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数,只会执行一次,setInterval()方法回调一个函数,每隔一段时间,就去调用函数(重复执行)
- 这个window在调用是可以省略
- 延时单位是毫秒,可以省略,省略后默认是0 ,1s=1000毫秒
- 这个调用函数可以直接写函数 还可以写函数名,直接写函数名调用函数是不用小括号()
- 页面中可能有很多的定时器,我们经常给定时器加上标识符(名字)
setTimeout定时器代码示例
<body>
<script>
setTimeout(function () {
console.log('时间到了');
}, 2000);
function callback() {
console.log('爆炸了~~');
}
// setTimeout(callback, 3000);
// setTimeout('callback()', 3000);//我们不提倡这种写法
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
</script>
</body>
注意:setTimeout 延时时间到了就调用这个函数 只调用一次
setInterval定时器代码示例
<body>
<script>
var timer1 = setTimeout(function () {
console.log('我爆炸了');
}, 5000)
var timer1 = window.setInterval(function () {
console.log('我爆炸了');
}, 1000)
</script>
</body>
区别:
- setTimeout() 延时时间到了就调用这个函数 只调用一次
- setInterval() 方法回调一个函数,每隔一段时间,就去调用函数
5.2 清除定时器
清除setTimeout创建的定时器
语法
window.clearTimeout(timeoutID); timeoutID(定时器的名字)
代码示例
<body>
<button>清除定时器</button>
<script>
var timer = setTimeout(function () {
console.log('我爆炸了');
}, 5000)
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
window.clearTimeout(timer);
})
</script>
</body>
清除setInterval()创建的定时器
语法
window.clearInterval(intervalID) timeoutID(定时器的名字)
代码示例
<body>
<button>清除定时器</button>
<button>开始定时器</button>
<script>
var btn = document.querySelectorAll('button');
var timer = null;//全局变量 null 空对象
// 开始定时器
btn[1].addEventListener('click', function () {
timer = setInterval(function () {
console.log(1);
}, 1000)
})
// 清除定时器
btn[0].addEventListener('click', function () {
window.clearInterval(timer)
})
</script>
</body>
6、同步和异步
同步任务
同步任务都是在主线程上执行,形成一个执行栈。
异步任务
JS的异部任务是通过回调函数实现的。
一般而言,异部任务有以下三种类型。
- 普通事件:如click、resize等
- 资源加载:如load、error等
- 定时器,包括setlnterval、setTimeout等
JS执行机制
- 先执行栈中的同步任务。
- 异步任务(回调函数)放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务任务结束等待状态后,进入执行栈,开始执行。
注意:栈结构是先入后出
7、location对象
7.1 介绍
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象.
7.2 URL
统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它
URL 的一般语法为:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
URL 的一般语法为:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
http通信协议 www.itcast.cn主机(域名--和主机ip关联的东西,作用方便记忆) index.html路径 ?后面是url参数
URL组成
组成 | 说明 |
protocol | 通信协议 常用的http,ftp,maito等 |
host | 主机(域名)www.itheima.com |
port | 端口号 可选,省略时使用方案的默认端口如http的默认端口号为80 |
path | 路径由零或多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址 |
qurey | 参数 以键值对的形式,通过&符号分隔开来 |
fragment | 片段 #后面内容 常见于链接 锚点 |
7.3 location 对象的属性
location 对象的属性 | 返回值 |
location.href | 获取或设置整个URL |
location.host | 返回主机(域名)www.itheima.com |
location.port | 返回端口号 如果未写返回 空字符串 |
location.pathname | 返回 路径 |
location.search | 返回 参数 |
location.hash | 返回 片段 #后面内容 常见于链接 锚点 |
重点记住:href 和 search
location.href 的使用
例子:5秒钟跳转页面
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
// btn.addEventListener('click', function () {
// console.log(window.location.href);
// location.href = 'https://www.baidu.com';
// })
var i = 5;
// 先调用一次函数防止第一次刷新页面空白
fn();
var timer = setInterval(fn, 1000);
function fn() {
if (i === 0) {
// location.href = 'http://www.itcast.cn';
clearInterval(timer)
location.href = 'https://www.baidu.com'
} else {
div.innerHTML = '还有' + i + '秒钟跳转页面';
}
i--;
}
</script>
</body>
7.4 location常用的方法
<body>
<button>点击</button>
<script>
var btn = document.querySelector('button');
//点击页面跳转
btn.addEventListener('click', function () {
// 记录浏览历史,所以可以实现后退功能
// location.assign('http://www.itcast.cn');
// 不记录浏览历史,所以不可以实现后退功能
// location.replace('http://www.itcast.cn');
//重新加载 刷新页面 相当于 浏览器的刷新按钮
location.reload();
location.reload(true);//强制刷新
})
</script>
</body>
8、navigator对象
window.navigator 对象包含有关访问者的信息
代码示例:
判断设备是移动端还是PC
<body>
<script>
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
console.log('手机');
} else {
console.log('电脑');
}
</script>
</body>
9、history对象
history 对象方法 | 作用 |
back() | 可以后退功能 |
forward() | 可以前进功能 |
go(参数) | 前进后退功能,参数如果是1前进一个页面,-1后退一个页面 |
代码示例
<body>
<a href="https://www.baidu.com">点它点他点她</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
// history.forward();
history.go(1);
})
</script>
</body>
10、本地存储
本地存储特点
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量大,sessionStorage约5M、localStorage 约20M
- 只能储存字符串,可以将对象JSDN.stringify()编码后储存
window.sessionStorsge
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式储存使用
window.localStorage
-
声明周期永久生效,除非手动删除 否则关闭页面也会存在
-
可以多窗口(页面)共享(同一浏览器可以共享)
-
以键值对的形式存储使用
区别
- 生命周期的不同:
sessionStorage
在浏览器存储数据的页面关闭以后存储的数据就消失了,但是localStorage
即使浏览器存储数据的页面关闭了,数据也不会丢失 - 存储大小不同:sessionStorage约5M、localStorage 约20M
语法:sessionStorage
与
localStorage 是一样的
存储数据
sessionStorage.setItem('key', value) key 键名 value 存储的数据
获取数据
sessionStorage.getItem('key') key 要获取的键名
删除数据
sessionStorage.removeItem('key') 键名
清空所有数据
sessionStorage.clear()
如要使用localStorage把sessionStorage改为
localStorage