什么是 BOM

BOM (Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。

BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

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

DOM BOM
文档对象模型 浏览器对象模型
DOM 就是把 [文档] 当作一个 [对象] 来看待 把 [浏览器] 当做一个 [对象] 来看待
DOM 的顶级对象是 document BOM 的顶级对象是 window
DOM 主要学习的是操作页面元素 BOM 学习的是浏览器窗口交互的一些对象
DOM 是 W3C 标准规范 DOM 是浏览器厂商在各自浏览器上定义的,兼容性比较差

BOM 的构成

window 对象是浏览器的顶级对象,它具有双重角色。

  1. 它是 JS 访问浏览器的一个接口。
  2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt()等。

注意:window下的一个特殊属性 window.name

页面加载事件

window.onload = function() {}
或者
window.addEventListener("load",function(){})

window.onload 是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)才调用处理函数。

注意:

  1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。
  2. window.onload 传统注册事件方式只能写一次,如果有多个,会以最后一个 window.onload 为准。
  3. 如果使用 addEventListener 则没有限制,写多少个都行。
document.addEventListener("DOMcontentLoaded",function(){})

DOMContentLoaded 事件触发时,仅当 DOM 加载完成,不包括样式表,图片,flash等等。

ie9以上才支持。

如果页面有很多图图片,从用户访问到 onload 触发可能需要较长的时间,交互效果就不能实现,必然影响用户体验,此时用DOMContentLoaded 事件比较合适。

调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize",function(){})

window.onresize 是调整窗口大小加载事件,当触发时就调用的处理函数。

注意:

  1. 只要窗口大小发生像素变化,就会触发这个事件。
  2. 我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度。
// 浏览器窗口的当前宽度
window.innerWidth

定时器

window 对象给我们提供了 2 种非常好的方法 - 定时器

setTimeout()

window.setTimeout(调用函数, [延迟的毫秒数])
// 在调用的时候 window 可以省略
setTimeout(function() {console.log('三秒过去了');
}, 3000)
// 延迟时间单位是毫秒,如果不写默认为0
function callback(){console.log('三秒过去了');
}
setTimeout(callback, 3000);
setTimeout('callback()', 3000); // 不提倡这种写法
// 页面中可能有多个定时器,我们经常给定时器加标识符(名字)
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);

setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。

注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串 ’函数名()‘三种形式。
  3. 延迟的毫秒数省略默认是0,如果写,必须是毫秒。
  4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。

setTimeout() 这个函数我们也叫做回调函数 callback

普通函数是按照代码顺序直接调用。

而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。

简单理解,回调,就是回头调用。上一件事情干完,再回头去调用这个函数。

之前我们学的 element.onclick = function() {} 或者 element.addEventListener(“click”,fn) 里面的函数也是回调函数。

停止 setTimeout() 定时器

window.clearTimeout(timeoutID)
// 可以省略window
clearTimeout()

setInterval() 定时器

window.setInterval(回调函数, 间隔毫秒数)

setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。

注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串 ’函数名()‘三种形式。
  3. 延迟的毫秒数省略默认是0,如果写,必须是毫秒。
  4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。

停止 clearInterval() 定时器

window.clearInterval(timeoutID)
// 可以省略window
clearInterval()

this

在我们使用停止定时器时,不能在定时器中使用 this 停止定时器。

因为定时器的时 window 对象的函数,this 指向当前对象,所以指向的是 windows。

所以 this 指向的是调用函数的对象

JS 执行机制

JS 老版本是单线程的

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

比如以下代码:

console.log(1);
setTimeout(function(){console.log(3);
},1000);
console.log(2);

这段代码需要等定时器执行完,才会向下执行代码,如果定时器设置时间较长,那么就会等待很久。

现在新版 Js 支持同步和异步

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

同步

前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

异步

在做一件事情时,因为这件事情需要花费很长时间,在做这件事情的同时,你还可以去处理其他的事情。比如做饭的异步做法,在我们烧水的同时,利用这10分钟,去切菜,炒菜。

