BOM

最新推荐文章于 2025-07-04 11:33:13 发布

baother0

最新推荐文章于 2025-07-04 11:33:13 发布

阅读量924

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/xiao_niu_1/article/details/12718267

javascript 专栏收录该内容

17 篇文章

订阅专栏

window对象

BOM的核心对象是window，它表示浏览器的一个实例。
在浏览器中，window对象既是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
这就意味着在网页中定义的任何一个对象，变量和函数，都是以window作为其Global对象，因此有权访问parseInt()等方法。
全局作用域
由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量，函数都会变成
window对象的属性和方法。
窗口关系及框架
如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。
在frames集合中，可以通过数值索引（从零开始，从左到右，从上到下）或者框架名称来访问相应的window对象。
每个window对象都有一个name属性，其中包含框架的名称。
获取页面视口的大小
var pageWidth = window.innerWidth;
var 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 (pageWidth);
alert(pageHeight);
导航和打开窗口
使用window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。
这个方法可以接受4个参数：要加载的URL,窗口目标，一个特性的字符串以及一个表示新页面是否取代
浏览器历史记录中当前加载页面的布尔值。通常只需传递第一个参数，最后一个参数值在不打开新的窗口
的情况下使用。
间歇调用和超时调用
JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。
前者指指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。
超时调用需要使用window对象的setTimeout()方法，他接受二个参数：
要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫米)。其中，第一个参数可以是
一个JavaScript代码的字符串，也可以是一个函数。eg:
下面对setTimeout()的二次调用都会在一秒后显示一个警告框。
//不推荐
setTimeout ("alert('helloworld!')",1000);
//推荐的方式
setTimeout(function (){
alert("Hello world!");
},1000);
第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。
JavaScript是一个单线程序的解释器，因此一定时间内只会执行一段代码。为了控制要执行的
代码，就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。
setTimeout()的第二个参数告诉JavaScript再多长时间把当前任务添加到队列中。如果队列为空，
那么添加的代码会立即执行。如果队列不是为空的，那么它就要等到前面的代码执行完毕以后再执行。
间歇调用
window对象的setInterval()方法
eg:
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber () {
num++;
if (num == max) {
clearInterval(intervalId);
alert("Done");
}
}
intervalId = setInterval(incrementNumber,500);
用超时调用来实现
var num = 0;
var max = 10;
function incrementNumber () {
num++;
if (num < max) {
setTimeout (incrementNumber,500);
}else {
alert ("Done");
}
}
setTimeout (incrementNumber,500);
可见，在使用超时调用时，没有必要跟踪超时调用ID，因为每次代码执行之后，
如果不再设置另一次超时调用，调用就会自行停止。一般认为：使用超时调用来模拟
间歇调用的是一个最佳模式。在开发环境下，很少使用真正的间歇调用，原因是否一个间歇调用可能会在前一个
间歇调用结束前启动。
而像前面示例中那样使用超时调用，则完全可以避免这一点。最好不要使用间歇调用。
location对象是最有用的BOM对象之一。
他提供了一些与当前窗口中加载的文档信息，还提供了一些导航的功能。
location对象是一个特别的一个对象，因为它既是window对象的属性也是document对象的属性。
window.location和document.location引用的是同一个对象。
location还讲URL解析为独立的片段。
我们经常使用document.location.href = "http://www.baidu.com";

update:2013/11/3

1:偏移量(offset dimension):包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度，宽度决定，包括所有的内边距，

滚动条和边框的大小（注意：不包括外边距）。通过下面的4个属性可以取得元素的偏移量。

-> offsetHeight:元素在垂直方向上占用的空间大小，以像素为单位。包括元素的高度，（可见的）水平滚动条的高度，上边框的高度

和下边框的高度。

-> offsetWidth:元素在水平方向上的占用的空间大小，以像素为单位。包括元素的高度，（可见的）垂直滚动条的宽度，左边框宽度和右边框宽度。

->offsetLeft:元素的左外边框至包含元素的左内边框之间的像素值。

->offsetTop:元素的上外边框至包含元素的上内边框之间的像素值。

其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。默认的包含元素是<body>元素。

Eg: <body><div id = “outer”><div id = “inner”></div></div></body>

id为inner的元素默认的offsetParent为body元素，但是如果id为outer的元素设置了position为relative或者position，则id为inner的元素offsetParent是id为outer的元素

样式表：

#inner {

width:300px;

height:120px;

background-color:yellow;

padding:10px;

border:1px solid red;

}

标签

资讯原创娱乐影视搞笑游戏红人馆动漫音乐母婴女性体育汽车科教首映礼美女主资讯原创娱乐影视搞笑游戏红人馆动漫音乐母婴女性体育汽车科教首映礼美女主资讯原创娱乐影视搞笑游戏红人馆动漫音乐母婴女性体育汽车科教首映礼美女主资讯原创娱乐影视搞笑游戏红人馆动漫音乐母婴女性体育汽车科教首映礼美女主资讯原创娱乐影视搞笑游戏红人馆动漫音乐母婴女性体育汽车科教首映礼美女主资讯原创娱乐影视搞笑游戏红人馆动漫音乐母婴女性体育汽车科教首映礼美女主

</div>

运行结果截图：

图（内容溢出）

样式表

#inner {

width:300px;

height:120px;

background-color:yellow;

padding:10px;

border:1px solid red;

overflow:scroll;

}

标签

</div>

截图：

图（在firefox中测试，firefox的滚动条的宽度为17px）

样式表

body {

margin:0px;

padding:0px;

}

#inner {

width:300px;

height:120px;

