BOM&&DOM
BOM的概念
提供了獨立于頁面內容而與瀏覽器進行交互的對象俄删，其核心對象是window
在瀏覽器中，window對象（注意奏路，w為小寫）指當前的瀏覽器窗口畴椰。它也是所有對象的頂層對象。
“頂層對象”指的是最高一層的對象鸽粉，所有其他對象都是它的下屬斜脂。JavaScript規(guī)定，瀏覽器環(huán)境的所有全局變量触机，都是window對象的屬性
判斷瀏覽器類型
? var t = navigator.userAgent;
? if(t.indexOf('Trident')!= -1){
? console.log('ie內核')
? }else if(t.indexOf('Presto')!= -1){
? console.log('歐朋')
? }else if(t.indexOf('Chrome')!= -1){
? console.log('chrome ')
? }else if(t.indexOf('Safari')!= -1){
? console.log('Safari ')
? }else{
? console.log('其他')
? }
判斷是移動端還是PC（重要）
//移動端
? var ua = navigator.userAgent.toLowerCase();
? if (ua.indexOf('mobi') !=-1) {
? ? // 手機瀏覽器
? ? console.log('手機')
? } else {
? ? // 非手機瀏覽器
? ? console.log('非手機')
? }
判斷是移動端還是PC（重要）
//移動端
? var ua = navigator.userAgent.toLowerCase();
? if (ua.indexOf('mobi') !=-1) {
? ? // 手機瀏覽器
? ? console.log('手機')
? if(ua.indexOf('android') !=-1){
? console.log('移動端 安卓')
? }else if(ua.indexOf('ipod') !=-1
??????? || ua.indexOf('iphone') !=-1
??????? || ua.indexOf('ipad') !=-1)
? {
? console.log('移動端? 蘋果手機')
? }
? } else {
? ? // 非手機瀏覽器
? ? console.log('非手機')
? }
location對象
location對象包含有關當前 URL 的信息帚戳。
location對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問儡首。
屬性：hash片任、host、hostname蔬胯、href对供、pathname、port氛濒、protocol产场、search
href：設置或返回完整的 URL。（常用）
hash：設置或返回從井號 (#) 開始的 URL（錨）舞竿。
search：設置或返回從問號 (?) 開始的 URL（查詢部分京景？id=1&name=abb）。（常用）
host? 設置或返回主機名和當前 URL 的端口號骗奖。
hostname? 設置或返回當前 URL 的主機名确徙。
pathname? 設置或返回當前 URL 的路徑部分醒串。
port? 設置或返回當前 URL 的端口號。
protocol? 設置或返回當前 URL 的協(xié)議米愿。
location對象
方法：assign(url), replace(url) , reload()
assign()? 加載新的文檔厦凤。
reload()? 重新加載當前文檔。
replace()? 用新的文檔替換當前文檔育苟。
window.open();
打開一個新的瀏覽器窗口较鼓。
window.close();
關閉瀏覽器窗口。
alert(arg1)
顯示帶有一段消息和一個確認按鈕的警告框违柏。
prompt(arg1,arg2)
顯示可提示用戶輸入的對話框博烂。
confirm(arg1) （偶爾）
顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
history對象：
?? history對象保存著用戶上網的歷史記錄,從窗口被 打開的那一刻算起.
?? 后退一頁? history.go(-1)???? history.back()
?? 前進一頁? history.go(1)????? history.forward()
?? 前進兩頁? history.go(2)
window.onload
load事件發(fā)生在文檔在瀏覽器窗口加載完畢時漱竖。window.onload屬性可以指定這個事件的回調函數禽篱。
window.onload = function() {
? console.log('頁面加載完畢')
};
定時器和延時器
JavaScript 提供定時執(zhí)行代碼的功能，叫做定時器（timer）馍惹，主要由setTimeout()和setInterval()這兩個函數來完成躺率。
? 延時器
? setTimeout函數用來指定某個函數或某段代碼，在多少毫秒之后執(zhí)行万矾。它返回一個整數悼吱，表示定時器的編號，以后可以用來取消這個定時器良狈。
? var timerId = setTimeout(func, delay);
上面代碼中后添，setTimeout函數接受兩個參數，第一個參數func是將要推遲執(zhí)行的函數名薪丁，第二個參數delay是推遲執(zhí)行的毫秒數遇西。
? console.log(1);
? //推遲執(zhí)行
? setTimeout(function(){
? console.log(2)
? },1000);
? console.log(3);
廣告彈出自動關閉
? 需要使用 oDiv.style.display = 'block';//讓div顯示
? 需要使用 oDiv.style.display = 'none';//讓div隱藏
window.onscroll
可以監(jiān)聽頁面的滾動
window.onscroll = function(){
? console.log('頁面滾動')
}
一旦頁面滾動就會觸發(fā)onscroll 函數
document.scrollingElement
document.scrollingElement屬性返回文檔的滾動元素。也就是說严嗜，當文檔整體滾動時粱檀，到底是哪個元素在滾動。
這個屬性返回的文檔的根元素document.documentElement（即<html>）漫玄。
獲取可視區(qū)域距離頁面頂部的距離
document.scrollingElement.scrollTop;
設置滾動條的距離頁面頂面的距離
document.scrollingElement.scrollTop = 0
或者也可以像下面
? 獲取
? scrollTop = document.scrollingElement.scrollTop
? scrollTop=document.documentElement.scrollTop? || document.body.scrollTop
設置
document.documentElement.scrollTop? = 0
?document.body.scrollTop = 0梧税；
DOM的基本操作(查詢、創(chuàng)建称近、添加第队，修改，刪除)
document.getElementById方法返回匹配指定id屬性的元素節(jié)點刨秆。如果沒有發(fā)現(xiàn)匹配的節(jié)點凳谦，則返回null。
getElementsByName衡未，根據name屬性
document.getElementsByClassName方法返回一個類似數組的對象（HTMLCollection實例）尸执，包括了所有class名字符合指定條件的元素（兼容問題家凯，低版本ie）
document.getElementsByTagName方法搜索 HTML 標簽名，返回符合條件的元素如失。它的返回值是一個類似數組對象（HTMLCollection實例）
document.querySelector方法接受一個 CSS 選擇器作為參數绊诲，返回匹配該選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件褪贵，則返回第一個匹配的節(jié)點掂之。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null脆丁。
var el1 = document.querySelector('.myclass');
document.querySelectorAll方法與querySelector用法類似世舰，區(qū)別是返回一個NodeList對象，包含所有匹配給定選擇器的節(jié)點槽卫。
elementList = document.querySelectorAll('.myclass');??
DOM節(jié)點類型(元素和文本)
DOM 的最小組成單位叫做節(jié)點（node）跟压。文檔的樹形結構（DOM 樹），就是由各種不同類型的節(jié)點組成歼培。每個節(jié)點可以看作是文檔樹的一片葉子震蒋。
Element：網頁的各種HTML標簽（比如<body>、<a>等）
Text：標簽之間或標簽包含的文本? （創(chuàng)建Text）
注釋也是節(jié)點
通過 nodeType屬性可以查看類型
如果節(jié)點是一個元素節(jié)點躲庄，nodeType 屬性返回 1喷好。
如果節(jié)點是屬性節(jié)點, nodeType 屬性返回 2。
如果節(jié)點是一個文本節(jié)點读跷，nodeType 屬性返回 3。
如果節(jié)點是一個注釋節(jié)點禾唁，nodeType 屬性返回 8
文檔碎片? document.createDocumentFragment()? 作為容器使用效览，可以避免頻繁操作dom
