BOM操作

1、BOM

* BOM (Browser Object Model)

浏览器对象模型

BOM是关于浏览器的方法，属性，事件

2、window.open()

* 参数

* 1、要找开的新网页的地址

* 2、找开方式_blank(新窗口默认) _self（自身） ... iframName（页面内嵌套）

* 3、打开新窗口的一些信息

3、window.close()

* 关闭页面

* 不同的浏览器表现形式不一样

在ff/O下，只允许关闭由window.open方法所打开的窗口

window.onload=function(){
var open=document.getElementById("open");
var close=document.getElementById("close");
open.onclick=function(){
window.open('http://www.baidu.com','_blank');
};
close.onclick=function(){
window.close();
};
};
</script>
</head>
<body>
<inputtype="button"value="打开新的页面"id="open"/>
<inputtype="button"value="关闭新的页面"id="close"/>
</body>

4、userAgent

* window.navigator.userAgent 用户代理信息

* 操作系统、浏览器内核、浏览器版本等

console.log(window.navigator.userAgent);

5、window.location

* window.location --- 地址栏信息

字符串版的地址栏信息

window.location.search

地址栏查询信息（问号到#号之间的所有内容，包含问号但不包含#）

window.location.hash

锚点信息（#号后面的所有内容,包含#）

console.log(window.location);
console.log(typeof window.location); //object
console.log(window.location.search);
console.log(window.location.hash);
console.log(window.location.href);

6、可视区的尺寸

* 元素的宽

* offsetWidth 带边框

* clientWidth 不带边框

* 元素的高

* offsetHeight 带边框

* clientHeight 不带边框

* 可视区的宽/高(DOM)

* document.documentElement.clientWidth

* document.documentElement.clientHeight

* 可视区的宽/高(BOM)

* window.innerWidth

* window.innerHeight

* 不兼容低版本的浏览器

7、获取滚动条距离以及设置滚动条距离

* 获取滚动条的距离（DOM）

* chrom document.body.scrollTop

* 其它 document.documentElement.scrollTop

* 获取滚动条的距离（BOM）

* window.pageXOffset/window.pageYOffset

* 设置滚动条的距离

* window.scrollTo(x,y)

* 全兼容，两个参数必需同时出现

window.onload=function(){
document.onclick=function(){
console.log(document.body.scrollTop);
console.log(window.pageYOffset);
var t=window.pageYOffset;
var time=setInterval(function(){
t-=100;
if(t<10){
clearInterval(time);
}
window.scrollTo(0,t);
},16);
};
};

8、内容高度

1.offsetHeight 获取到的是元素的高度,包括边框

2.clientHeight 获取到的是元素的高度，不包括边框

3.scrollHeight 被内容撑开的高度，如果内容小于元素告诉，获取到元素高度（无边框）

4.document.body.scrollHeight 获取body的高度

5.document.body.offsetHeight 获取文档内容高度

<style>
#div1{
width:100px;
height:100px;
height:100px;
padding:10px;
border:1px solid #f00;
}
#div2{
height:200px;
background: red;
}
body{
border:1px solid #000;
}
</style>
<body>
<divid="div1">
<divid="div2"></div>
</div>
</body>
window.onload=function(){
var div1=document.getElementById("div1");
document.onclick=function(){
console.log('offsetHeight',div1.offsetHeight); //122
console.log('clientHeight',div1.clientHeight); //120
console.log('scrollHeight',div1.scrollHeight); //120
console.log(document.body.scrollHeight); //955
console.log(document.body.offsetHeight); //124
};
};

9、onscroll 与 onresize

* window.onscroll()

* 当滚动条滚动的时候触发这个方法

* window.onresize()

* 当窗口改变大小的时候触发这个方法

var i=0;
window.onscroll=function(){
i++;
console.log(i);
}
window.onresize=function(){
i--;
console.log(i);
};

10、回到顶部

<style>
#div1{
width:100px;
height:100px;
background: red;
font:20px/100px"微软雅黑";
color:#fff;
text-align: center;
position:fixed;
right:0;
bottom:0;
display: none;
}
</style>
<script>
window.onload=function(){
var div=document.getElementById("div1");
var time;
window.onscroll=function(){
var t=window.pageYOffset;
if(t>200){
div1.style.display='block';
}else{
div1.style.display='none';
}
div.onclick=function(){
time=setInterval(function(){
t-=50;
window.scrollTo(0,t);
if(t<=0){
clearInterval(time);
}
},15)
};
};
};
</script>
</head>
<bodystyle="height:3000px;">
<divid="div1">加到顶部</div>
</body>

null