同步和异步的本质区别:这条流水线上各个流程的执行顺序不同

JS 执行机制的本质

有如下代码:

console.log(1);
setTimeout(function(){console.log(3);
},0);
console.log(2);

以上代码的输出结果为 1,2,3。

在 JS 中有两种任务:

  1. 同步任务:所有的同步任务都在主线程上执行,形成一个执行栈

  2. 异步任务:异步任务是通过回调函数来实现的,在执行栈执行同步任务时,其中的回调函数会被放到任务队列(消息队列)里面等待主线程执行结束再执行。

    一般来说异步任务有如下三种类型:

    • 普通事件,如 click、resize等
    • 资源加载,如 load、error等
    • 定时器,包括 setInterval、setTimeout等
主线程执行栈 任务队列(消息队列)
console.log(1); function(){ console.log(3); }
setTimeout(fn, 0);
console.log(2);

当执行栈执行到setTimeout(fn, 0);时,定时器本身是同步任务,但是定时器里面的回调函数是异步任务,被放到任务队列中,等待执行栈执行完毕,再去执行任务队列里面的任务。

在执行栈和任务队列之间,又有一个异步进程处理的步骤,这一步骤将决定,回调函数在何时被加入任务队列。

以如下代码举例:

console.log(1);
document.onclick = function() {console.log('click');
}
console.log(2);
setTimeout(function() {console.log(3);
},3000)
  1. 首先执行栈会按照顺序执行同步任务。
  2. 当执行到包含异步任务的同步任务时,这个同步任务就会被提交到异步进程中进行处理。
  3. 在异步进程中,其中待处理的任务只有满足了条件时,才会被放到任务队列中。比如点击事件,只有被点击时,其中的异步进程才会被送到任务队列。
  4. 当执行栈中的同步任务运行完毕,执行栈会将任务队列中的异步任务按顺序拿到执行栈进行执行。
  5. 然后运行完成后,执行栈并没有停止,它还会不断地去获得任务,执行任务,这种机制叫做循环机制。比如这时我们再次点击页面,异步进程会再次将异步任务放到任务队列,由于执行栈会重复获取任务,执行栈又会将任务队列中的任务拿到执行栈进行执行。

重点:由于主线程不断的重复获取任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环

location 对象

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

URL

统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般格式为:

protocol://host[:port]/path/[?query]#fragment
http://www.brokyz.tk/index.html?name=andy&age=18#link
组成 说明
protocol 通信协议 常用的 http、ftp、maito等
host 主机(域名)
port 端口号 可选,省略时使用方案默认端口,如http默认为80
path 路径 有 零或多个/符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
query 参数 以键值对的形式,通过&符号分隔
fragment 片段 #后面内容 常见于链接 锚点

location 对象的属性

属性 返回值
location.href 获取或者设置 整个 URL,如果不打印设置url会实现页面跳转
location.host 返回主机(域名)
location.port 返回端口号 如果未写则返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段 #后面内容 常用于链接 锚点
// 5秒后页面跳转
var t = 5;
setTimeout(function() {if (t == 0){location.href = 'https://baidu.com';}else{t--;}
})

获取 URL 参数

<body><form action="获取URL参数.html"><input type="text" name="uname"><input type="submit" value="提交"></form><div></div><script>console.log(location.search)var params = location.search.substring(1);console.log(params);var arr = params.split('=');console.log(arr);var div = document.querySelector('div');if(arr[1]){div.innerHTML = '这里是' + arr[1];}</script>
</body>
  • substring(1):输入第1位之后的字符
  • split(‘=’):通过=拆分字符,拆分返回拆分后的数组

location 常用方法

location方法 返回值
location.assign(url) 跟 href 一样,可以跳转页面(也称为重定向页面)
location.replace(url) 跳转替换当前页面,因为不记录历史,所以不能后退页面
location.reload() 重新加载页面,相当于刷新按钮或者 f5 如果参数为true 强制刷新 ctrl+f5(无视浏览器缓存)

navigator 对象

navgator 包含了有关浏览器的相关信息,他有很多属性,我们最常用的时 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户哪个终端打开页面,实现跳转。

