[JS]BOM操作

介绍

BOM(Browser Object Model)是浏览器对象模型

1. window对象是一个全局对象, 也是JS中的顶级对象
2. 通过var定义在全局作用域中的变量和函数都会变成window对象的属性和方法
3. window对象下的属性和方法调用时一般省略window

间歇函数

定时器

定时器是间歇函数的一种, 可以每个每隔一段时间, 重复执行代码, 无需手动触发

// 1.匿名函数
setInterval(()=>{}, 1000)

// 2.函数名调用
function fn() {}
setInterval(fn, 1000) // 不带(),否则只调用一次

// 3.函数调用
function fn() {}
setInterval('fn()', 1000) // 不推荐

// 4.清理定时器
clearInterval(定时器id);

注意:

1. 完整写法由window调用, 一般省略
2. 延迟的毫秒数可以省略, 默认0
3. 定时器创建后会返回 id, 用于清除定时器

延时器

延时器是间歇函数的一种, 可以延时指定时间, 然后执行代码

// 1.匿名函数
setTimeout(()=>{}, 1000)

// 2.函数名调用
function fn() {}
setTimeout(fn, 1000) // 不带(),否则只调用一次

// 3.函数调用
function fn() {}
setTimeout('fn()', 1000) // 不推荐

// 4.清理定时器
clearTimeout(延时器id);

JS执行机制

1. JS语言的特点之一就是单线程, 同一时间只能处理一个任务
2. 这是因为JS设计的使命就是处理网页中的用户交互以及DOM操作, 这就要求程序中所有的任务都必须是线性的, 前一个任务结束, 再执行后一个任务, 只有这样, 才能保证用户交互和DOM操作是有序的, 不然同一时间添加一个元素又删除这个元素, 程序就乱套了, 单线程正好符合这种设计要求
3. 但是单线程也存在问题, 如果JS执行时间过长, 就会造成页面渲染的不连贯, 导致页面阻塞.
4. 为了解决这个问题, HTML提出了Web Worker标准, 允许JS可以创建多个线程, 于是就有了同步和异步的概念,
5. 同步任务就是放在主线程上, 立即执行的任务
6. 异步任务就是交由宿主环境执行, 执行完成后推入任务队列排队的任务, JS的异步是通过回调函数实现的
7. 为了保证同步任务和异步任务有序执行, 就有了事件循环的概念, 就是先执行主线程的同步任务, 等所有同步任务执行结束后, 再依次读取任务队列中的异步任务, 这种不断读取任务, 执行任务的机制, 称为事件循环
8. JS虽然通过事件循环实现了异步编程, 但是本质还是单线程语言
9. 异步任务也可以分两种, 一种是宿主环境执行的宏任务, 执行完毕后推入宏任务队列, 一种是JS引擎执行的微任务, 执行完毕后推入微任务队列, 主线程一旦闲置, 优先清空微任务执行, 再执行宏任务队列

location对象

location对象拆分并保存了URL地址的各个组成部分

1. location.href 获取或设置整个URL
2. location.host 返回域名
3. location.port 返回端口号
4. location.pathname 返回路径
5. location.search 返回 ? 后面的查询参数
6. location.hash 返回 # 后面的内容, 常用于锚点链接
7. location.assign(); 可以跳转页面,有后退功能
8. location.replace(); 替换当前页面,不能后退
9. location.reload(); 刷新当前页面, 如果传入true表示强制刷新(Ctrl + F5)

navigator对象

navigator对象记录了浏览器相关的信息, 较常用的是userAgent属性, 可以返回浏览器版本和平台信息

<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))) {
   window.location.href = "";   //手机
} else {
    window.location.href = "";  //电脑
} 
</script>

histroy对象

history对象可以与浏览器记录进行交互.

1. history.back(); 后退页面
2. history.forward(); 前进功能
3. history.go(参数); 参数1前进页面, 参数-1后退页面

本地存储

把数据存储在用户硬盘中, 由浏览器进行管理, 实现数据持久化存储

sessionStorage

// 储存数据
sessionStorage.setItem('key',value);
// 获取数据
sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 删除所有数据
sessionStorage.clear();

1. 生命周期为关闭浏览器窗口;
2. 在同一个窗口下数据可以共享
3. 容量限制大约5M

localStorage

// 储存数据
localStorage.setItem('key',value);
// 获取数据
localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 删除所有数据
localStorage.clear();

1. 生命周期为永久,除非手动删除;
2. 在不同窗口下数据也可以共享(同一浏览器都可以);
3. 容量限制大约20M

查看本地存储数据

存储复杂数据

本地存储里面只能存储字符串的数据格式, 如需需要储存复杂数据, 就需要使用JSON对象

JSON对象就是 属性 和 值 都由双引号包裹的数据结构

// 序列化
// 把复杂数据转换成JSON字符串
JSON.stringify(数据)

// 反序列化
// 把JSON字符串还原成对象格式 
JSON.parse(数据)

窗口操作

//1.打开空窗口
window.open();   

//2.打开窗口
// url文件路径
// name新窗口的名称
// features窗口属性,大小等信息
// 会返回刚刚创建的窗口,用于关闭
window.open(url,[name],[features]);


//3.关闭窗口
window.close();    

//3.关闭刚刚创建的窗口
newWin.close();   

//4.把当前窗口关闭
window.close();