JS基础学习第十天：BOM对象及BOM操作
2017-12-12 16:19
573 查看
BOM部分基础知识总结
==================
什么是BOM？
ECMAScript 是 JavaScript 的核心，但是在web中使用JavaScript，那么BOM（浏览器对象模型）无疑才是真正的核心;
BOM（Browser Object Document）即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分
学习BOM学什么？
1 对象的属性和方法
Window对象有一系列的属性，这些属性本身也是对象。Window对象下的属性和方法，可以使用window.属性和window.方法()或者直接属性和方法()的方式调用。举个例子：window.alert()和alert()是一样的意思。
由于window对象的属性和方法较多，这里不再一一列举。大家自己可以查阅文档资料。
窗口位置
========
多数浏览器都提供了screenLeft和screenTop,分别用于表示窗口相对与屏幕左边和上边的位置。FF则在screenX和screenY属性中提供相同的窗口信息，Safari金额Chorme也同时支持这两个属性。
使用下面代码可以跨浏览器取得窗口左边和上边的位置。
窗口大小
========
主流浏览器都为确定窗口大小提供了4个属性：innerWidth、innerHight、outerWidth和outerHight。
在IE9+、Safari和FF中，outerWidth和outerHight返回的是浏览器窗口本身的尺寸(无论从哪个框架访问),但在Opera中，这两个属性的值表示页面视图容器的大小(单个标签页窗口的大小)。而innerWidth、innerHight则表示该容器中页面视图的大小（减去边框的宽度）。但在Chrome中，这4个属性都表示视口大小而非浏览器大小。
IE9之前没有提供取得浏览器窗口尺寸的属性；不过它通过DOM提供了页面可视区域的信息。
在IE、FF、Chrome、Opera和Safari中，document.documentElement.clientWidth和document.documentElement.clientHight中保存着页面视口信息。在IE6下，要在标准模式下有效。如果是混杂模式就必须通过document.body.clientWidth和document.body.clientHight取得相同信息。Chrome则不分标准模式还是混杂模式。
虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小。
document.compatMode用来判断当前浏览器采用的渲染方式。
官方解释
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
2系统对话框
alert()：弹出一个警告对话框。
prompt()：弹出一个输入对话框。
confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取消”返回false。
close()：关闭窗口
print()：打印窗口
浏览器是通过alert()、confirm()和prompt()方法来调用系统对话框向用户显示信息的。系统对话框与浏览器中显示的网页没有关系，也不包含HTML。
举个简单的输入提示框的例子：
当然还有其他的提示框，比如调用系统的打印、查找对话框等等，还可以对浏览器的状态栏的初始值进行设置。
3、新建窗口
使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，它可以接受四个参数：
1.要加载的URL；
2.窗口的名称或者窗口目标；
3.一个特定的字符串；
4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。
举个例子说明一下如何使用
4、间歇调用和超时调用
JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来控制代码在特定的时刻执行。前者在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次。
超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和毫秒数的超时时间。调用setTimeout()方法之后，该方法会返回一个数值ID，表示超时调用。这个超时调用的ID是计划执行代码的唯一标识，可以通过它来取消超时调用。
要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
间歇调用和超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接受的参数与setTimeout()相同。
取消间歇调用方法和取消超时调用类似，使用clearInterval()方法。但取消间歇调用的重要性远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面关闭。
一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，因为需要根据情况来取消ID，并且可能会造成同步的一些问题，因此不建议使用间歇调用。
延迟执行
========
setTimeout( [string | function] code, interval);
clearTimeout([number] intervalId);
定时执行
=======
var timerId = setInterval(code, interval);
clearInterval(timerId); //清除定时器
5、location对象
href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
host：主机名
hostname：主机名
pathname：文件路径及文件名
search：查询字符串。
replace：导航到新的URL，但是不会生成新的历史记录，不能返回前面一个页面
reload： 重新加载当前页面，参数为true时从服务器重新加载页面
这些方法既可以查询也可以设置；
利用location.search获取参数
6、navigator对象
appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。
如果是IE浏览器的话，返回值为：Microsoft Internet Explorer
如果是Firefox浏览器的话，返回值为：Netscape
appVersion：浏览器软件的核心版本号。
systemLanguage：系统语言
userLanguage：用户语言
platform：平台
==================
什么是BOM？
ECMAScript 是 JavaScript 的核心，但是在web中使用JavaScript，那么BOM（浏览器对象模型）无疑才是真正的核心;
BOM（Browser Object Document）即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分
学习BOM学什么？
1 对象的属性和方法
Window对象有一系列的属性，这些属性本身也是对象。Window对象下的属性和方法，可以使用window.属性和window.方法()或者直接属性和方法()的方式调用。举个例子：window.alert()和alert()是一样的意思。
由于window对象的属性和方法较多，这里不再一一列举。大家自己可以查阅文档资料。
窗口位置
========
多数浏览器都提供了screenLeft和screenTop,分别用于表示窗口相对与屏幕左边和上边的位置。FF则在screenX和screenY属性中提供相同的窗口信息，Safari金额Chorme也同时支持这两个属性。
使用下面代码可以跨浏览器取得窗口左边和上边的位置。
var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX; var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;值得注意的是，在IE和Opera中screenLeft和screenTop中保存的是从屏幕左边和上边到window对象表示的页面可见区域的距离。在Chrome、FF和Safari中，screenY和screenTop中保存的是整个浏览器对于屏幕的坐标值。
窗口大小
========
主流浏览器都为确定窗口大小提供了4个属性：innerWidth、innerHight、outerWidth和outerHight。
在IE9+、Safari和FF中，outerWidth和outerHight返回的是浏览器窗口本身的尺寸(无论从哪个框架访问),但在Opera中，这两个属性的值表示页面视图容器的大小(单个标签页窗口的大小)。而innerWidth、innerHight则表示该容器中页面视图的大小（减去边框的宽度）。但在Chrome中，这4个属性都表示视口大小而非浏览器大小。
IE9之前没有提供取得浏览器窗口尺寸的属性；不过它通过DOM提供了页面可视区域的信息。
在IE、FF、Chrome、Opera和Safari中，document.documentElement.clientWidth和document.documentElement.clientHight中保存着页面视口信息。在IE6下，要在标准模式下有效。如果是混杂模式就必须通过document.body.clientWidth和document.body.clientHight取得相同信息。Chrome则不分标准模式还是混杂模式。
虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小。
document.compatMode用来判断当前浏览器采用的渲染方式。
官方解释
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
alert("Width: " + pageWidth);
alert("Height: " + pageHeight);var age=28; window.color="red"; //在IE<9是抛出错误，在其他浏览器中都返回false delete window.age; //在IE<9是抛出错误，在其他浏览器中都返回true delete window.color; //return true alert(window.age); //28 alert(window.color); //undefined
2系统对话框
alert()：弹出一个警告对话框。
prompt()：弹出一个输入对话框。
confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取消”返回false。
close()：关闭窗口
print()：打印窗口
浏览器是通过alert()、confirm()和prompt()方法来调用系统对话框向用户显示信息的。系统对话框与浏览器中显示的网页没有关系，也不包含HTML。
举个简单的输入提示框的例子：
<span style="font-size:18px;">var num=prompt('请输入第一个数字',0);
var num1=prompt('请输入第二个数字',0);
var num2= Number(num)+Number(num1);
alert('两个数字的和是：'+ num2); </span>当然还有其他的提示框，比如调用系统的打印、查找对话框等等，还可以对浏览器的状态栏的初始值进行设置。
3、新建窗口
使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，它可以接受四个参数：
1.要加载的URL；
2.窗口的名称或者窗口目标；
3.一个特定的字符串；
4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。
举个例子说明一下如何使用
<span style="font-size:18px;">open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');</span>4、间歇调用和超时调用
JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来控制代码在特定的时刻执行。前者在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次。
超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和毫秒数的超时时间。调用setTimeout()方法之后，该方法会返回一个数值ID，表示超时调用。这个超时调用的ID是计划执行代码的唯一标识，可以通过它来取消超时调用。
要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
间歇调用和超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接受的参数与setTimeout()相同。
取消间歇调用方法和取消超时调用类似，使用clearInterval()方法。但取消间歇调用的重要性远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面关闭。
一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，因为需要根据情况来取消ID，并且可能会造成同步的一些问题，因此不建议使用间歇调用。
延迟执行
========
setTimeout( [string | function] code, interval);
clearTimeout([number] intervalId);
<body>
<input type="button" value="closeTimerId" id="btn">
<script>
var btn = document.getElementById("btn");
var timerId = setTimeout(function () {
alert("23333");
}, 3000);
btn.onclick = function () { //在设置的时间之前（3s内）点击可以取消定时器
clearTimeout(timerId);
}
</script>
</body>定时执行
=======
var timerId = setInterval(code, interval);
clearInterval(timerId); //清除定时器
<body>
<input type="button" value="倒计时开始10" id="btn" disabled/>
<script>
var btn = document.getElementById("btn");
var num = 10;
var timerId = setInterval(function () {
num--;
btn.value = "到时器开始" + num;
if (num == 0) {
clearInterval(timerId);
btn.disabled = false;
btn.value = "同意，可以点了";
}
},1000);
</script>
</body>5、location对象
href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
host：主机名
hostname：主机名
pathname：文件路径及文件名
search：查询字符串。
replace：导航到新的URL，但是不会生成新的历史记录，不能返回前面一个页面
reload： 重新加载当前页面，参数为true时从服务器重新加载页面
这些方法既可以查询也可以设置；
利用location.search获取参数
function getQueryStringArgus() {
var qs = (location.search.length > 0 ? location.search.substring(1): '');
argus = {};
items = qs.length ? qs.split("&") : [];
item = null;
name = null;
value = null;
i=0;
len=items.length;
for(i=0;i<len;i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value= decodeURIComponent(item[1]);
if(name.length){
argus[name] = value;
};
};
return argus;
};6、navigator对象
appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。
如果是IE浏览器的话，返回值为：Microsoft Internet Explorer
如果是Firefox浏览器的话，返回值为：Netscape
appVersion：浏览器软件的核心版本号。
systemLanguage：系统语言
userLanguage：用户语言
platform：平台
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js基础学习第一天（关于DOM和BOM）一
- jQuery 1.6 源码学习（六）——core.js[6]之jQuery对象/数组操作相关方法
- JS学习总结之操作文档对象模型
- js基础学习第一天（关于DOM和BOM）一
- js基础学习之-js对象的属性
- Js学习---妙味课堂2-3 （BOM基础）
- js学习小结（六）2014.5.2(BOM对象)
- 【学习】js学习笔记：对象的一些基础知识
- javascript基础笔记（十七）之js的bom对象
- js学习--DOM操作详解大全二（window对象）
- js基础学习第一天（关于DOM和BOM）一
- js基础学习第一天（关于DOM和BOM）一
- JS学习笔记8之 BOM-浏览器对象模型
- js基础学习之-js包装对象
- Node.js学习--基础知识（8）--全局对象和全局变量
- 蓝鸥原生JS：什么是BOM及BOM对象操作
- Ext JS学习第十天 Ext基础之 扩展原生的javascript对象（二）
- js基础学习之-js全局对象
- Ext JS学习第十天 Ext基础之动态加载JS文件（补充）
- JS学习总结之操作文档对象模型