//
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 = "../H5/index.html"; //手机}

history 对象

window 对象给我们提供了一个 hostory 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的 URL。

history对象方法 作用
history.back() 可以后退功能
history.forward() 前进功能
history.go(参数) 前进后退功能 参数如果是1 前进1 个页面,2是前进2,如果时-1 后退1 个页面

JavaScript BOM操作相关推荐

  1. javascript的DOM、BOM操作

    首先,网页是由一个一个xml的节点构成,页面加载成一刻树状.所以我们通过js操作元素的节点,对元素的增.删.改.查,对元素的属性.值.事件等操作属于DOM操作( document object mod ...

  2. JavaScript中BOM操作

    Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...

  3. JavaScript核心 DOM 和 BOM操作

    JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...

  4. JavaScript之BOM操作

    目录 一.前言 二.常用的BOM操作 1. location 2. location.reload() 3. History 4.Navigator 5. Screen 6.innerHight/in ...

  5. JavaScript中的BOM操作的常见事件

    BOM操作的常见事件 1.点击事件clcik onclcik绑定点击 标签ID.onclick = function(){ 程序: } 示例1. d1.onclick = function(){ co ...

  6. JavaScript Bom和Dom

    JavaScript Bom和Dom这一篇就够啦 JavaScript Bom和Dom 1.Web API 基本认知 2.DOM -- 基础 2.1 DOM简介 2.2 获取元素 2.3 事件基础 2 ...

  7. Web APIs五、BOM操作浏览器

    零.文章目录 Web APIs五.BOM操作浏览器 1.Window对象 (1)BOM(浏览器对象模型) BOM(Browser Object Model ) 是浏览器对象模型 window对象是一个 ...

  8. js 包含某个字符串_[译] 5 大 JavaScript 字符串操作库

    原文地址:5 String Manipulation Libraries for JavaScript 原文作者:Mahdhi Rezvi 译文出自:掘金翻译计划 本文永久链接:https://git ...

  9. javascript BOM对象详解

    javascript BOM对象详解 目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...

最新文章

  1. android系统应用程序,Android系统应用程序基本概念解读
  2. python语言入门p-python语言程序设计基础(第2版)课后答案嵩天
  3. 性能测试真如你想象的那么简单?
  4. 漫画: 什么是外部排序?
  5. OpenCV——图像显示与写入
  6. Bootstrap3 如何防止插件冲突
  7. 第 7 章 Neutron - 071 - 详解 ML2 Core Plugin(I)
  8. Java实现 LeetCode 69 x的平方根
  9. ios Segue传值
  10. mysql的strict_linux关闭mysql strict mode的方法介绍
  11. 20200909 Vedio Game 游戏平台数据分析
  12. 本地测试机构怎么查?第三方测试公司排名情况
  13. 百度网盘解除限速的神器(二)
  14. win10系统如何打开.swf视频文件,flash palyer无法使用
  15. 逆向倾向评分 (Inverse Propensity Scoring, IPS) 原理解析与MF算法的结合使用
  16. 基于bibtex的文献管理(详细)
  17. 人工智能领域数据标注行业的核心需求痛点
  18. 离散数学-集合:2、集合的基本运算
  19. 常用的库代码段pytorch_based【tips】
  20. 接口幂等性校验,太优雅了

热门文章

  1. OceanBase开发者大会震撼来袭
  2. RFC4326中文文档
  3. 线程池中运行的线程,当等待队列未满的情况下,一定不大于核心线程数吗
  4. SQL SERVER 使用作业自动备份及删除过往备份
  5. CRM销售管理的三个步骤
  6. gdal支持Hammer投影的做法
  7. CSMA/CD协议和CSMA/CA协议有什么具体的区别?
  8. Vmware虚拟机安装VMware Tools报错:安装程序无法自动安装主机-客户机共享文件夹驱动程序’和“安装程序无法自动安装Virtual Machine Communication Inter”
  9. Flutter实现json格式化输出
  10. 九日打卡-2-阅读报告