BOM基础知识

一、什么是BOM

1. BOM概述
   BOM（Browser Object Model）是浏览器对象模型，是由浏览器厂商定义的 JavaScript API 集合。BOM 可以让开发者通过 JavaScript 操作浏览器窗口和框架等浏览器相关的对象，比如 window、location、history、navigator 等对象。

2. DOM 与 BOM 的区别
   DOM（Document Object Model）是文档对象模型，是用来描述 HTML 或 XML 文档结构的编程接口，提供了一种可操作和访问文档内容和结构的方法。DOM 主要针对文档的内容和结构进行操作，而 BOM 主要针对浏览器窗口和框架进行操作。在 DOM 和 BOM 中，最重要的对象分别是 document 和 window。

二、JS 执行队列

1. 单线程
   JavaScript 是一种单线程语言，每个时刻只能执行一段代码。如果多段代码同时执行，就需要将它们按照某种顺序排列，形成执行队列。

2. 同步和异步
   同步代码和异步代码的区别在于是否需要等待某个操作的完成。同步代码会阻塞后续代码的执行，直到当前代码执行完毕；异步代码则不会阻塞后续代码的执行，而是将后续代码放到执行队列里。

三、window 对象的常用事件

1. 窗口加载事件

(1) 窗口加载
window.onload = function() {}或window.addEventListener("load",function() {})在浏览器窗口完全加载页面时触发 load 事件，可以将需要等到页面完全加载后才执行的代码放在 load 事件中，比如操作 DOM 节点等。

window.onload = function() {
  // 页面完全加载后执行的代码
};

注：通过onload事件可以直接将JavaScript代码写在页面元素前面，只需使JavaScript代码在load事件后执行即可。
(2)DOM内容加载
document.addEventListener('DOMContentLoaded',function() {})只加载DOM内容，不包括样式表、图片等等。(如果页面内容较多，建议使用DOMContentLoaded，免得javascript内容半天加载不出来)

document.addEventListener('DOMContentLoaded',function(){
// DOM内容完全加载后执行的代码
})

2. 调整窗口大小事件

在浏览器窗口大小发生改变时触发 resize 事件，可以通过 resize 事件调整页面布局。

window.onresize = function() {
  // 调整窗口大小后执行的代码
};

3. 定时器

(1).设置定时器
setInterval() 和 setTimeout() 是常用的定时器方法，可以用来定时执行 JavaScript 代码。

// 每隔 1 秒执行一次
setInterval(function() {
  console.log('Hello World!');
}, 1000);

// 2 秒后执行一次
setTimeout(function() {
  console.log('Hello World!');
}, 2000);

(2)清除定时器
可以通过 clearInterval() 和 clearTimeout() 方法来停止定时器。

var a = setInterval(function() {
  console.log('Hello World!');
}, 1000);
// 清除定时器
clearInterval(a);

四，location对象

1. URL
   URL即Uniform Resource Locator，统一资源定位符，表示一个资源在网络中的位置。location对象的URL属性表示当前文档的完整URL，包括协议、域名、端口号、路径和查询字符串等信息。例如：

console.log(location.href); // 输出当前页面的完整URL
console.log(location.protocol); // 输出当前页面使用的协议
console.log(location.host); // 输出当前页面的域名和端口号
console.log(location.pathname); // 输出当前页面的路径
console.log(location.search); // 输出当前页面的查询字符串
console.log(location.hash); // 输出当前页面的锚点

2. 参数属性
   在URL中，经常会包含一些参数信息，例如：

https://editor.csdn.net/md?articleId=130476224

，其中的articleId=130476224就是参数。location对象提供了多个属性，可以方便地获取或修改URL中的参数信息。

(1)search
search属性表示URL中的查询字符串部分，包括‘？’和后面的所有内容。例如：http://www.example.com/md?id=123&name=John中的?id=123&name=John就是查询字符串。使用search属性可以获取或设置查询字符串信息，例如：

console.log(location.search); // 输出当前页面的查询字符串，如果没有则为空字符串
location.search = "?id=456&name=Mary"; // 修改当前页面的查询字符串
console.log(location.href); // 输出修改后的URL

(2) hash
hash属性表示URL中的锚点部分，包括#和后面的所有内容。例如：http://www.example.com/md#abc中的#chapter1就是锚点。使用hash属性可以获取或设置锚点信息，例如：

console.log(location.hash); // 输出当前页面的锚点，如果没有则为空字符串
location.hash = "#efg"; // 修改当前页面的锚点
console.log(location.href); // 输出修改后的URL

五、navigator对象

navigator 对象提供了浏览器相关的信息，比如浏览器的名称、版本等等。
1.navigator 对象的常用属性：

appName：浏览器名称；
appVersion：浏览器版本号；
language：浏览器的默认语言；
platform：浏览器所在操作系统的名称；
userAgent：包含浏览器和操作系统的信息字符串。

console.log(navigator.appName); // Chrome
console.log(navigator.appVersion); // 93.0.4577.63
console.log(navigator.language); // zh-CN
console.log(navigator.platform); // Win64
console.log(navigator.userAgent); // phonelpad|pod| iPhone|iPod| iosliPad|Android lMobile|BlackBerry|IEMobile   | MQQBrowser | JUC | Fennec | wOSBrowser | BrowserNG | Webosl | Symbian | Windows Phone
————————————————

六、history对象

history 对象包含用户访问过的URL。可以使用 history 对象的
back() 和 forward() 方法实现在浏览器历史记录中向后或向前导航。
go() 方法有一个整数参数，参数表示前进几个页面，如参数=1，则=forward，如参数=-1，则=back。

// 后退
history.back();

// 前进
history.forward();

// 跳转到下一项
history.go(1)

七、screen对象

这个对象在编程中用处不大，下表列出了所有属性及支持相应属性的浏览器。

八、PC端网页特效

在 PC 端网页中，常常需要一些元素的偏移量、可视区大小、滚动条位置等信息。下面我们介绍一些常见的 PC 端网页特效。

1. 元素偏移量 offset 系列
   offsetWidth：包括元素的宽度、水平内边距和边框；
   offsetHeight：包括元素的高度、垂直内边距和边框；
   offsetLeft：元素的左边框距离包含元素的边框的左边界的距离；
   offsetTop：元素的上边框距离包含元素的边框的上边界的距离。

html:

<div id="box" style="width: 100px; height: 100px; border: 1px solid #000; padding: 10px;">
box</div>

javascript:

var box = document.getElementById("box");
console.log(box.offsetWidth); // 122
console.log(box.offsetHeight); // 122
console.log(box.offsetLeft); // 8
console.log(box.offsetTop); // 8

2. 元素可视区 client 系列
   

7.3 元素滚动scroll系列