前言
到目前為止，我們已經學過了JavaScript的一些簡單的文法。但是這些簡單的文法，并沒有和浏覽器有任何互動。
也就是我們還不能制作一些我們經常看到的網頁的一些互動，我們需要繼續學習BOM和DOM相關知識。
JavaScript分為 ECMAScript，DOM，BOM。
BOM（Browser Object Model）是指浏覽器對象模型，它使 JavaScript 有能力與浏覽器進行“對話”。
DOM （Document Object Model）是指文檔對象模型，通過它，可以通路HTML文檔的所有元素。
Window對象是用戶端JavaScript最高層對象之一，由于window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()可以簡寫成：document.write()。
window對象
所有浏覽器都支援 window 對象。它表示浏覽器視窗。
*如果文檔包含架構（frame 或 iframe 标簽），浏覽器會為 HTML 文檔建立一個 window 對象，并為每個架構建立一個額外的 window 對象。
*沒有應用于 window 對象的公開标準，不過所有浏覽器都支援該對象。
所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。
全局變量是 window 對象的屬性。全局函數是 window 對象的方法。
接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。
一些常用的Window方法：
- window.innerHeight - 浏覽器視窗的内部高度
- window.innerWidth - 浏覽器視窗的内部寬度
- window.open() - 打開新視窗
- window.close() - 關閉目前視窗
window的子對象
navigator對象（了解即可）
浏覽器對象，通過這個對象可以判定使用者所使用的浏覽器，包含了浏覽器相關資訊。
navigator.appName // Web浏覽器全稱
navigator.appVersion // Web浏覽器廠商和版本的詳細字元串
navigator.userAgent // 用戶端絕大部分資訊
navigator.platform // 浏覽器運作所在的作業系統 screen對象（了解即可）
螢幕對象，不常用。
一些屬性：
- screen.availWidth - 可用的螢幕寬度
- screen.availHeight - 可用的螢幕高度
history對象（了解即可）
window.history 對象包含浏覽器的曆史。
浏覽曆史對象，包含了使用者對目前頁面的浏覽曆史，但我們無法檢視具體的位址，可以簡單的用來前進或後退一個頁面。
history.forward() // 前進一頁
history.back() // 後退一頁 location對象
window.location 對象用于獲得目前頁面的位址 (URL)，并把浏覽器重定向到新的頁面。
常用屬性和方法：
location.href 擷取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新加載頁面 彈出框
可以在 JavaScript 中建立三種消息框：警告框、确認框、提示框。
警告框
警告框經常用于確定使用者可以得到某些資訊。
當警告框出現後，使用者需要點選确定按鈕才能繼續進行操作。
文法：
alert("你看到了嗎？"); 确認框（了解即可）
确認框用于使使用者可以驗證或者接受某些資訊。
當确認框出現後，使用者需要點選确定或者取消按鈕才能繼續進行操作。
如果使用者點選确認，那麼傳回值為 true。如果使用者點選取消，那麼傳回值為 false。
文法：
confirm("你确定嗎？") 提示框（了解即可）
提示框經常用于提示使用者在進入頁面前輸入某個值。
當提示框出現後，使用者需要輸入某個值，然後點選确認或取消按鈕才能繼續操縱。
如果使用者點選确認，那麼傳回值為輸入的值。如果使用者點選取消，那麼傳回值為 null。
文法：
prompt("請在下方輸入","你的答案") 計時相關
通過使用 JavaScript，我們可以在一定時間間隔之後來執行代碼，而不是在函數被調用後立即執行。我們稱之為計時事件。
setTimeout()
文法：
var t=setTimeout("JS語句",毫秒) setTimeout() 方法會傳回某個值。在上面的語句中，值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。
setTimeout() 的第一個參數是含有 JavaScript 語句的字元串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。
第二個參數訓示從目前起多少毫秒後執行第一個參數（1000 毫秒等于一秒）。
clearTimeout()
文法：
clearTimeout(setTimeout_variable) 舉個例子：
// 在指定時間之後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設定
clearTimeout(timer); setInterval()
setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或視窗被關閉。由 setInterval() 傳回的 ID 值可用作 clearInterval() 方法的參數。
文法：
setInterval("JS語句",時間間隔) 傳回值
一個可以傳遞給 Window.clearInterval() 進而取消對 code 的周期性執行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 設定的 timeout。
clearInterval() 方法的參數必須是由 setInterval() 傳回的 ID 值。
文法：
clearInterval(setinterval傳回的ID值) 舉個例子：
// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設定
clearInterval(timer); 稍微大一點的示例：
定時器
定時器示例
DOM
DOM（Document Object Model）是一套對文檔的内容進行抽象和概念化的方法。
當網頁被加載時，浏覽器會建立頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造為對象的樹。
HTML DOM 樹
DOM标準規定HTML文檔中的每個成分都是一個節點(node)：
- 文檔節點(document對象)：代表整個文檔
- 元素節點(element 對象)：代表一個元素（标簽）
- 文本節點(text對象)：代表元素（标簽）中的文本
- 屬性節點(attribute對象)：代表一個屬性，元素（标簽）才有屬性
- 注釋是注釋節點(comment對象)
JavaScript 可以通過DOM建立動态的 HTML：
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
查找标簽
直接查找
document.getElementById 根據ID擷取一個标簽
document.getElementsByClassName 根據class屬性擷取
document.getElementsByTagName 根據标簽名擷取标簽合集 注意：
涉及到DOM操作的JS代碼應該放在文檔的哪個位置。
間接查找
parentElement 父節點标簽元素
children 所有子标簽
firstElementChild 第一個子标簽元素
lastElementChild 最後一個子标簽元素
nextElementSibling 下一個兄弟标簽元素
previousElementSibling 上一個兄弟标簽元素 節點操作
建立節點
文法：
createElement(标簽名)
示例：
var divEle = document.createElement("div"); 添加節點
文法：
追加一個子節點（作為最後的子節點）
somenode.appendChild(newnode)；
把增加的節點放到某個節點的前邊。
somenode.insertBefore(newnode,某個節點);
示例：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle); 删除節點：
文法：
獲得要删除的元素，通過父元素調用删除。
removeChild(要删除的節點)
替換節點：
文法：
somenode.replaceChild(newnode, 某個節點);
屬性節點
擷取文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML 設定文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="
2
" attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自帶的屬性還可以直接.屬性名來擷取和設定
imgEle.src
imgEle.src="..." 擷取值操作
文法：
elementNode.value
适用于以下标簽：
- .input
- .select
- .textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value); class的操作
className 擷取所有樣式類名(字元串)
classList.remove(cls) 删除指定類
classList.add(cls) 添加類
classList.contains(cls) 存在傳回true，否則傳回false
classList.toggle(cls) 存在就删除，否則添加 指定CSS操作
obj.style.backgroundColor="red" JS操作CSS屬性的規律：
1.對于沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position 2.對含有中橫線的CSS屬性，将中橫線後面的第一個字母換成大寫即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily 事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發浏覽器中的動作（action），比如當使用者點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性清單，這些屬性可插入 HTML 标簽來定義事件動作。
常用事件
onclick 當使用者點選某個對象時調用的事件句柄。
ondblclick 當使用者輕按兩下某個對象時調用的事件句柄。
onfocus 元素獲得焦點。 // 練習：輸入框
onblur 元素失去焦點。 應用場景：用于表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的内容被改變。 應用場景：通常用于表單元素,當元素内容被改變時觸發.（select關聯）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當使用者在最後一個輸入框按下回車按鍵時,表單送出.
onkeypress 某個鍵盤按鍵被按下并松開。
onkeyup 某個鍵盤按鍵被松開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 滑鼠按鈕被按下。
onmousemove 滑鼠被移動。
onmouseout 滑鼠從某元素移開。
onmouseover 滑鼠移到某元素之上。
onselect 在文本框中的文本被選中時發生。
onsubmit 确認按鈕被點選，使用的對象是form。 綁定方式：
方式一：
點我
注意：
this是實參，表示觸發事件的目前元素。
函數定義過程中的ths為形參。
方式二：
點我
事件示例：
搜尋框示例
搜尋框示例
select關聯
請選擇省:
請選擇市: