BOM概述

最新推荐文章于 2023-11-27 18:42:34 发布

叆-叇

最新推荐文章于 2023-11-27 18:42:34 发布

阅读量434

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_54481824/article/details/117260419

版权

文章目录

什么是BOM

BOM是浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，而BOM最初是Netscape浏览器标准的一部分。

BOM构成

BOM比DOM更大，他包含着DOM，他的对象为window

window对象是浏览器的顶级对象，他具有双重角色

1.他是js访问浏览器窗口的一个接口。

.2他是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。

在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert（），prompt（）等，但是注意window.name。

窗口加载事件

<script>
window.onload = function(){}
//或
window.addEventListener("load",function(){});
</script>

window.onload是窗口（页面）加载事件，当文档内容完全加载会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。

注意：

1.有了该方法就可以把JS代码写到页面元素的上方，因为onload是等页面内容完全加载完毕再去执行处理函数。

2.该方法传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准

3.如果使用addEventListener则没有限制。
另外：

<script>
document.addEventListener('DOMContentLoaded',function(){})
//DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
//如果页面的图片很多的话，从用户访问到onload触发可能需要较长事件，交互效果就不能实现，必然影响用户的体验，此时DOMContentLoad事件就比较合适
</script>

调整窗口大小事件

<script>
window.onresize = function(){}
window.addEventListener("resize",function(){});
//此为调整窗口大小加载事件，当触发时就调用的处理函数
</script>

注意：

1.只要窗口大小发生像素变化，就会触发这个事件

2.我们经常利用这个事件完成响应式布局。

setTimeout（）定时器

<script>
window.setTimeout(调用函数，[延迟的毫秒数]);
//该方法用于设置一个定时器，该定时器在定时器到期后调用函数
</script>

注意：

1.window可以省略（其实在大部分情况下window都可以省略，以后不再赘述）

2.这个调用函数可以直接写函数，或者写函数名或者采取字符串’函数名（）'三种形式。第三种不推荐

3.延迟的毫秒数省略默认是0，如果写，单位必须是毫秒。

4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符（也就是起个名字）、
停止setTimeout（）定时器

<script>
window.clearTimeout(timeoutID)
</script>

clearTimeout()方法取消了先前通过调用setTimeout（）建立的定时器

setInterval（）定时器

<script>
window.setInterval(回调函数,[间隔毫秒数]);
</script>

该方法每隔一定的时间就调用这个函数

注意：

1.这个调用函数可以直接写函数，或者写函数名或者采取字符串’函数名（）'三种形式。

2.间隔的毫秒数省略默认是0，如果写，必须是毫秒单位，表示每隔多少毫秒就自动调用这个函数。

3.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
停止setInterval（）定时器

<script>
window.clearInterval(intervalID);
//该方法取消了先前调用setInterval（）建立的定时器，括号中的参数就是定时器的标识符
</script>

this关键字

一般情况下this的最终指向的是那个调用它的对象

1.全局作用域或者普通函数中this指向全局对象window

2.方法调用中谁调用this就指向谁

<script>
var o = {
sayHi:function(){
console.log(this);//this指向的是o这个对象
}
}
</script>

3.构造函数中this指向构造函数的实例

<script>
function Fun(){
console.log(this);
}
var fun = new Fun();
</script>

同步和异步：

前言：JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事，这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务都需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题是：如果JS执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，于是，JS中出现了同步和异步。

同步：

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步：
在做一件事时，因为这件事会花费很长时间，在做这件事的同时，还可以去处理其他事情。

JS的执行机制：

1.js在执行过程中会先执行执行栈中的同步任务。

2.异步任务（回调函数）放入任务队列中。

3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

Location对象：

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也成为location对象。

URL：

URL为统一资源定位符，他是互联网上标准资源的地址。互联网上的每个文件都有唯一一个URL，他包含的信息指出文件的位置以及浏览器应该怎么处理他。location对象可以对url进行操作。

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）
location.port	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段（后常跟锚点）

重点记住href和search即可

location对象的方法：

1.location.assign（）可以实现跳转页面，也称为重定向页面。

2.location.replace（）替换当前页面，因为不记录历史，所以不能后退页面

3.location.reload（）重新加载页面，相当于刷新按钮，如果参数为true强制刷新

navigator对象：

navigator对象包含有关浏览器的信息，他有很多属性，我们最常用的是userAgent，该属性可以返回由客户主机发送服务器的user-agent头部的值。

<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script~

注意：
navigator对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

1.navigat数据可被浏览器使用者更改

2.一些浏览器对测试站点会识别错误

3.浏览器无法报告晚于浏览器发布的新操作系统。