1.文檔樹
Document Object Model 文檔對象模型
包含： DOM Core ? ? DOM HTML ? ? DOM Style ? ? ?DOM Event
節(jié)點遍歷： .parentNode ? ? .firstChild ? ? ?.lastChild ? ? ? 父元素，子元素
? ? ? ? ? ? ? ? ? .previousSbling ? ? ? .nextSibling ? ?兄弟元素
通過已獲取節(jié)點的節(jié)點關系獲取節(jié)點，可維護性差。
2.節(jié)點操作
getElementById：element = document.getElementById(id); 從文檔中根據(jù) id 獲取元素
getElementsByTagName：collection = element.getElementsByTagName(tagName); 獲取指定元素的后代元素中具有指定標簽名稱的集合。collection 是動態(tài)的，后續(xù)對節(jié)點的操作會影響 collection。
getElementsByClassName：collection = element.getElementsByClassName(className); 獲取指定元素的后代元素中具有指定 className 的集合?？赏ㄟ^空格分隔符指定多個類名。
querySelector(querySelectorAll)：list = element.querySelector(selector); 獲取指定元素的后代元素中，符合選擇器的節(jié)點。querySelector 獲取第一個符合條件的元素，querySelectorAll 獲取所有符合條件的元素。list 不是動態(tài)的，一旦獲取之后不會變化。
創(chuàng)建節(jié)點：element = document.createElement(tagName);
修改節(jié)點：element.textContent ? ? element.innerText 修改節(jié)點及其后代節(jié)點的文本內容。
插入結點：element.appendChild(achild) 為指定元素添加子節(jié)點，追加在最后。
element.insertBefore(achild,referenceChild) 在指定元素指定的子節(jié)點前插入子節(jié)點。
節(jié)點的 HTML 內容：element.innerHTML 建議僅用于新節(jié)點，確保沒有用戶填的內容。否則會有內存泄漏和安全問題。
3.屬性操作
通過 JS 獲得或修改屬性值。每個 HTML 屬性對應相應的 DOM 對象屬性。
屬性操作三種方式：property accessor（屬性訪問器） getAtrribute/setAttribute ? dataset
property accessor（屬性訪問器）
讀：input.className; input["id"];
寫：input.value = "wwq@163.com"; ? ?input.disabled = true;
類型：轉換過的實用對象
特點：通用性較差（名字異常） 擴展性較差（每增加一個屬性，需要增加屬性訪問器中的屬性） ? ? 優(yōu)點為獲得的屬性為實用對象，可直接使用。
getAtrribute/setAttribute
讀：var attribute = element.getAttribute(attributeName); ?input.getAttribute("class");
寫：element.setAttribute(name,value); ?input("value","wwq@163.com"); input.setAttribute("disabled","");
類型：屬性字符串
特點：獲得的均為字符串，純粹為字符串的操作。通用性好。
純字符串操作推薦用 getAtrribute/setAttribute；其它類型操作使用屬性訪問器。
dataset(操作自定義屬性)
dataset 為 HTML 上的屬性，屬性名為 data-* ，在元素上保存跟元素節(jié)點相關的數(shù)據(jù)以后使用。
4.樣式操作
通過 JS 動態(tài)的修改 CSS，進而修改頁面樣式。
整張頁面中所有樣式表對象為 document.stylesheet
頁面頭部中 link 元素上 href 屬性上引入的樣式表，style 標簽中的樣式表對象為 element.sheet
在元素的 style 屬性中的樣式為 element.style
內部樣式表和元素上的樣式屬性
定義在 style 元素中的內部樣式表 element.sheet 為 CSSStyleSheet 對象。
element.sheet.cssRules[1] 為 .u-txt{...}
element.sheet.cssRules[1].style 為 大括號內的CSS樣式聲明，屬性名和屬性值鍵值對。
element.sheet.cssRules[1].selectorText 為選擇器 .u-txt
element.sheet.cssRules[1].style.width 為屬性值，如果有 - 則為駝峰命名如 lineHeight
定義在元素上的樣式屬性 element.style 為 CSSStyleDeclaration 對象。
element.style.color 獲得 color 屬性值。
更新樣式
element.style：element.style.borderColor = "red";
缺點：更新一個屬性需要一條語句，且不是我們熟悉的 CSS 寫法。
element.style.cssText：element.style.cssText = 'borderColor:red;color:red;';熟悉的寫法，擴展性強
element.style 這種更新樣式方法的缺點：樣式混合在邏輯中，只能在 JS 中修改樣式。不推薦使用
更新 class （推薦）
首先在 CSS 內部樣式表中添加一個類。.invalid
element.className += ' invalid';
在元素的 class 屬性增加 invalid 類名，具有 .invalid 中 CSS 聲明的樣式。
換膚需求：一次更新很多樣式
更換樣式表：
把換膚時需要變化的樣式全部寫在單獨樣式表里。$('skin').href = 'skin.summer.css';
獲取樣式：window.getComputedStyle(element).color; 獲取到的是只讀屬性，不能修改。獲取到是實際屬性。
ie9 使用 element.currentStyle
5.事件
事件流 事件注冊 事件對象 事件分類 事件代理
DOM 事件：點擊一個 DOM 元素 ?鍵盤按下一個鍵 ? 輸入框輸入內容 ?頁面加載完成
事件流：DOM 事件處理執(zhí)行的過程
capture phase：事件捕獲過程
target phase：事件處理節(jié)點觸發(fā)過程
bubble phase：冒泡過程
圖片摘自 W3C 鏈接W3C
并不是所有事件都有這三個過程，IE 低版本無 capture phase（捕獲），有些事件無 bubble phase（冒泡過程）。事件無論注冊到事件流的過程中任意一個節(jié)點，都會觸發(fā)。
事件注冊：事件注冊 取消事件注冊 事件觸發(fā)
主體均為 DOM 元素
事件注冊：eventTarget.addEventListener(type,listener[,useCapture])
eventTarget DOM元素 ；type 時間類型； listener 事件處理函數(shù)； useCapture 是否是捕獲過程
默認情況下 DOM 處理的是冒泡過程，只有當你把最后一個參數(shù)設置成 true 時，才會處理捕獲過程
取消事件注冊：evenTarget.removeEventListener(type,listener[,useCapture])
事件觸發(fā)（用程序代碼觸發(fā)）：evenTarget.dispatchEvent(type)
瀏覽器兼容型（IE6、7、8）
提供了自身對于 DOM 事件注冊、取消以及觸發(fā)事件的實現(xiàn)。
事件注冊與取消：attachEvent / detachEvent
事件觸發(fā)：fireEvent(e)
事件對象：在觸發(fā)DOM上的某個事件時，會在事件處理程序函數(shù)中會產生一個事件對象event，這個對象中包含著所有與事件有關的信息。
每一種類型事件的事件對象包含信息不一樣。列出通用屬性及方法
屬性：type（事件類型） ?target（事件觸發(fā)的節(jié)點，低版本IE為 srcElement） ?currentTarget（當前處理事件的函數(shù)）
方法：stopPropagation ? ?preventDefalt ? ?stopImmidiatePropagation()
阻止事件傳播：
event.stopPropagation() （W3C）阻止冒泡，阻止事件傳到父節(jié)點?
event.cancelBubble = true(IE)
event.stopImmediatePropagation() （W3C） 阻止冒泡，阻止事件傳到父節(jié)點，阻止當前節(jié)點的后續(xù)事件。
默認行為：
event.preventDefalt() ? （W3C） 阻止默認行為，事件處理函數(shù)中調用
event.returnValue = false(IE)
事件類型——鼠標事件
MouseEvent 事件類型：click dbclick mousedown mousemove mouseout mouseover mouseup mouseenter mouseleave
MouseEvent 對象屬性：clientX clientY screenX screenY ctrlKey shiftKey altKey metaKey button(0,1,2)
clientX clientY screenX screenY：定義鼠標事件發(fā)生的時候，鼠標在頁面上的位置。獲取鼠標位置，處理位置信息的時候，必須要用的操作。
鼠標位置到頁面最左端為 clientX，到頁面頂端為 clientY；到屏幕最左端為 screenX，到屏幕頂端為 screenY。
ctrlKey shiftKey altKey metaKey：當事件被觸發(fā)時，如果鍵盤上 Crtl 鍵被按下，值為true。否則為 false。
button(0,1,2)：分別代表按下左鍵，中鍵，右鍵。
MouseEvent 順序
從元素 A 上方移過：
mousemove-> mouseover(A)-> mouseenter(A)-> mousemove(A)-> mouseout(A)-> mouseleave(A)
點擊元素：
mousedown-> (mousemove)-> mouseup-> click
WheelEvent 滾輪事件
屬性：deltaMode（指定的 delta 值的單位） deltaX deltaY deltaZ（滾輪在 XYZ 方向的偏移量）
事件類型——焦點，輸入，鍵盤事件
FocusEvent：
blur：當元素失去焦點時觸發(fā)
focus：當元素獲得焦點時觸發(fā)
focusin：元素即將獲得焦點時，獲得焦點之前
focusout：元素即將失去焦點時，失去焦點之前
屬性：relatedTarget
當一個元素失去焦點時（blur,focusout），另一個元素獲得焦點，獲得焦點的元素為 relatedTarget
當一個元素獲得焦點時（blur,focusout），另一個元素失去焦點，失去焦點的元素為 relatedTarget
InputEvent：主要用來處理輸入事件，在輸入框輸入內容時。
在輸入框中輸入內容時先觸發(fā) beforeinput 事件，輸入內容頁面還未看到，這時可以處理一些東西（改變行為）。當輸入框里的內容已經(jīng)為輸入內容，觸發(fā) input 事件。
IE 低版本：onpropertychange
KeyBoardEvent：處理鍵盤事件
屬性：key（代表按下了什么鍵，值為一個字符串） ? code（代表安建碼，為字符串）
ctrlKey shiftKey altKey metaKey：表示鍵是否按下，按下為 true
repeat：重復按鍵為 true
實際編程會遇到的屬性：keyCode charCode which 獲得鍵盤上按鍵的 ACSII 碼，用于判斷用戶按下的鍵。
事件類型——其他事件
Event 類型
load：元素加載完成觸發(fā)
unload：退出的時候，關閉頁面，頁面退出過程觸發(fā)
error：加載錯誤觸發(fā)
select：輸入框文本被選擇觸發(fā)
abort：退出，加載時按 Esc 觸發(fā)
window 對象的事件：
load：頁面上所有請求都完成的時候，所有要加載的東西都加載完成了，觸發(fā) load 事件。
unload：當文檔退出的時候，關閉當前頁面，觸發(fā) unload
error：頁面加載出現(xiàn)異常
abort：退出，加載時按 Esc 觸發(fā)
image 對象的事件：
load：圖片加載完成觸發(fā)，在 load 事件里面，可以得知這個圖片的長度和寬度。
error：圖片加載錯誤觸發(fā)，如 url 地址錯誤
abort：退出，圖片加載時按 Esc 觸發(fā)。
UIEvent
resize：修改窗體大小時觸發(fā)
scroll：頁面發(fā)生滾動時觸發(fā)，元素上觸發(fā)可以冒泡，系統(tǒng)滾動條沒有冒泡
事件代理：就是將事件注冊到元素的父節(jié)點上。
好處：當元素較多時，不用注冊那么多事件，需要管理的事件 Handler 更少，內存分配更少
不足：如果 Handler 很多，放在父元素上管理復雜。
