什么是 BOM ?
1.瀏覽器對象模型 Browser Object Model
2.BOM的核心對象是window嫉你，同時window也是JavaScript的全局對象
3.BOM主要負責來對瀏覽器窗口進行操作和窗口與窗口之間的交互
主要包括：
navigator 導航器對象、history 歷史對象硕勿、screen阅懦、顯示器對象铆隘、location 對象授艰、對話框梅惯、定時器爱沟、document
navigator
appCodeName 返回瀏覽器的代碼名
appName 返回瀏覽器廠商名稱
appVersion 返回瀏覽器的平臺和版本信息
cookieEnabled 返回瀏覽器是否開啟cookie的布爾值
platform 返回瀏覽器的操作系統(tǒng)平臺
userAgent 返回客戶機發(fā)送到服務器的 user-agent頭部信息
userAgent 可以用來檢測當前瀏覽器型號和版本
history
back() 返回前一個url
forward() 返回下一個url
go(index) 返回具體的某個頁面否灾，正數(shù)是前面的梭依，負數(shù)是后面的稍算，超出返回undefined
screen
avaiHeight 返回顯示器的可用高度
avaiWidth 返回顯示器的可用寬度
Height 返回屏幕的像素高度
Width 返回屏幕的像素寬度
colorDepth 返回屏幕的顏色位數(shù)
window.screen.width/height//在移動端可以獲取到設備的屏幕寬高
注意這些屬性都是只讀的。
location
屬性
hash 設置或者返回從#開始的URL
host 返回主機和當前URL的端口號
hostname 返回不帶端口號的服務器名稱
href 設置或者返回完整的URL役拴，location對象的toString()方法也可以返回這個值
pathname 設置或者返回URL的路徑部分
search 返回從?到#號之間包括?的URL查詢字符串
port 返回URL中指定的端口號糊探，如果不存在返回 ""
方法
assign(url) 打開新的URL并在瀏覽器歷史記錄里生成一條記錄，如果用location.href 或者 window.location 也是調(diào)用這個方法
reload() 重新加載當前頁面 (刷新)
replace() 用新的文檔替換當前文檔河闰，（替換歷史記錄）
定時器
setInterval(fn,delay) ===> clearInterval(index)
setTimeout(fn,delay) ===> clearTimeout(index)
彈窗科平、對話框
alert()
confirm() 確定返回true 取消返回false
prompt() 確定返回輸入的文本 取消返回null
焦點事件
focus 窗口 聚焦
blur 窗口失焦
// 應用：定時器的開關(guān)
window.onfocus=function(){};
window.onblur=function(){};
窗口尺寸和滾動條
window.innerWidth/window.innerHeight 瀏覽器文檔的可視寬高
window.outerWidth/window.outerHeight 瀏覽器窗口的可視寬高
window.pageXOffset/window.pageYOffset 瀏覽器滾動條的滾動距離
如果需要兼容按照下面的做法:(以縱向滾動條為例)
varsTop=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop
scrollTo(x,y) 方法可以將滾動條移動到指定位置
此方法只在文檔加載的時候可以自動觸發(fā)，文檔加載完成姜性，頁面刷新是無法觸發(fā)的瞪慧，解決辦法：放到定時器里。
(function(win){
vartimer=setInterval(function(){
if(win.pageYOffset>0){
win.scrollTo(0,0);
}else{
clearInterval(timer);
}
},20)
})(window)
DOM
1.文檔對象模型 Document Object Model
2.一套HTML和XML提供的API（應用程序編程接口）
3.DOM描述了一個層次化的節(jié)點部念，允許添加弃酌、移除、修改頁面中的某個部分儡炼。
節(jié)點層次
DOM可以將任何HTML或者XML文檔描繪成一個由多層節(jié)點構(gòu)成的結(jié)構(gòu)妓湘。節(jié)點分為不同的類型，這里咱們主要學習HTML中的節(jié)點類型射赛。
Document
可以將上面這個簡單的HTML文檔表示為一個層次結(jié)構(gòu)：
DOM1級定義了一套Node接口多柑，這套接口將由DOM的所有的節(jié)點來實現(xiàn)。在JS中這套接口是由Node接口來實現(xiàn)的（不懂得話楣责，可以無視這句話）竣灌。
每個節(jié)點都有一個nodeType屬性，用來判斷這個節(jié)點是個什么類型
主要要掌握的節(jié)點類型：
元素節(jié)點 對應數(shù)字 1 #Element null
屬性節(jié)點 對應數(shù)字 2 #attr value
文本節(jié)點 對應數(shù)字 3 #text value
注釋節(jié)點 對應數(shù)字 8 #comment value
文檔節(jié)點 對應數(shù)字 9 #document null
獲取元素的子節(jié)點
每個節(jié)點都有一個childNodes方法秆麸，用來獲取當前元素的所有子節(jié)點(可以用item()也可以用[])
1
2
3
varbox=document.getElementById('box');
varchilds=box.childNodes;
console.log(childs.length);//9
用 childNodes 獲取到的是當前一層的所有子節(jié)點初嘹，包括文本和注釋節(jié)點。
每個節(jié)點有一個childNodes屬性沮趣，其中保存著一個NodeList對象,NodeList是一種類數(shù)組對象屯烦，用于保存一組有序的節(jié)點，可以通過為止來訪問這些節(jié)點。請注意驻龟，雖然可以通過方括號[]的語法來訪問NodeList的值温眉，而且這個對象也有l(wèi)ength屬性，但它并不是Array的實例翁狐。NodeList對象的獨特之處在于类溢，它實際上是基于DOM結(jié)構(gòu)動態(tài)執(zhí)行查詢的結(jié)果，因此DOM結(jié)構(gòu)的變化能夠自動反應在NodeList對象中露懒。我們常說闯冷，NodeList是由生命，有呼吸的的對象懈词，而不是我們第一次訪問它們的某個瞬間拍攝下來的一張快照蛇耀。
每個節(jié)點都有nodeName和nodeValue屬性，分別用來獲取節(jié)點的名字和節(jié)點的值坎弯，對于文檔節(jié)點和元素節(jié)點纺涤，獲取到的nodeValue永遠都是null，對于注釋節(jié)點文本節(jié)點獲取到的就是它們本身荞怒。
一張圖看懂各個節(jié)點之間的關(guān)系：
操作元素節(jié)點
創(chuàng)建元素節(jié)點
document.createElement(tag)
創(chuàng)建文本節(jié)點
document.createTextNode(text)
全部都是 父級.方法 剪切操作 返回添加的節(jié)點 剪切后的事件依然存在
appendChild(node) 向父節(jié)點最后添加節(jié)點
insertBefore(new,old) 向某個元素前面添加節(jié)點洒琢，如果第二個參數(shù)是null那么它的功能就是appendChild。
replaceChild(new,old) 替換節(jié)點
removeChild(node) 刪除節(jié)點
克隆節(jié)點
cloneNode(boolean)不寫參數(shù)默認false只克隆當前節(jié)點褐桌，寫true的話會進行深度復制。但是不會復制事件象迎。
操作文本節(jié)點
全部都是 文本節(jié)點.方法 返回添加的節(jié)點
appendData(text) 將text添加到節(jié)點的末尾
deleteData(offset,count) 從offset指定的位置開始刪除count個字符
insertData(offset,text) 在offset指定的位置插入text
replaceData(offset,count,text) 用text替換從offset指定的位置開始到 offset + count為止處的文本荧嵌。
document 的一些屬性和方法
document.documentElement ===> html
document.body ===> body
document.image ===> 文檔中所有圖片的集合
document.from ===> 文檔中所有表單元素的集合
document.links ===> 文檔中所有鏈接a元素的集合
元素的屬性操作
ele.getAttribute('attr') 獲取元素的某個屬性
ele.setAttribute('attr',value) 給元素設置屬性
ele.removeAttribute('attr') 刪除元素身上的某個屬性
以上這些方法操作的都是元素標簽身上的屬性，用 ele.attr 的是無法獲取和設置的砾淌，對應設置節(jié)點屬性啦撮，如果使用大寫的字符，會自動轉(zhuǎn)換成小寫汪厨。
ele.style獲取的是style對象赃春，getAttribute('style') 獲取到的是后面的字符串。
ele.src 獲取絕對路徑 getAttribute('src') 獲取到的src后面的字符串
獲取元素的屬性集合: ele.attributes (可以用item()也可以用[],然后使用nodeName獲取對應的屬性名劫乱，使用nodeValue獲取元素的屬性值)
HTML5新增的自定義屬性 使用 data-name="value" 注意 如果是這種格式的：data-hello-world 會轉(zhuǎn)換為 helloWorld ,在JS中使用ele.dataset可以獲取到元素自定義屬性的一個對象织中，這個對象不是類數(shù)組。
獲取元素節(jié)點
node.children 獲取節(jié)點下的所有元素節(jié)點
node.firstElementChild 獲取節(jié)點下的第一個元素節(jié)點
node.lastElementChild 獲取節(jié)點下的最后一個元素節(jié)點
node.previousElementSibling 獲取元素的上一個兄弟節(jié)點
node.nextElementSibling 獲取元素的下一個兄弟節(jié)點
兩個動態(tài)獲取元素的方法:
document||content.getElementsByTagName(tag)
document||content.getElementsByClassName(class1 class2 ...)
classList 對象
通過 元素.classList 獲取到當前元素的class列表 （類數(shù)組）
在這個對象下有4個方法
add(class) 將指定的字符串添加到class列表中
contains(class) 判斷列表中是否有某個class
remove(class) 移除某個class
toggle(class) 如果列表中已經(jīng)存在就刪除返回false衷戈，否則添加返回true
對表格的操作
vartab=document.getElementById('table');
tab.tBodies[0].rows[0].cells[0]
以下全部為 #tableElement.方法
createTHead() 創(chuàng)建thead元素狭吼，并自動插入
createTFoot() 創(chuàng)建tfoot元素，并自動插入
createCaption() 創(chuàng)建caption殖妇，并自動插入
deleteTHead() 刪除thead元素
deleteTFoot() 刪除tfoot元素
deleteCaption() 刪除caption元素
insertRow(pos) 向rows合集中插入一行
rows.insertCell(pos) 向cells合集中插入一個單元格
獲取元素的寬高和位置
ele.getBoundingClientRect()//返回一個對象刁笙，對象里面有元素的絕對 left\top\bottom\right 以及元素的 width 和 height
詳解 offset client scroll
相關(guān)參考
http://blog.csdn.net/lzding/article/details/46371609
http://www.jb51.net/article/32801.htm
代碼示例：
offsetWidth、clientWidth、width疲吸、scrollWidth區(qū)別及js與jQuery獲取的方式
vardivObj=document.getElementById("div");
vardOffsetWidth=divObj.offsetWidth;//返回元素的寬度（包括元素寬度座每、內(nèi)邊距和邊框，不包括外邊距）
var$dOffsetWidth=$(divObj).outerWidth(false);//參數(shù)為true摘悴，包括外邊距
vardOffsetHeight=divObj.offsetHeight;//返回元素的高度（包括元素高度峭梳、內(nèi)邊距和邊框，不包括外邊距）
var$dOffsetHeight=$(divObj).outerHeight(false);//參數(shù)為true烦租，包括外邊距
vardClientWidth=divObj.clientWidth;//返回元素的寬度（包括元素寬度延赌、內(nèi)邊距，不包括邊框和外邊距）
var$dClientWidth=$(divObj).innerWidth();
vardClientHeight=divObj.clientHeight;//返回元素的高度（包括元素高度叉橱、內(nèi)邊距挫以，不包括邊框和外邊距）
var$dClientHeight=$(divObj).innerHeight();
vardWidth=divObj.style.width;//返回元素的寬度（包括元素寬度，不包括內(nèi)邊距窃祝、邊框和外邊距）
var$dWidth=$(divObj).width();//width(val)設置寬
vardHeight=divObj.style.height;//返回元素的高度（包括元素高度掐松，不包括內(nèi)邊距、邊框和外邊距）
var$dHeight=$(divObj).height();//height(val)設置高
vardscrollWidth=divObj.scrollWidth;//返回元素的寬度（包括元素寬度粪小、內(nèi)邊距和溢出尺寸大磺，不包括邊框和外邊距），無溢出的情況探膊，與clientWidth相同
vardscrollHeight=divObj.scrollHeight;//返回元素的高度（包括元素高度杠愧、內(nèi)邊距和溢出尺寸，不包括邊框和外邊距）逞壁，無溢出的情況流济，與clientHeight相同
console.log("dOffsetWidth:"+dOffsetWidth+",dOffsetHeight:"+dOffsetHeight+",dClientWidth:"+dClientWidth+",dClientHeight:"+dClientHeight+",dWidth:"+dWidth+",dHeight:"+dHeight+",dscrollWidth:"+dscrollWidth+",dscrollHeight:"+dscrollHeight);
console.log("$dOffsetWidth:"+$dOffsetWidth+",$dOffsetHeight:"+$dOffsetHeight+",$dClientWidth:"+$dClientWidth+",$dClientHeight:"+$dClientHeight+",$dWidth:"+$dWidth+",$dHeight:"+$dHeight);
/*
注意：offsetWidth(offsetHeight)與style.width(style.height)的區(qū)別
1. style.height 返回的是字符串，如28px腌闯，offsetWidth返回的是數(shù)值28绳瘟，如果需要對取得的值進行計算，用offsetWidth比較方便;如果拿到offsetWidth設置style.left的值姿骏，需加'px'糖声。
2. style.width/style.height與scrollWidth/scrollHeight是可讀寫的屬性，clientWidth/clientHeight與offsetWidth/offsetHeight是只讀屬性
3. style.height的值需要事先定義分瘦，否則取到的值為空蘸泻。而且必須要定義在html里，如果定義在css里擅腰，style.height的值仍然為空蟋恬，但元素偏移有效；而offsetWidth則仍能取到趁冈。
*/
/*
總結(jié)：
1歼争、通過style.width(style.height)或者jQuery的$(divObj).width()/$(divObj).height()獲取/設置元素的寬高
2拜马、若要獲取元素包含邊框的寬度，則可通過divObj.offsetWidth/divObj.offsetHeight或jQuery的$(divObj).outerWidth(false)/$(divObj).outerHeight(false)獲取
3沐绒、通過$(divObj).outerWidth(true)/$(divObj).outerHeight(true)獲取帶外邊距的寬度
4俩莽、通過$(divObj).innerWidth()/$(divObj).innerHeight()獲取不包含邊框、不包含外邊距的寬度
*/