background-color:yellow;

padding:10px;

border:1px solid red;

overflow:scroll;

}

#outer {

width:500px;

height:300px;

background-color:green;

}

#in {

width:300px;

height:200px;

background-color:pink;

}

标签

</div>

</div>

截图：

从途中可以看出此处的元素的offsetLeft和offsetTop的值是以body为参照。

样式表

body {

margin:0px;

padding:0px;

}

#inner {

width:300px;

height:120px;

background-color:yellow;

padding:10px;

border:1px solid red;

overflow:scroll;

}

#outer {

width:500px;

height:300px;

background-color:green;

position:relative; /**多了这个键值对**/

}

#in {

width:300px;

height:200px;

background-color:pink;

margin:10px;

}

标签如上

截图：

此时id为in的元素的参考元素为id为outer的元素。

要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同的属性相加，如此循环直至根元素，就可以得到一个基本准确的值。

下面的二个函数就可以用于分别取得元素的左和上的偏移量。

function getElementLeft (element) {

var actualLeft = element.offsetLeft;

var current = element.offsetParent;

while (current !== null) {

actualLeft += current.offsetLeft;

current = current.offsetParent;

}

return actualLeft;

}

function getElementTop (element) {

var actualTop = element.offsetTop;

var current = element.offsetParent;

while (current !== null) {

actualTop += current.offsetTop;

current = current.offsetParent;

}

return actualTop;

}

上面的二个函数利用offsetParent属性在DOM层次中向上回溯，将每层中的偏移量属性合计一起。对于简单的css布局的页面，上面的二个函数可以得到非常精确的结果。对于使用表格和内嵌框架的页面，由于不同的浏览器的实现这些元素的方式不同，因此得到的值就不太精确了。一般来说，页面中的所有的元素都会被包含在几个div元素中，而这些div元素的offsetParent又是body元素，所以getElementLeft与getElementTop会返回与offsetLeft和offsetTop相同的值。

所有的偏移量都是只读的。

2：客户区的大小

元素的的客户区大小（client dimension）,指的是元素内容及其内边距所占据的空间大小。

有关客户区的属性有两个：clientWidth和clientHeight。其中clientWidth属性是元素内容区宽度加上左右内边距宽度；clientHeight属性是元素内容区高度加上上下内边距高度。

如图：

从字面上看，客户区大小就是元素内部的空间的大小，因此滚动条占用的空间不计算在内。最常用到这些属性的情况，就是确定浏览器视口的大小。

function getViewPort () {

var pageWidth = window.innerWidth;

var 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;

}

return {pW:pageWidth,pH:pageHeight};

}

注：IE9+,FireFox,Safari,Opera和chrome的innerWidth和innerHeight表示浏览器页面视图区的大小(减去边框宽度)。

IE8以及更早的版本没有提供取得当前浏览器窗口

尺寸的属性，不过可以通过DOM提供了页面可见区域的相关信息。

在IE,Firefox,Safari,Opera和Chrome中，document.documentElement.clientWidth

和document.documentElement.clientHeight中保存了页面视口的信息。

在IE6中，这些属性必须在标准模式下才有效；如果混杂模式必须通过document.body

.clientWidth和document.body.clientHeight取得相同的信息。clientWidth和clientHeight都是只读属性。

3：滚动大小

滚动大小（scroll dimension）,指的是包含滚动条内容的元素的大小。有些元素（eg:html元素），即使没有执行任何代码也能自动的添加滚动条；但是另外一些元素，需要通过css元素的overflow属性进行设置才能滚动。

scrollHeight:在没有滚动的条的情况下，元素内容的总高度。

scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

scrollLeft:被隐藏在内容区域左侧的像素。通过设置这个属性可以改变元素的滚动位置。

scrollTop:被隐藏在内容区域上方的像素。通过设置这个属性可以改变元素的滚动的位置。

图：

scrollWidth和scrollHeight主要确定元素内容的实际大小（也是内容+内边距）。通常认为html元素是在web浏览器的视口中滚动的元素(IE6之前版本运行在混杂模式下时是body元素)。因此，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight;

对于不包含滚动条的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系并不是十分的清晰。在这种情况下，基于document.documentElement查看这些属性会在不同的浏览器间发现一些不一致性问题，所以在确定文档的总高度时（包括基于视口的最小高度），必须取得scrollWidth/clientWdith和scorllHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下得到精确的结果。

代码：

var docHeight = Math.max(document.documentElement.scrollHeight,

document.documentElement.clientHeight);

var docWidth = Math.max(document.documentElement.scrollWidth,

document.documentElement.clientIWidth);

注意，对于运行在混杂模式下的IE，则需要用document.body代替document.documentElement。

通过scrollLeft和scrollTop属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置。在元素没有被滚动时，这二个属性的值等于0；

下面的这个函数会检测元素是否位于顶部，如果没有将其滚动到顶部。

function scrollToTop (element) {

if (element.scrollTop != 0) {

element.scrollTop = 0;

}

4:确定元素的大小

IE,Firefox 3+,Safari 4+,opera 9.5及chrome为每个元素都提供了一个getBoundingClientRect()方法。这个方法返回一个矩形对象，包含4个属性：left,top,right和bottom。这些属性给出了元素在页面中相对与视口的位置。但是浏览器实现稍微不同。

IE8以及更早的版本认为文档的左上角坐标为(2,2)而其他浏览器包括ie9+则将（0，0）

作为起始点坐标。因此，就需要在一开始检查一下位于(0,0)的元素的位置。

检验过程：详细请见JavaScript高级程序设计325页。