JavaScript BOM操作
什么是 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 对象是浏览器的顶级对象,它具有双重角色。
- 它是 JS 访问浏览器的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt()等。
注意:window下的一个特殊属性 window.name
页面加载事件
window.onload = function() {}
或者
window.addEventListener("load",function(){})
window.onload 是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)才调用处理函数。
注意:
- 有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。
- window.onload 传统注册事件方式只能写一次,如果有多个,会以最后一个 window.onload 为准。
- 如果使用 addEventListener 则没有限制,写多少个都行。
document.addEventListener("DOMcontentLoaded",function(){})
DOMContentLoaded 事件触发时,仅当 DOM 加载完成,不包括样式表,图片,flash等等。
ie9以上才支持。
如果页面有很多图图片,从用户访问到 onload 触发可能需要较长的时间,交互效果就不能实现,必然影响用户体验,此时用DOMContentLoaded 事件比较合适。
调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){})
window.onresize 是调整窗口大小加载事件,当触发时就调用的处理函数。
注意:
- 只要窗口大小发生像素变化,就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。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() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
注意:
- window 可以省略。
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串
’函数名()‘
三种形式。 - 延迟的毫秒数省略默认是0,如果写,必须是毫秒。
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
setTimeout() 这个函数我们也叫做回调函数 callback
普通函数是按照代码顺序直接调用。
而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。
简单理解,回调,就是回头调用。上一件事情干完,再回头去调用这个函数。
之前我们学的 element.onclick = function() {} 或者 element.addEventListener(“click”,fn) 里面的函数也是回调函数。
停止 setTimeout() 定时器
window.clearTimeout(timeoutID)
// 可以省略window
clearTimeout()
setInterval() 定时器
window.setInterval(回调函数, 间隔毫秒数)
setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。
注意:
- window 可以省略。
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串
’函数名()‘
三种形式。 - 延迟的毫秒数省略默认是0,如果写,必须是毫秒。
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
停止 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 中有两种任务:
同步任务:所有的同步任务都在主线程上执行,形成一个执行栈。
异步任务:异步任务是通过回调函数来实现的,在执行栈执行同步任务时,其中的回调函数会被放到任务队列(消息队列)里面等待主线程执行结束再执行。
一般来说异步任务有如下三种类型:
- 普通事件,如 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)
- 首先执行栈会按照顺序执行同步任务。
- 当执行到包含异步任务的同步任务时,这个同步任务就会被提交到异步进程中进行处理。
- 在异步进程中,其中待处理的任务只有满足了条件时,才会被放到任务队列中。比如点击事件,只有被点击时,其中的异步进程才会被送到任务队列。
- 当执行栈中的同步任务运行完毕,执行栈会将任务队列中的异步任务按顺序拿到执行栈进行执行。
- 然后运行完成后,执行栈并没有停止,它还会不断地去获得任务,执行任务,这种机制叫做循环机制。比如这时我们再次点击页面,异步进程会再次将异步任务放到任务队列,由于执行栈会重复获取任务,执行栈又会将任务队列中的任务拿到执行栈进行执行。
重点:由于主线程不断的重复获取任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环
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操作相关推荐
- javascript的DOM、BOM操作
首先,网页是由一个一个xml的节点构成,页面加载成一刻树状.所以我们通过js操作元素的节点,对元素的增.删.改.查,对元素的属性.值.事件等操作属于DOM操作( document object mod ...
- JavaScript中BOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- JavaScript核心 DOM 和 BOM操作
JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...
- JavaScript之BOM操作
目录 一.前言 二.常用的BOM操作 1. location 2. location.reload() 3. History 4.Navigator 5. Screen 6.innerHight/in ...
- JavaScript中的BOM操作的常见事件
BOM操作的常见事件 1.点击事件clcik onclcik绑定点击 标签ID.onclick = function(){ 程序: } 示例1. d1.onclick = function(){ co ...
- JavaScript Bom和Dom
JavaScript Bom和Dom这一篇就够啦 JavaScript Bom和Dom 1.Web API 基本认知 2.DOM -- 基础 2.1 DOM简介 2.2 获取元素 2.3 事件基础 2 ...
- Web APIs五、BOM操作浏览器
零.文章目录 Web APIs五.BOM操作浏览器 1.Window对象 (1)BOM(浏览器对象模型) BOM(Browser Object Model ) 是浏览器对象模型 window对象是一个 ...
- js 包含某个字符串_[译] 5 大 JavaScript 字符串操作库
原文地址:5 String Manipulation Libraries for JavaScript 原文作者:Mahdhi Rezvi 译文出自:掘金翻译计划 本文永久链接:https://git ...
- javascript BOM对象详解
javascript BOM对象详解 目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...
最新文章
- 百度造车和RoboTaxi利好自动驾驶?不,利好茅台
- 新兴的短距离传输技术-zigbee技术
- Glide核心设计一:皮皮虾,我们走
- VBScript 教程之数据库篇
- (6) Hibernate的集合映射
- java的应用程序开发_开发一个Java应用程序(1)
- nlm算法matlab代码_遗传算法GA的MATLAB代码
- python自带的函数有哪些_为什么说 Python 内置函数并不是万能的?
- B/S和C/S架构图解
- POJ1204 Word Puzzles
- C语言入坑指南-数组之谜
- 开启灯光就是近光吗_有用!科目三灯光模拟操作大全
- 2021.08.28-MMsegmentation0.16.0+Cuda10.1+Ubuntu16.04+Pytorch1.8环境安装
- Java中Spring面试基础题20190302
- oracle varchar2 转换成date,将Oracle VARCHAR2转换为DATE并排除无效数据
- 身份证号码校验工具类—算法
- java输出英文字母_用JAVA编一个程序输出全部的英文字母
- linux 查看进程树,linux怎么查看进程?linux查看和管理进程命令方法
- Java基础知识面试题(总结最全面的面试题)
- xxx is out of date错误