|
一、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");
三、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对象的常见方法 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）间隔调用函数和延迟调用函数返回的结果共用一个数字队列！！！
| 
收藏
淘帖
踩
