JavaScript中BOM简介及其对象、js执行机制
目录
- BOM简介
- 什么是BOM
- DOM和BOM的区别
- BOM的构成
- Window对象的常见事件
- 窗口加载事件
- 调整窗口大小事件
- 定时器函数
- setTimeout( )定时器
- 停止setTimeout( )定时器
- setInterval( )定时器
- 停止setInterval( )定时器
- js执行机制
- js是单线程
- 同步和异步
- 同步任务和异步任务
- js执行机制
- location对象
- 什么是location对象
- URL
- location对象的属性
- location对象的方法
- navigator对象
- navigator常用属性
- navigator常用方法
- history对象
- history常用属性
- history常用方法
BOM简介
什么是BOM
BOM(Browser Object Model):浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性。
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
DOM和BOM的区别
DOM:
- 文档对象模型
- DOM就是把文档当作一个对象来看待
- DOM的顶级对象是document
- DOM主要是操作页面元素
- DOM是W3C标准规范
BOM:
- 浏览器对象模型
- 把浏览器当作一个对象看待
- BOM的顶级对象是window
- BOM主要是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的,兼容性较差
BOM的构成
- BOM比DOM大,包括DOM
window对象是浏览器的顶级对象,一方面,它是js访问浏览器窗口的一个接口;另一方面,它是一个全局对象,定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用时可以省略window。
Window对象的常见事件
窗口加载事件
- window.onload事件:是窗口(页面)加载事件,当文档内容(包括图像、脚本文件、CSS文件等)完全加载完成会触发该事件。
window.onload = function() { } window.addEventListener('load',function() { })
- 有了window.onload就可以把js代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数
- document.DOMContentLoaded加载事件,会在DOM加载完成时触发,这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。
document.addEventListener('DOMContentLoaded',fuction() { })
- 如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded事件比较合适
le9以上才支持
调整窗口大小事件
window.onresize:当浏览器窗口大小发生改变时触发该事件。
window.onresize = function() { }window.addEventListener('resize',function() { })
- 只要窗口大小发生像素变化,就会触发这个事件
- 我们经常利用这个事件完成响应式布局
定时器函数
window对象为我们提供了两个非常友好的方法:setTimeout、setInterval。
setTimeout( )定时器
setTimeout:在给定的时间(以毫秒为单位)之后,执行函数,返回值是一个定时器对象。
window.setTimeout(function() { },时间)
- window可以省略
- 延迟的毫秒数省略默认为0,如果写必须是毫秒
- 因为定时器可能有很多,我们经常给定时器赋值一个标识符
- setTimeout( )这个调用函数也称为回调函数callback
停止setTimeout( )定时器
clearTimeout:清除setTimeout定时器对象。
window.clearTimeout(定时器对象)
setInterval( )定时器
setInterval方法重复调用一个函数,每隔这个时间,就会调用一次回调函数。
window.setInterval(function() {},时间)
- 以毫秒为单位
停止setInterval( )定时器
clearInterval方法取消了先前通过调用setInterval( )建立的定时器。
window.clearInterval(定时器对象)
js执行机制
js是单线程
JavaScript的一个特点是单线程,也就是说,同一个时间只能做一件事。
这是因为JavaScript这门脚本语言诞生的使命所致,JavaScript是为处理页面中用户的交互以及操作DOM而诞生的。
单线程也就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。
这样导致的问题是,如果js执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
进程:程序的一次动态运行,有独立的内存空间
线程:是进程的运行单位,一个进程可以分为若干个线程
同步和异步
为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。
于是,js中出现了同步和异步。
同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。
异步:在做一件事情的同时去做其他的事情。
区别:执行顺序不同。
同步任务和异步任务
同步任务:同步任务都在主线程上执行,形成一个执行栈。
异步任务:js的异步是通过回调函数实现的, 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。
一般而言,异步任务有以下三种类型:
- 普通事件,如click,resize等
- 资源加载,如load,error等
- 定时器,包括setInterval、setTimeout等
js执行机制
- 先执行执行栈中的同步任务
- 异步任务(回调函数)放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
console.log(1)document.onclick = function() {console.log('click')
}console.log(2)setTimeout(function() {console.log(3)
},3000)//执行结果:1 2 3 click 或 1 2 click 3
执行机制示意图:
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)。
location对象
什么是location对象
window对象给我们提供了一个location属性用于获取或设置窗体的url,并且可以用于解析url。
因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
URL
统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址,互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=19#link
- protocol:网络协议(http、ftp、mailto等)
- host:主机(即服务器名),例如:本地机的ip是127.0.0.1,或 localhost
- port:端口,65535个,0-1023:由系统使用;1024-65535:用户使用
- path:路径,若文件的位置:users/index.html
- query:参数,以键值对的形式表示,参数之间用‘&’分隔,参数和地址之间用’?'分隔
location对象的属性
location对象的方法
navigator对象
navigator常用属性
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
navigator常用方法
javaEnabled( ):指定是否在浏览器中启用java。
history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互。
该对象包含用户(在浏览器窗口中)访问过的URL。
history常用属性
history.length:返回历史列表中的网址数
history常用方法
- history对象一般在实际开发中比较少用,但会在一些OA办公系统中见到
JavaScript中BOM简介及其对象、js执行机制相关推荐
- JavaScript中BOM及DOM的学习
JavaScript中BOM及DOM的学习 文章目录 JavaScript中BOM及DOM的学习 1 BOM编程 1.1 BOM编程概述 1.1.1 BOM编程的概念 1.1.2 BOM编程的作用 1 ...
- JavaScript中BOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- JavaScript中的函数是对象?
函数是第一类对象(first-class object),被称为一等公民.函数与对象共存,我们也可以认为函数就是其他任意类的对象. 那么今天,就让我们一起简单聊一聊JavaScript的函数吧! 目录 ...
- JavaScript系列之JS执行机制
文章の目录 1.JS是单线程 2.一个问题 3.同步和异步 3.1.同步 3.2.异步 3.3.同步和异步的本质区别 3.4.同步任务 3.5.异步任务 4.JS执行机制 5.示例 6.事件循环 7. ...
- 【JavaScript】JS执行机制微任务和宏任务
文章目录 一.了解JS执行机制 二. 异步任务(宏任务.微任务) 1.宏任务 2.微任务 三.实操演练 解析: 一.了解JS执行机制 在学习 promise(期约) 之前,我们需要了解JS的执行机制, ...
- 浏览器交响曲 (一)浏览器中的js执行机制
浏览器的工作原理 浏览器中的js执行机制 单线程的含义 同步.异步 完了吗?事情并非如此 所以执行的机制是怎样的?(宏任务.微任务) 个人理解: 希望过路大佬不吝赐教 浏览器中的js执行机制 今天在网 ...
- 解决2020版IDEA的JAVAScript中找不到vue.js问题
解决2020版IDEA的JAVAScript中找不到vue.js问题 1.安装插件 打开IDEA的界面如下 步骤:(1)file-->setting-->plugins (2)在搜索框 ...
- Js执行机制——同步和异步
JS是单线程 JavaScript 语言的一大特点就是单线程,同一个时间只能做一件事.JavaScript 是为处理页面中用户的交互,以及操作DOM 而诞生的,比如我们对某个DOM元素进行添加和删除操 ...
- JS执行机制、同步和异步、宏观任务和微观任务
1. JS 是单线程 JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. 这是因为 Javascript 这门脚本语言诞生的使命所致--JavaScript 是为处理页 ...
最新文章
- CSS之布局(行内元素的盒模型)
- 4.4MSSQLServer常用版本介绍
- oracle表空间处理操作
- 首次合作带给我的感想
- MySQL sql99语法—左(右)外连接
- initialization of 'XXX' is skipped by 'case' label
- mysql查找表shoe table,mysql命令行常用命令
- springcloud hystrix概述(一)
- .Net的类型构造器-static构造函数
- docker中使用git_如何在 Docker 中使用 Docker
- retinex算法小感
- 阿里云云效Maven仓库
- 《少有人走的路:心智成熟的旅程》读书摘要
- php mongodb的pecl,PECL方式安装php-mongodb扩展步骤详解
- loj6388 「THUPC2018」赛艇 / Citing
- 用Arduino播放音乐
- Double和Float类型的max、min、isNaN、isFinite、isInfinite方法
- Bilibili 视频下载 Python 实现
- Microsoft office 2007 word PPT 转pdf的插件
- 怎么把两个音频合成一个
热门文章
- c语言程序一键删除文件,VC实现批量删除指定文件的方法
- sqlalchemy批量删除数据、全量删除
- python 文件名称唯美_python 采集唯美girl
- 内存学习(二)内存溢出介绍以及解决思路
- 团队项目——软件需求分析(NABCD)
- 微信小程序 时间格式化处理方法【兼容ios】
- android studio findbugs 过滤,Android Studio中使用FindBugs
- Vue3运行源码-调试报错:Command failed with exit code 128: git rev-parse HEAD
- 安装Sql server2019时出现错误:服务没有及时响应启动或控制请求
- 一起看 I/O | Android 开发工具最新更新