BOM
BOM(Browser Object Model) 是指瀏覽器對象模型如庭，是用于描述這種對象與對象之間層次關(guān)系的模型，瀏覽器對象模型提供了獨立于內(nèi)容的豆混、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)予跌。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象仰猖，其他對象都是該對象的子對象
window
BOM 的核心是window對象，它表示瀏覽器的一個實例掠河。在瀏覽器中亮元，即是javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規(guī)定的Global對象唠摹，這就意味著在網(wǎng)頁中定義的任意變量、函數(shù)奉瘤、對象都是以window作為Global對象勾拉。
所有在全局作用域中聲明的變量、函數(shù)盗温、對象都會作為window的屬性和方法
var age = 24;
function printName(){
console.log(age);
}
console.log(window.age);
window.printName();
window對象屬性
window.innerHeight屬性藕赞，window.innerWidth屬性
這兩個屬性返回網(wǎng)頁的CSS布局占據(jù)的瀏覽器窗口的高度和寬度，單位為像素卖局。很顯然斧蜕，當用戶放大網(wǎng)頁的時候（比如將網(wǎng)頁從100%的大小放大為200%），這兩個屬性會變小砚偶。
注意批销，這兩個屬性值包括滾動條的高度和寬度洒闸。
scrollX、scrollY
- scrollX：滾動條橫向偏移
- scrollY：滾動條縱向偏移
這兩個值隨著滾動位置變化而變化
scrollTo均芽、scroll scrollBy丘逸、
我們也可以通過方法scrollTo或者scroll方法改變滾動條位置到指定坐標
scrollTo、scroll效果是一樣的
window.scrollTo(0, 300); // 滾動條移動到300px處
兩個參數(shù)分別是水平掀宋、垂直方向偏移
scrollBy可以相對當前位置移動滾動條深纲，而不是移動到絕對位置
scrollBy(0, 100); // 滾動條下移100px
navigator
Window對象的navigator屬性，指向一個包含瀏覽器相關(guān)信息的對象劲妙。
navigator.userAgent屬性返回瀏覽器的User-Agent字符串湃鹊，用來標示瀏覽器的種類。下面是Chrome瀏覽器的User-Agent镣奋。
navigator.userAgent // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36"
screen
screen對象包含了顯示設(shè)備的信息
// 顯示設(shè)備的高度币呵，單位為像素
screen.height
// 1920
// 顯示設(shè)備的寬度，單位為像素
screen.width
// 1080
一般使用以上兩個屬性唆途，了解設(shè)備的分辨率富雅。上面代碼顯示，某設(shè)備的分辨率是1920x1080肛搬。除非調(diào)整顯示器的分辨率没佑，否則這兩個值可以看作常量，不會發(fā)生變化温赔。顯示器的分辨率與瀏覽器設(shè)置無關(guān)蛤奢，縮放網(wǎng)頁并不會改變分辨率。
window.open(url)
打開一個新窗口, 參數(shù)是新窗口需要載入的url地址
window.open('http://www.baidu.com')
如果不傳參數(shù)陶贼，則打開的是空白窗口
window.open();
返回值 返回的新開頁面的window對象
var opener = window.open();
opener.document.body.style.background = 'red';
并且可以通過它的close方法將它關(guān)閉
opner.close()
window 相關(guān)的事件
onscroll onresize
//onscroll : 當滾動條滾動的時候觸發(fā)
var i = 0;
window.onscroll = function() {
document.title = i++;
}
//onresize : 當窗口大小發(fā)生變化的時候觸發(fā)
window.onresize = function() {
document.title = i++;
}
練習(xí): 回到頂部
窗口尺寸與大小
窗口可視區(qū)尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
document.documentElement 相當與 document.getElementsByTagName('html')[0]
也就是html元素
element.clientHeight = width + padding
但是對于html元素啤贩，它的表現(xiàn)有點不同，它代表了窗口的大小
窗口的滾動距離
Element.scrollTop
可以設(shè)置或者獲取一個元素距離他容器頂部的像素距離(也就是滾動條滾動距離)
在chrome中, 窗口的滾動距離為:
document.body.scrollTop/scrollLeft chrome中認為窗口的滾動條是屬于body的
在體瀏覽器中,窗口的滾動距離為:
document.documentElement.scrollTop/scrollLeft chrome中認為窗口的滾動條是屬于html的
document.onclick = function(){
//chrome中
alert(document.body.scrollTop);
//其他瀏覽器中
alert(document.documentElement.scrollTop);
}
窗口的內(nèi)容高度
document.body.scrollHeight
element.scrollHeight
是計量元素內(nèi)容高度的只讀屬性拜秧，包括overflow樣式屬性導(dǎo)致的視圖中不可見內(nèi)容
<div id="wrapper">
<div></div>
</div>
<style>
#wrapper{
width:100px;
height:100px;
padding: 10px;
border: 1px solid red;
overflow: hidden;
}
#wrapper>div{
height: 600px;
width: 90px;
background: red;
}
</style>
<script>
var oDiv = document.getElementById('wrapper');
alert(oDiv.scrollHeight);//620 = 600+10*2 (10為wrapper的padding);
</script>
