那BOM呢，给我的落差感数的清吗（BOM初学博客）

ddihan

已于 2023-05-07 18:09:05 修改

阅读量112

点赞数

文章标签： javascript 前端 html

于 2023-05-07 15:51:18 首次发布

本文链接：https://blog.csdn.net/weixin_73972399/article/details/130543326

版权

BOM（Browser Object Model）是指浏览器对象模型，它是由浏览器厂商自己定义和实现的一套操作浏览器窗口、文档以及其它组件的API。其中最常见的对象是window对象。

一、什么是BOM

1.1 BOM概述

BOM包含了很多对象，例如：

window
navigator
screen
location
history

其中，最常用的是window对象，它用来表示整个浏览器窗口。可以使用window对象来控制浏览器窗口的大小、位置、加载新的页面等操作。

1.2 DOM与BOM的区别

DOM（Document Object Model）是文档对象模型，是用来操作网页文档的API。与BOM不同的是，DOM并不是由浏览器厂商定义和实现的，而是由W3C（World Wide Web Consortium）组织制定的标准。DOM包含很多对象，最常见的是document对象。

DOM是基于文档的，而BOM是基于浏览器窗口的。DOM用来操作网页文档，而BOM用来操作浏览器窗口，例如设置窗口大小、位置、打开新的窗口等。

二、 window对象的常用事件

2.1 窗口加载事件

当浏览器窗口完全加载所有HTML、CSS、JS和图片等资源后触发。可以使用window.onload事件来执行一些需要等到页面加载完成后才能执行的操作。

<body onload="init()"> 
<!-- HTML代码 --> 
</body> 
<script> 
function init() { 
// 页面加载完成后执行的操作 
} 
</script>

2.2 调整窗口大小事件

当用户调整浏览器窗口大小时触发。可以使用window.onresize事件来监听窗口尺寸变化，并根据新的窗口大小重新布局页面。

window.onresize = function() { // 窗口大小发生变化后执行的操作 };

2.3 定时器

JavaScript中的定时器可以用来在指定时间后执行某些操作，通常使用setTimeout()和setInterval()函数来设置定时器。两者的区别在于，setTimeout()只会执行一次指定的代码，而setInterval()会重复执行。

2.3.1 设置定时器

使用setTimeout()函数来设置定时器，语法为：

setTimeout(code, delay)

其中，code是要执行的代码，delay是要延迟的时间（单位毫秒）。

setTimeout(function() { 
// 延迟3秒后执行的代码 
}, 3000);

2.3.2 回调函数

定时器到达指定时间后会执行一个回调函数，可以在回调函数中执行需要的操作。

setTimeout(function() { 
console.log('定时器到达'); 
}, 3000);

2.3.3 停止定时器

使用clearTimeout()函数来停止定时器，语法为：

clearTimeout(timer)

其中，timer是setTimeout()函数返回的计时器ID。

var timer = setTimeout(function() {
 // 延迟3秒后执行的代码 
}, 3000); 
// 取消定时器 
clearTimeout(timer);

三、 JS执行队列

JavaScript是一种单线程的语言，也就是说，在同一个时间只能执行一段代码。当有异步操作需要执行时，JavaScript会将其放入事件队列中，等待JavaScript引擎空闲时再依次执行。

3.1 单线程

JavaScript在执行时只有一个线程，也就是说同一个时间只能执行一段代码，不能同时执行多个任务。

3.2 同步和异步

同步指代码按顺序执行，必须等待前面的代码执行完成后才能执行后面的代码。而异步指代码不按顺序执行，可以在前面的代码没有执行完成之前就执行后面的代码。

3.3 JS执行机制

JavaScript中的异步操作通常使用事件队列来实现。当异步操作完成后将会加入到事件队列中，然后等待JavaScript引擎空闲时，将事件队列中的操作取出并依次执行。

四、 location对象

location对象包含当前窗口中加载文档的URL信息。可以通过location.href属性来获取和设置当前文档的URL。

console.log(location.href); 
// 获取当前文档的URL 
location.href = 'http://www.example.com'; 
// 设置当前文档的URL

五、 navigator对象

navigator对象提供了浏览器相关的信息，包括浏览器的名称、版本、语言等。

console.log(navigator.userAgent); 
// 获取浏览器的用户代理字符串

六、history对象

history对象用来操作浏览器的历史记录，例如history.back()方法可以返回上一个访问过的页面，history.forward()方法可以前进到下一个访问过的页面。

history.back(); 
// 返回上一个访问过的页面 
history.forward(); 
// 前进到下一个访问过的页面

七、 PC端网页特效

7.1 元素偏移量offset系列

offsetWidth、offsetHeight、offsetLeft和offsetTop属性可以用来获取元素的宽度、高度以及相对于父元素的左边距和上边距。

var elem = document.getElementById('my-elem'); 
console.log(elem.offsetWidth); 
// 获取元素的宽度 
console.log(elem.offsetHeight); 
// 获取元素的高度 
console.log(elem.offsetLeft); 
// 获取元素相对于父元素的左边距 
console.log(elem.offsetTop); 
// 获取元素相对于父元素的上边距

7.2 元素可视区client系列

clientWidth、clientHeight、scrollLeft和scrollTop属性可以用来获取元素的可视区域宽度、高度以及滚动条的位置。

var elem = document.getElementById('my-elem'); 
console.log(elem.clientWidth); 
// 获取元素的可视区域宽度 
console.log(elem.clientHeight); 
// 获取元素的可视区域高度 
console.log(elem.scrollLeft); 
// 获取元素的水平滚动条位置 
console.log(elem.scrollTop); 
// 获取元素的垂直滚动条位置

7.3 元素滚动scroll系列

scrollWidth和scrollHeight属性可以用来获取元素内容的实际宽度和高度，scrollBy()和scrollTo()方法可以用来控制元素的滚动位置。

var elem = document.getElementById('my-elem'); 
console.log(elem.scrollWidth); 
// 获取元素内容的实际宽度 
console.log(elem.scrollHeight); 
// 获取元素内容的实际高度 
elem.scrollBy(0, 100); 
// 将元素向下滚动100个像素 
elem.scrollTo(0, 0); 
// 将元素滚动到顶部

ddihan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
那BOM呢，给我的落差感数的清吗（BOM初学博客）

windownavigatorscreenlocationhistory其中，最常用的是window对象，它用来表示整个浏览器窗口。可以使用window对象来控制浏览器窗口的大小、位置、加载新的页面等操作。
复制链接

扫一扫