锐客网

  1. 首页 > it技术 > >

前端|JavaScript BOM 概述与内置对象

javascript前端domBOM

一、BOM概述
BOM（Browser Object Model）即浏览器对象模型，是一套用来管理控制浏览器的规则。
（1）BOM和DOM很像，都是一套管理抽象对象的规则。
（2）BOM主要负责页面与页面之间的通讯。
（3）BOM的核心对象是window对象，通常情况下说BOM一般都是说的window对象。
（4）BOM因为是对浏览器进行管理的规则，因此并没有统一的标准。


二、BOM与DOM的关系
DOM通过document对象来访问、控制、修改html和xhtml等文档中的内容；
BOM通过window对象来访问、控制、修改浏览器中的内容
联系：BOM包含DOM，BOM规则从范畴上来说，包括DOM规则，从而使得html文档的脚本JavaScript操作可以通过访问浏览器、进而通过执行浏览器对象的DOM操作来获取文档的内容。
window.document.querySelector("xxx").onclick = functon () {};

window.console.log("xxx");

区别：DOM描述了处理网页内容的方法和接口，即操作页面内容；
BOM描述了与浏览器进行交互的方法和接口，即操作页面之间；

前端|JavaScript BOM 概述与内置对象
文章图片




三、JavaScript内置对象Window
window对象是BOM规则中提出的，一个用来代表浏览器本身的对象。
（1）window对象是整个JavaScript中的顶级对象，不存在任何结构上超过window对象的结构，像document对象等结构都是window对象的子级结构。

（2）全局作用域可以理解为window对象生效的范围，故而在全局作用域中声明的变量和函数都会自动成为window对象的属性和方法。

（3）window对象的属性和方法可以不显式的写出window，而是直接写出属性名或方法名即可调用。



window对象的常用属性：
window对象的name属性
name属性，name属性是在打开的浏览器内，不同的页面、甚至不同域名之间加载后依旧存在的一个window对象的属性，其属性值默认为空，可以对其赋任意值（但习惯上赋字符串类型的值）。

（1）正是因为window对象拥有一个叫做name的系统自带属性，所以我们才不允许用户自己创建名为name的变量，因为这有可能导致系统name属性值被覆盖。

（2）name属性在某种程度上来说和cookie作用类似，但是name属性的大小可以存储到2MB左右，相比于cookie的4x20k来说，传输数据优势更大。

（3）name属性针对跨域名存在的特性开发出了一个叫做跨域传输的技巧。

window对象的尺寸属性
（1）window.outerHeight | window.outWidth
这两个属性返回的是整个浏览器的宽高，和页面窗口的大小没有任何关系
（2）window.innerHeight | window.innerWidth
返回视口的宽高（计算滚动条的高度），页面变化它就变化

（3）document.documentElement.clientHeight | document.documentElement.clientWidth
返回视口的宽高（不计算滚动条的高度）

window对象的navigator属性
window.navigator属性包含了大量有关web浏览器的信息，在检测浏览器及操作系统上非常有用，这个属性是一个对象类型的属性，在全局作用域内唯一存在。

navigator.appCodeName//浏览器代码名的字符串表示
navigator.appName//官方浏览器名的字符串表示
navigator.appVersion//浏览器版本信息的字符串表示
navigator.cookieEnabled//如果启用cookie返回true，否则返回false
navigator.javaEnabled()//如果启用java返回true，否则返回false
navigator.platform//浏览器所在计算机平台的字符串表示
navigator.plugins//安装在浏览器中的插件数组
navigator.userAgent//返回和浏览器内核相关的信息，如果window.navigator.userAgent出现了Mobile，一般可以确定用户使用的是移动设备
window对象的history属性
本属性表示整个浏览器的页面栈结构，是一个对象类型的属性。在本属性对象中提供了一些固定的属性和方法，来帮助更好的控制整个浏览器中页面的访问。

（1）window.history.back()跳转到栈中的上一个页面
（2）window.history.forward()跳转到栈中的下一个页面

（3）window.history.go(num)跳转到栈中指定页面

（4）window.history.length栈中页面的数量

补充：通过window.history对象中提供的方法进行的页面跳转并不会向栈中添加新的页面，而通过window.location.href或者a标签进行的跳转，则会向栈中添加新的页面。
前端|JavaScript BOM 概述与内置对象
文章图片




window对象的常见方法
window对象的窗口操作方法
window.open('url')； / window.close(); //打开一个以某url为地址的新窗口 / 关闭当前窗口

window对象的警示框操作方法
window.alert("alertMsg");

window.prompt("alertMsg", "defaultMsg");

window.confirm("alertMsg");

说明：

