什麼是 BOM ?
1.瀏覽器對象模型 Browser Object Model
2.BOM的核心對象是window，同時window也是JavaScript的全局對象
3.BOM主要負責來對瀏覽器窗口進行操作和窗口與窗口之間的交互
主要包括：
navigator 導航器對象、history 歷史對象、screen、顯示器對象、location 對象、對話框、定時器、document
navigator
- appCodeName 返回瀏覽器的代碼名
- appName 返回瀏覽器廠商名稱
- appVersion 返回瀏覽器的平臺和版本信息
- cookieEnabled 返回瀏覽器是否開啓cookie的布爾值
- platform 返回瀏覽器的操作系統平臺
- userAgent 返回客戶機發送到服務器的 user-agent頭部信息
userAgent 可以用來檢測當前瀏覽器型號和版本
history
- back() 返回前一個url
- forward() 返回下一個url
- go(index) 返回具體的某個頁面，正數是前面的，負數是後面的，超出返回undefined
screen
- avaiHeight 返回顯示器的可用高度
- avaiWidth 返回顯示器的可用寬度
- Height 返回屏幕的像素高度
- Width 返回屏幕的像素寬度
- colorDepth 返回屏幕的顏色位數
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 也是調用這個方法
- reload() 重新加載當前頁面 (刷新)
- replace() 用新的文檔替換當前文檔，（替換歷史記錄）
定時器
setInterval(fn,delay) ===> clearInterval(index)
setTimeout(fn,delay) ===> clearTimeout(index)
彈窗、對話框
- alert()
- confirm() 確定返回true 取消返回false
- prompt() 確定返回輸入的文本 取消返回null
焦點事件
- focus 窗口 聚焦
- blur 窗口失焦
// 應用：定時器的開關
window.onfocus = function(){};
window.onblur = function(){};窗口尺寸和滾動條
- window.innerWidth/window.innerHeight 瀏覽器文檔的可視寬高
- window.outerWidth/window.outerHeight 瀏覽器窗口的可視寬高
- window.pageXOffset/window.pageYOffset 瀏覽器滾動條的滾動距離
- 如果需要兼容按照下面的做法:(以縱向滾動條爲例)
var sTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop- scrollTo(x,y) 方法可以將滾動條移動到指定位置
- 此方法只在文檔加載的時候可以自動觸發，文檔加載完成，頁面刷新是無法觸發的，解決辦法：放到定時器裏。
(function (win){
var timer = 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描述了一個層次化的節點，允許添加、移除、修改頁面中的某個部分。
節點層次
DOM可以將任何HTML或者XML文檔描繪成一個由多層節點構成的結構。節點分爲不同的類型，這裏咱們主要學習HTML中的節點類型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>
<span></span>
<span></span>
</h2>
<p>
<a href=""></a>
</p>
</body>
</html>可以將上面這個簡單的HTML文檔表示爲一個層次結構：
DOM1級定義了一套Node接口，這套接口將由DOM的所有的節點來實現。在JS中這套接口是由Node接口來實現的（不懂得話，可以無視這句話）。
每個節點都有一個nodeType屬性，用來判斷這個節點是個什麼類型
主要要掌握的節點類型：
- 元素節點 對應數字 1 #Element null
- 屬性節點 對應數字 2 #attr value
- 文本節點 對應數字 3 #text value
- 註釋節點 對應數字 8 #comment value
- 文檔節點 對應數字 9 #document null
獲取元素的子節點
每個節點都有一個childNodes方法，用來獲取當前元素的所有子節點(可以用item()也可以用[])
<body>
<div id="box">
<!-- 註釋 -->
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<script>
var box = document.getElementById('box');
var childs = box.childNodes;
console.log(childs.length); //9
</script>
</body>用 childNodes 獲取到的是當前一層的所有子節點，包括文本和註釋節點。
每個節點有一個childNodes屬性，其中保存着一個NodeList對象,NodeList是一種類數組對象，用於保存一組有序的節點，可以通過爲止來訪問這些節點。請注意，雖然可以通過方括號[]的語法來訪問NodeList的值，而且這個對象也有length屬性，但它並不是Array的實例。NodeList對象的獨特之處在於，它實際上是基於DOM結構動態執行查詢的結果，因此DOM結構的變化能夠自動反應在NodeList對象中。我們常說，NodeList是由生命，有呼吸的的對象，而不是我們第一次訪問它們的某個瞬間拍攝下來的一張快照。
每個節點都有nodeName和nodeValue屬性，分別用來獲取節點的名字和節點的值，對於文檔節點和元素節點，獲取到的nodeValue永遠都是null，對於註釋節點文本節點獲取到的就是它們本身。
一張圖看懂各個節點之間的關係：
操作元素節點
創建元素節點
- document.createElement(tag)
創建文本節點
- document.createTextNode(text)
全部都是 父級.方法 剪切操作 返回添加的節點 剪切後的事件依然存在
- appendChild(node) 向父節點最後添加節點
- insertBefore(new,old) 向某個元素前面添加節點，如果第二個參數是null那麼它的功能就是appendChild。
- replaceChild(new,old) 替換節點
- removeChild(node) 刪除節點
- 克隆節點
- cloneNode(boolean)不寫參數默認false只克隆當前節點，寫true的話會進行深度複製。但是不會複製事件。
操作文本節點
- 全部都是 文本節點.方法 返回添加的節點
- appendData(text) 將text添加到節點的末尾
- 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 的是無法獲取和設置的，對應設置節點屬性，如果使用大寫的字符，會自動轉換成小寫。
- ele.style獲取的是style對象，getAttribute(‘style’) 獲取到的是後面的字符串。
- ele.src 獲取絕對路徑 getAttribute(‘src’) 獲取到的src後面的字符串
獲取元素的屬性集合: ele.attributes (可以用item()也可以用[],然後使用nodeName獲取對應的屬性名，使用nodeValue獲取元素的屬性值)
HTML5新增的自定義屬性 使用 data-name=”value” 注意 如果是這種格式的：data-hello-world 會轉換爲 helloWorld ,在JS中使用ele.dataset可以獲取到元素自定義屬性的一個對象，這個對象不是類數組。
獲取元素節點
- node.children 獲取節點下的所有元素節點
- node.firstElementChild 獲取節點下的第一個元素節點
- node.lastElementChild 獲取節點下的最後一個元素節點
- node.previousElementSibling 獲取元素的上一個兄弟節點
- node.nextElementSibling 獲取元素的下一個兄弟節點
兩個動態獲取元素的方法:
- document||content.getElementsByTagName(tag)
- document||content.getElementsByClassName(class1 class2 …)
classList 對象
通過 元素.classList 獲取到當前元素的class列表 （類數組）
- 在這個對象下有4個方法
- add(class) 將指定的字符串添加到class列表中
- contains(class) 判斷列表中是否有某個class
- remove(class) 移除某個class
- toggle(class) 如果列表中已經存在就刪除返回false，否則添加返回true
- add(class) 將指定的字符串添加到class列表中
對錶格的操作
以獲取表格中的第一個單元格爲例：<table id="table">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var tab = document.getElementById('table');
tab.tBodies[0].rows[0].cells[0]
</script>
- 以下全部爲 #tableElement.方法
- createTHead() 創建thead元素，並自動插入
- createTFoot() 創建tfoot元素，並自動插入
- createCaption() 創建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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offsetWidth、clientWidth、width、scrollWidth區別及js與jQuery獲取的方式</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body style="border:1px solid #ccc">
<div id="div" style="width:100px;height:80px;left:10px;top:8px;position:relative;border:1px solid #ccc;margin:20px 10px;padding:7px 6px;">
</div>
<script type="text/javascript">
var divObj = document.getElementById("div");
var dOffsetWidth = divObj.offsetWidth;//返回元素的寬度（包括元素寬度、內邊距和邊框，不包括外邊距）
var $dOffsetWidth = $(divObj).outerWidth(false);//參數爲true，包括外邊距
var dOffsetHeight = divObj.offsetHeight;//返回元素的高度（包括元素高度、內邊距和邊框，不包括外邊距）
var $dOffsetHeight = $(divObj).outerHeight(false);//參數爲true，包括外邊距
var dClientWidth = divObj.clientWidth;//返回元素的寬度（包括元素寬度、內邊距，不包括邊框和外邊距）
var $dClientWidth = $(divObj).innerWidth();
var dClientHeight = divObj.clientHeight;//返回元素的高度（包括元素高度、內邊距，不包括邊框和外邊距）
var $dClientHeight = $(divObj).innerHeight();
var dWidth = divObj.style.width;//返回元素的寬度（包括元素寬度，不包括內邊距、邊框和外邊距）
var $dWidth = $(divObj).width();//width(val)設置寬
var dHeight = divObj.style.height;//返回元素的高度（包括元素高度，不包括內邊距、邊框和外邊距）
var $dHeight = $(divObj).height();//height(val)設置高
var dscrollWidth = divObj.scrollWidth;//返回元素的寬度（包括元素寬度、內邊距和溢出尺寸，不包括邊框和外邊距），無溢出的情況，與clientWidth相同
var dscrollHeight = divObj.scrollHeight;//返回元素的高度（包括元素高度、內邊距和溢出尺寸，不包括邊框和外邊距），無溢出的情況，與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)的區別
1. style.height 返回的是字符串，如28px，offsetWidth返回的是數值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則仍能取到。
*/
/*
總結：
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()獲取不包含邊框、不包含外邊距的寬度
*/
</script>
</body>
</html>
