轻松学习JavaScript十六：JavaScript的BOM学习(一)
2015-12-17 17:43
609 查看
转载自：http://blog.csdn.net/erlian1992/article/details/50282857
一window对象概述
BOM的核心对象是Window对象，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每
个打开的窗口，系统都会自动为其创建window对象。所有浏览器都支持window对象，它表示浏览器窗口。所有
JavaScript全局对象、函数以及变量均自动成为 window对象的成员。全局变量是 window对象的属性。全局函数是
window对象的方法。甚至HTML DOM的document也是window 对象的属性之一。通过下面的两句代码我们可以看出
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的。因此调用它的子对象时可以不显示的指明
window对象：
[javascript] view
plaincopyprint?
window.document.getElementById("test");
与上述等价的写法是：
[javascript] view
plaincopyprint?
document.getElementById("test");
二window对象
(1)window对象的属性和方法
window对象的属性
window对象的方法
(2)系统对话框
Window对象可以在JavaScript中创建三种消息框：警告框、确认框、提示框。浏览器通过alert()方法，confirm()
方法和prompt()方可以调用系网页统对话框向用户显示信息。系统对话框与浏览器显示的网页没有关系，也不包含
HTML。
1警告框：警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行
操作。
语法：alert("文本");
2提示框：提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点
击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为
null。
语法：prompt("文本");
3确认框：确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才
能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：confirm("文本");
综合实例：
[javascript] view
plaincopyprint?
var name=prompt("请输入您的名字","");
if (confirm(name!=null&&name!=""))
{
alert("你好！"+name);
}
else
{
alert("您没有输入名字！");
}
3新建窗口
使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。它可以接受四个参数：
window.open(url,name,feature,replace);
参数解释：
url:要加载的URL，设置打开窗口中显示的文档的URL，如果缺省或者为""，那么新窗口就不显示任何文档。
name：窗口的名称或窗口目标。为新窗口命名。该名称可以作为标签和的target属性值。如果名称为已经存在的
窗口的名称，那么open方法就不再创建新的窗口，而只返回对指定窗口的引用，这种情况，第三个参数将被忽略。
feature：一个特性字符串，设置新窗口的显示特性，可选参数。
replace：一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。设置是否在窗口的浏览历史中给加载
到新页面的URL创建一个新条目，还是用它替换浏览历史中的当前条目。
第三个特性字符串的参数：
实例：
[javascript] view
plaincopyprint?
open("http://www.baidu.com","百度","width=400,height=400,top=200,left=200,toolbar=yes","_parent");
4窗口页面尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口，不包括工具栏和滚动条)。
a对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
[javascript] view
plaincopyprint?
window.innerHeight;//浏览器窗口的内部高度
window.innerWidth;//浏览器窗口的内部宽度
b对于 Internet Explorer 8、7、6、5：
[javascript] view
plaincopyprint?
document.documentElement.clientHeight;
document.documentElement.clientWidth;
或者
[javascript] view
plaincopyprint?
document.body.clientHeight;
document.body.clientWidth;
实用的JavaScript方案(涵盖所有浏览器)有两个：
方案一：
[javascript] view
plaincopyprint?
var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;
if(typeof pageWidth!="number")
{
if(document.compatMode=="CSS1Compat")//标准模式
{
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeigth;
}
else
{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeigth;
}
}
document.write("浏览器的内部窗口宽度：" + p ageWidth + "，高度：" + pageHeight + "。");
方案二：
[javascript] view
plaincopyprint?
var pageWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var pageHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
document.write("浏览器的内部窗口宽度：" + pageWidth + "，高度：" + pageHeight + "。");
上述两个方案运行的结果为：
浏览器的内部窗口宽度：1366，高度：607。
三screen对象
screen对象包含有关用户屏幕的信息。Screen对象最常用的两个属性是：availWidth(可用的屏幕宽度)和
availHeight(可用的屏幕高度)。
screen对象属性：
实例：
[javascript] view
plaincopyprint?
document.write("可用宽度：" + screen.availWidth+"，");
document.write("可用高度：" + screen.availHeight);
输出：可用宽度：1366，可用高度：728
四history对象
history对象是保存上网的记录，从窗口被打开的那一刻算起，包含浏览器的历史。为了保护用户隐私，对
JavaScript访问该对象的方法做出了限制。
history对象的属性和方法：
实例：
[html] view
plaincopyprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>BOM</title>
<script type="text/javascript">
function goBack()
{
if(history.length!=0)
{
history.back();//加载历史列表中的前一个 URL
}
}
document.write("这个网页有"+history.length+"条历史记录！");
</script>
</head>
<body>
<input type="button" value="转到上一页" onclick="goBack()" />
</body>
</html>
运行的结果为：
五location对象
location对象是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。location
对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。
location对象的属性：
location对象的方法：
实例：获取诸如?name=liu&psw=123这种类型的键值对。
[javascript] view
plaincopyprint?
function getArgs()
{
//创建一个存放键值对的数组
var args=[];
//去除？号
var qs=location.search.length>0?location.search.substring (1):"";
//按&字符串拆分数组
var items=qs.split("&");
var item =null,name=null,value=null;
//遍历
for(var i=0;i<items;i++)
{
item=items[i].split("=");
name=item[0];
value=item[1];
//把键值对存放到数组中去
args[name]=value;
}
return args;
}
var args=getArgs(); //调用函数
alert(args["name"]);
alert(args["psw"]);
一window对象概述
BOM的核心对象是Window对象，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每
个打开的窗口，系统都会自动为其创建window对象。所有浏览器都支持window对象，它表示浏览器窗口。所有
JavaScript全局对象、函数以及变量均自动成为 window对象的成员。全局变量是 window对象的属性。全局函数是
window对象的方法。甚至HTML DOM的document也是window 对象的属性之一。通过下面的两句代码我们可以看出
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的。因此调用它的子对象时可以不显示的指明
window对象：
[javascript] view
plaincopyprint?
window.document.getElementById("test");
与上述等价的写法是：
[javascript] view
plaincopyprint?
document.getElementById("test");
二window对象
(1)window对象的属性和方法
window对象的属性
window对象的方法
(2)系统对话框
Window对象可以在JavaScript中创建三种消息框：警告框、确认框、提示框。浏览器通过alert()方法，confirm()
方法和prompt()方可以调用系网页统对话框向用户显示信息。系统对话框与浏览器显示的网页没有关系，也不包含
HTML。
1警告框：警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行
操作。
语法：alert("文本");
2提示框：提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点
击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为
null。
语法：prompt("文本");
3确认框：确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才
能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：confirm("文本");
综合实例：
[javascript] view
plaincopyprint?
var name=prompt("请输入您的名字","");
if (confirm(name!=null&&name!=""))
{
alert("你好！"+name);
}
else
{
alert("您没有输入名字！");
}
3新建窗口
使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。它可以接受四个参数：
window.open(url,name,feature,replace);
参数解释：
url:要加载的URL，设置打开窗口中显示的文档的URL，如果缺省或者为""，那么新窗口就不显示任何文档。
name：窗口的名称或窗口目标。为新窗口命名。该名称可以作为标签和的target属性值。如果名称为已经存在的
窗口的名称，那么open方法就不再创建新的窗口，而只返回对指定窗口的引用，这种情况，第三个参数将被忽略。
feature：一个特性字符串，设置新窗口的显示特性，可选参数。
replace：一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。设置是否在窗口的浏览历史中给加载
到新页面的URL创建一个新条目，还是用它替换浏览历史中的当前条目。
第三个特性字符串的参数：
实例：
[javascript] view
plaincopyprint?
open("http://www.baidu.com","百度","width=400,height=400,top=200,left=200,toolbar=yes","_parent");
4窗口页面尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口，不包括工具栏和滚动条)。
a对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
[javascript] view
plaincopyprint?
window.innerHeight;//浏览器窗口的内部高度
window.innerWidth;//浏览器窗口的内部宽度
b对于 Internet Explorer 8、7、6、5：
[javascript] view
plaincopyprint?
document.documentElement.clientHeight;
document.documentElement.clientWidth;
或者
[javascript] view
plaincopyprint?
document.body.clientHeight;
document.body.clientWidth;
实用的JavaScript方案(涵盖所有浏览器)有两个：
方案一：
[javascript] view
plaincopyprint?
var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;
if(typeof pageWidth!="number")
{
if(document.compatMode=="CSS1Compat")//标准模式
{
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeigth;
}
else
{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeigth;
}
}
document.write("浏览器的内部窗口宽度：" + p ageWidth + "，高度：" + pageHeight + "。");
方案二：
[javascript] view
plaincopyprint?
var pageWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var pageHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
document.write("浏览器的内部窗口宽度：" + pageWidth + "，高度：" + pageHeight + "。");
上述两个方案运行的结果为：
浏览器的内部窗口宽度：1366，高度：607。
三screen对象
screen对象包含有关用户屏幕的信息。Screen对象最常用的两个属性是：availWidth(可用的屏幕宽度)和
availHeight(可用的屏幕高度)。
screen对象属性：
实例：
[javascript] view
plaincopyprint?
document.write("可用宽度：" + screen.availWidth+"，");
document.write("可用高度：" + screen.availHeight);
输出：可用宽度：1366，可用高度：728
四history对象
history对象是保存上网的记录，从窗口被打开的那一刻算起，包含浏览器的历史。为了保护用户隐私，对
JavaScript访问该对象的方法做出了限制。
history对象的属性和方法：
实例：
[html] view
plaincopyprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>BOM</title>
<script type="text/javascript">
function goBack()
{
if(history.length!=0)
{
history.back();//加载历史列表中的前一个 URL
}
}
document.write("这个网页有"+history.length+"条历史记录！");
</script>
</head>
<body>
<input type="button" value="转到上一页" onclick="goBack()" />
</body>
</html>
运行的结果为：
五location对象
location对象是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。location
对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。
location对象的属性：
location对象的方法：
实例：获取诸如?name=liu&psw=123这种类型的键值对。
[javascript] view
plaincopyprint?
function getArgs()
{
//创建一个存放键值对的数组
var args=[];
//去除？号
var qs=location.search.length>0?location.search.substring (1):"";
//按&字符串拆分数组
var items=qs.split("&");
var item =null,name=null,value=null;
//遍历
for(var i=0;i<items;i++)
{
item=items[i].split("=");
name=item[0];
value=item[1];
//把键值对存放到数组中去
args[name]=value;
}
return args;
}
var args=getArgs(); //调用函数
alert(args["name"]);
alert(args["psw"]);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 轻松学习JavaScript十九：DOM编程之在HTML文档什么位置编写JS代码
- 扩展js的String对象
- 开源工具-Json 解析器 Jackson 的使用
- JSONP原理及简单实现
- seajs快速了解
- JSTL使用实例
- js表单中选择框值的获取及表单的序列化
- JS正则验证两位小数，验证数字最简单正则表达式大全
- js跨浏览器的事件侦听器和事件对象的使用方法
- js图片轮播手动切换
- js调出上下文菜单的实例
- 快速掌握WordPress中加载JavaScript脚本的方法
- js中如何定义和使用全局变量
- jsp中使用CachedRowSetImpl crs = new CachedRowSetImpl();
- js的console对象
- JavaScript 继承
- 双向Dijstra算法
- js中数组indexOf
- Gson解析Json数据
- ExtJS5 - 使用vtype自定义表单域的验证规则