JS事件和BOM
事件的作用：（1）驗證用戶輸入的數(shù)據(jù)
?????????? （2）增加頁面的動感效果
?????????? （3）增強用戶的體驗度
事件中的名詞：（1）事件源：誰觸發(fā)的事件
?????????? ?（2）事件名：觸發(fā)了什么事件
?????????? ?（3）事件監(jiān)聽：誰管這個事件，誰監(jiān)視？
?????????? ?（4）事件處理：發(fā)生了怎么辦
事件類型：Keyboard鍵盤事件；
????? ?????Mouse事件，由鼠標或者類似用戶動作觸發(fā)的事件；
????? ?????Media事件，由媒介（比如視頻、圖像和音頻）觸發(fā)的事件；
常用的事件：（1）onload? 當頁面或者圖像加載完后立即觸發(fā)
????? ?????????（2）onblur 當元素失去焦點
????? ?????????（3）onfocus 元素獲得焦點
?????????? （4）onclick 鼠標點擊某個對象
（5）onchange?用戶改變域的內(nèi)容
（6）onmouseover 鼠標移動到某個元素上
（7）onmouseout?鼠標從某個元素上離開
（8）onkeyup???某個鍵盤的鍵被松開
（9）onkeydown?某個鍵盤的鍵被按下
事件流和事件模型
當產(chǎn)生一個事件時，該事件會在元素節(jié)點與根節(jié)點之間按照特定的順序傳播，路徑所進過的節(jié)點都會受到該事件，這個傳播過程稱為DOM事件流；
事件順序：事件捕獲?? 事件冒泡
DOM事件流：DMO0級事件處理程序——同一個元素的同一個事件設定一個處理程序；
?DOM2級事件處理程序——定義了兩個方法，用于處理指定和刪除事件處理程序的操作addEventListener()和removeEventListener(),所有的DOM節(jié)點都包含這兩種方法，并且他們都接受3個參數(shù)：處理的事件名、處理程序的函數(shù)、一個布爾值。
BOM（瀏覽器對象模型）
Window對象是BOM的核心對象，它表示瀏覽器的一個實例。
Window對象方法
[if !supportLists]1）????????[endif]系統(tǒng)對話框（1）消息框? alert()
（2）輸入框 prompt()
（3）確認框confirm()
2)打開窗口??? window.open()
3）關閉窗口? window.close()
4）時間函數(shù)?? setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。通過返回的標識也可以cliearTimeout(id) 來清除指定函數(shù)的執(zhí)行.
??? setInterval() :可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式，也可根據(jù)返回的標識用來結束。該方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關閉。
Window對象屬性
Histroy對象：history 對象是歷史對象。包含用戶（在瀏覽器窗口中）訪問過的 URL。history 對象是window 對象的一部分，可通過 window.history 屬性對其進行訪問。
history 對象的屬性：length，返回瀏覽器歷史列表中的 URL 數(shù)量。
history 對象的方法：
back()：加載 history 列表中的前一個 URL。
forward()：加載歷史列表中的下一個 URL。當頁面第一次訪問時，還沒有下一個 url。
go(number|URL):
URL 參數(shù)使用的是要訪問的 URL。而 number 參數(shù)使用的是要訪
問的 URL 在 History 的 URL 列表中的相對位置。go(-1)，到上一個頁面。
Location對象
location 對象是 window 對象之一，提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。也可通過 window.location 屬性來訪問。
location 對象的屬性 href：設置或返回完整的 URL
location 對象的方法
reload()：重新加載當前文檔。
replace()：用新的文檔替換當前文檔。
Doucument對象
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。Document 對象是 Window 對象的一部分，也可通過 window.document 屬性對其進行訪問。
document 對象的 body 屬性，提供對<body>元素的直接訪問，cookie 屬性，用來設置或返回與當前文檔有關的所有 cookie，write()方法，向文檔寫 HTML 表達式或 JavaScript 代碼。還有其他屬性和方法。
DOM——document object model 文檔對象模型
dom 提供了用程序動態(tài)控制 html 接口。DOM 即文檔對象模型描
繪了一個層次化的節(jié)點樹，運行開發(fā)人員添加、移除和修改頁面的某一部分。dom 處于javascript 的核心地位上。
節(jié)點
加載 HTML 頁面時，Web 瀏覽器生成一個樹型結構，用來表示頁面內(nèi)部結構。DOM 將這種樹型結構理解為由節(jié)點組成，組成一個節(jié)點樹。
文檔節(jié)點? 文檔本身? 整個文檔 document
元素節(jié)點? 所有的 HTML 元素? 、<div>、<p>
屬性節(jié)點? HTML元素內(nèi)的屬性?id、href、name、class
文本節(jié)點? 元素內(nèi)的文本?hello
注釋節(jié)點? HTML中的注釋?
獲取節(jié)點
在進行增、刪、改的操作時，都需要指定到一個位置，或者找到一個目標，此時我們就可以通過 Document 對象提供的方法，查找、定位某個對象（也就是我們說的點）。
注意：操作 dom 必須等節(jié)點初始化完畢后，才能執(zhí)行。處理方式兩種:
（1）把 script 調(diào)用標簽移到 html 末尾即可；
（2）使用 onload 事件來處理 JS，等待 html 加載完畢再加載 onload 事件里的 JS。
window.onload =
function () { //預加載 html 后執(zhí)行};
獲取方法：
getElementById()? 根據(jù) id 獲取 dom 對象，如果 id 重復，那么以第一個為準
getElementsByTagName()? 根據(jù)標簽名獲取 dom 對象數(shù)組
getElementsByClassName()? 根據(jù)樣式名獲取 dom 對象數(shù)組
getElementsByName()? 根據(jù) name 屬性值獲取 dom 對象數(shù)組，常用于多選獲取值。
創(chuàng)建節(jié)點：
createElement() 創(chuàng)建一個新的節(jié)點，需要傳入節(jié)點的標簽名稱，返回創(chuàng)建的元素對象
createTextNode()創(chuàng)建一個文本節(jié)點，可以傳入文本內(nèi)容
innerHTML 也能達到創(chuàng)建節(jié)點的效果，直接添加到指定位置了。
插入節(jié)點：
write()? 將任意的字符串插入到文檔中
appendChild() 向元素中添加新的子節(jié)點，作為最后一個子節(jié)點
insertBefore() 向指定的已有的節(jié)點之前插入新的節(jié)點
newItem：要插入的節(jié)點
exsitingItem：參考節(jié)點
需要參考父節(jié)點
間接查找節(jié)點：
childNodes () 返回元素的一個子節(jié)點的數(shù)組
firstChild() 返回元素的第一個子節(jié)點
lastChild() 返回元素的最后一個子節(jié)點
nextSibling? 返回元素的下一個兄弟節(jié)點
parentNode? 返回元素的父節(jié)點
previousSibling? 返回元素的上一個兄弟節(jié)點
替換節(jié)點：
replaceChild(newNode,oldNode)? 用新的節(jié)點替換舊的節(jié)點
克隆節(jié)點：
cloneNode()? 復制節(jié)點
刪除節(jié)點：
removeChild()? 從元素中移除子節(jié)點
屬性操作
在操作 DOM 對象時，除了可以操作對象整體之外，還可以更加靈活地操作對象中的各個屬性。
getAttribute()? 返回指定元素的屬性值
getAttributeNode()? 返回指定屬性節(jié)點
element.id? 設置或者返回元素的 id
setAttribute()? 設置或者改變指定屬性并指定值
setAttributeNode()? 設置或者改變指定屬性節(jié)點
element.style? 設置或返回元素的樣式屬性
element.className? 設置或返回元素的 class 屬性
element.classList? 返回元素的類名