（1）三个方法弹出的警示框都遵循【模态框样式】，即用户没有对弹出的对话框做出响应时，程序不会继续向下执行。

（2）prompt方法弹出的对话框允许用户在内部进行输入，并且可以通过方法的返回值获取到用户输入的内容。

var iptStr = prompt("alertMsg", "defaultMsg");

console.log(iptStr);

（3）confirm方法弹出的对话框则会给用户一个布尔值情况的选择，并且通过返回值将布尔值返回。

var result = confirm("alertMsg");

console.log(result);

window对象的间隔调用方法
window对象提供一个名为setInterval的方法，允许用户在间隔时间内重复调用某个函数，又被称作【定时器】

var timer = null;

timer = setInterval(调用函数，时间间隔ms);

timer = setInterval( function (){ console.log( "hello world!" ) }, 1000 ); // 每间隔1s输出一次hello world

清除方法：clearInterval();
补充说明：
（1）setInterval函数返回的实际上是一个数字队列（1，2，3。。。），代表了第几个间隔调用，在清除间隔调用的时候不写变量名称，而是写数字队列，一样可以对间隔调用函数进行清除。 // clearInterval(1); 清除第一个间隔调用

（2）如果setInterval间隔调用的函数需要传参，则需要采用字符串形式。

语法：setInterval(字符串，时间间隔ms）

例子：
var timer = null;

function show(words){console.log(words); }
timer = setInterval("show('hello world !')", 2000);
（3）间隔调用不是立即执行，而是在【任务队列中的任务完成后】才执行间隔调用

（4）因为间隔调用函数的实际执行者是window，因此间隔调用内部的this指向window

window对象的延迟调用方法
window对象提供一个名为setTimeout的方法，允许用户在等待一定时间后再调用某个函数，又被称作【延迟器】。

var timer = null;

timer = setTimeout(调用函数， 延迟时间ms);

例子：

var timer = null;

timer = setTimeout(function (){ console.log("hello world !") }, 1000); // 等待1s后输出一次hello world

清除方法：clearTimeout(timer)；

补充说明：

（1）setTimeout函数返回的实际上是一个数字队列，代表了第几个延迟调用。在清除延迟调用的时候不写变量名称，而是写数字队列，一样可以对延迟调用函数进行清除。

（2）延迟调用尽管只执行一次，但是在特定情况下，也必须要清除。

（3）延迟调用不是立即计时，而是在【任务队列中任务完成后】才开始计时，执行延迟调用。

（4）因为延迟调用函数实际执行者是window，因此延迟调用内部的this指向window。

（5）间隔调用函数和延迟调用函数返回的结果共用一个数字队列！！！



BOM与浏览器性能提升
页面加载优化与文件解析顺序
名词解释：
（1）JavaScript引擎：JavaScript引擎由渲染引擎和JavaScript解释器构成

（2）渲染引擎：将html代码转换成图像，并在页面中绘制画面的组件

（3）JavaScript解释器：将js代码能够解释成html代码，并在网页中正常加载的组件

渲染引擎工作流程：
a，解析代码：HTML代码解析为DOM树

b，对象的合成：CSS和DOM合成一棵渲染树

c，布局：计算出渲染树的布局

d，绘制：将渲染树绘制到屏幕

（这四步不一定严格按照顺序来执行）

相关属性：
（1）defer属性：在script标签中添加了defer属性，等待DOM加载完成后才去加载js脚本【同步执行，defer相当于规定了加载的先后顺序】

（2）asnyc属性：在script标签中添加了async属性，让DOM加载和js脚本同时加载互不影响【异步执行，async相当于避免了加载先后顺序可能引发的问题】

浏览器性能优化：回流与重绘
名词解释：
（1）回流（reflow）：当页面中的【部分或全部元素】的【尺寸或位置或可见性】发生【变化、删除或添加】的时候，可能导致的页面重新加载被称为是回流。

（2）重绘（repaint）：当页面中的元素的可见性发生改变时，我们说页面发生了重绘。

引发原因：网页中的很多操作都可能会引发回流，其中甚至包括了一些对css的操作（例如调整窗口的大小，改变字体等）

规避方式：

（1）不要一项一项的去改变样式，尽可能一口气写完。（可以写在一起，不要被打断就行） // 最好使用.style
或者.style.cssText

（2）读写DOM也尽量放在一起

（3）使用文档碎片var tempObj = document.createDocumentFragment();

【前端|JavaScript BOM 概述与内置对象】（4）使用fixed或者absolute可以减少回流和重绘

    推荐阅读


    上一篇：《JavaScript 闯关记》之简介

    下一篇：微机原理思维导图学习记录