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); 從文檔中根據 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é)點相關的數據以后使用鹏浅。
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 事件處理函數吊趾； useCapture 是否是捕獲過程
默認情況下 DOM 處理的是冒泡過程宛裕，只有當你把最后一個參數設置成 true 時瑟啃，才會處理捕獲過程
取消事件注冊：evenTarget.removeEventListener(type,listener[,useCapture])
事件觸發(fā)（用程序代碼觸發(fā)）：evenTarget.dispatchEvent(type)
瀏覽器兼容型（IE6论泛、7、8）
提供了自身對于 DOM 事件注冊蛹屿、取消以及觸發(fā)事件的實現屁奏。
事件注冊與取消：attachEvent / detachEvent
事件觸發(fā)：fireEvent(e)
事件對象：在觸發(fā)DOM上的某個事件時，會在事件處理程序函數中會產生一個事件對象event错负，這個對象中包含著所有與事件有關的信息坟瓢。
每一種類型事件的事件對象包含信息不一樣。列出通用屬性及方法
屬性：type（事件類型） ?target（事件觸發(fā)的節(jié)點犹撒，低版本IE為 srcElement） ?currentTarget（當前處理事件的函數）
方法：stopPropagation ? ?preventDefalt ? ?stopImmidiatePropagation()
阻止事件傳播：
event.stopPropagation() （W3C）阻止冒泡折联，阻止事件傳到父節(jié)點?
event.cancelBubble = true(IE)
event.stopImmediatePropagation() （W3C） 阻止冒泡，阻止事件傳到父節(jié)點识颊，阻止當前節(jié)點的后續(xù)事件诚镰。
默認行為：
event.preventDefalt() ? （W3C） 阻止默認行為奕坟，事件處理函數中調用
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 事件蛹磺，輸入內容頁面還未看到，這時可以處理一些東西（改變行為）同仆。當輸入框里的內容已經為輸入內容萤捆，觸發(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：頁面加載出現異常
abort：退出挽封，加載時按 Esc 觸發(fā)
image 對象的事件：
load：圖片加載完成觸發(fā)已球，在 load 事件里面，可以得知這個圖片的長度和寬度辅愿。
error：圖片加載錯誤觸發(fā)智亮，如 url 地址錯誤
abort：退出，圖片加載時按 Esc 觸發(fā)点待。
UIEvent
resize：修改窗體大小時觸發(fā)
scroll：頁面發(fā)生滾動時觸發(fā)阔蛉，元素上觸發(fā)可以冒泡，系統滾動條沒有冒泡
事件代理：就是將事件注冊到元素的父節(jié)點上癞埠。
好處：當元素較多時状原，不用注冊那么多事件，需要管理的事件 Handler 更少苗踪，內存分配更少
不足：如果 Handler 很多颠区，放在父元素上管理復雜。
