1 HTML DOM
1.1 表單相關(guān)元素
① form 元素
length form中表單控件的個(gè)數(shù)
element 返回一個(gè)對象拨匆，對象中是form里的表單控件
submit() 該方法可提交表單
reset() 該方法可重置表單
② 文本輸入框和文本域（input和textarea）
focus() 讓元素獲取焦點(diǎn)
blur() 讓元素失去焦點(diǎn)
select() 選中里面的文本內(nèi)容
③ select 元素
length 獲取或設(shè)置下拉選項(xiàng)的數(shù)量
options 獲取所有下拉選項(xiàng)的集合
value 獲取所選下拉選項(xiàng)的value
selectedIndex 獲取所選下拉選項(xiàng)的索引
add() 添加一個(gè)下拉選項(xiàng)籍救，參數(shù)是option元素對象
remove() 刪除指定的下拉選項(xiàng)，參數(shù)是索引
1.2 表格相關(guān)元素
① table 元素
rows 得到表格中所有行的集合
cells 得到表格中所有單元格的集合（th和td）
insertRow() 在表格中插入一行污茵，返回新插入的tr元素樱报，參數(shù)為新行的位置，不指定則在最后添加
deleteRow() 刪除表格中的一行泞当，參數(shù)指定行的索引
② tableRow 元素（tr元素）
rowIndex 獲取本行的索引
cells 獲取本行內(nèi)所有單元格的集合
insertCell() 在本行中插入一個(gè)單元格迹蛤，方法返回新插入的td元素，參數(shù)是新單元格的位置，不指定則在最后添加
deleteCell() 刪除本行中的一個(gè)單元格盗飒，參數(shù)指定單元格在本行的索引
③ tableCell 元素（th或td）
cellIndex 獲取本單元格在行內(nèi)的索引
1.3 快速創(chuàng)建元素
// 通用方法創(chuàng)建 option 元素
var option1 = document.createElement('option');
option1.innerHTML = '小樂';
option1.value = 'xiaole';
// 使用快捷方法創(chuàng)建 option 元素
var option2 = new Option('小樂','xiaole')
// 通用方法 創(chuàng)建 img 元素
var img1 = document.createElement('img');
img1.src = '100.jpg';
// 快捷方法創(chuàng)建 img 元素
var img2 = new Image();
img2.src = '100.jpg';
2 事件
2.1 事件監(jiān)聽
① 給元素監(jiān)聽事件的三種方式
-
把事件作為HTML標(biāo)簽的屬性
<button onclick="code..."></button>注：
- 這種方式?jīng)]有使用到回調(diào)函數(shù)嚷量，函數(shù)在onclick中直接調(diào)用；
- 由于HTML標(biāo)簽的屬性特點(diǎn)逆趣，如果行內(nèi)用多個(gè)
onclick屬性設(shè)置事件蝶溶，則只生效第一個(gè)，后面的事件均無效宣渗。
-
把事件作為元素對象的方法
元素對象.on事件名 = 回調(diào)函數(shù)function(){ code ...; }注：由于程序順序執(zhí)行抖所，如果給同一元素的同一事件設(shè)置多個(gè)回調(diào)函數(shù)，則后面的會覆蓋前面的痕囱。
-
把事件作為addEventListener方法的參數(shù)(適用于IE9+)
元素對象.addEventListener('事件名', 回調(diào)函數(shù)function(){ code ...; })注：
addEventListener方法可給同一元素的同一事件綁定多個(gè)回調(diào)函數(shù)田轧，觸發(fā)事件時(shí)多個(gè)回調(diào)函數(shù)按監(jiān)聽順序執(zhí)行。該方法的第三個(gè)參數(shù)可設(shè)置事件在捕獲階段或是冒泡階段觸發(fā)鞍恢。
-
兼容性方案：IE8及以下適用于：
attachEvent('on事件名', 回調(diào)函數(shù));//添加監(jiān)聽 detachEvent('事件名', 回調(diào)函數(shù));//解除監(jiān)聽
② 解除事件的監(jiān)聽
-
第一種方式和第二種方式監(jiān)聽的事件：
元素對象.on事件名 = null; -
第三種方式監(jiān)聽的事件：
元素對象.removeEventListener('事件名', 函數(shù)名);
2.2 事件流
一個(gè)完整的事件觸發(fā)流程會經(jīng)歷三個(gè)階段：
捕獲階段： window -> document -> html -> body ->... -> 目標(biāo)元素傻粘。（目標(biāo)元素： 具體的發(fā)生了事件動(dòng)作且不可再分的元素）
目標(biāo)階段： 找到了目標(biāo)與元素，標(biāo)記著捕獲階段的結(jié)束帮掉，冒泡階段的開始弦悉。
冒泡階段： 目標(biāo)元素 -> ... -> body -> html -> document -> window
事件的回調(diào)函數(shù)在哪個(gè)階段被執(zhí)行？
事件的回調(diào)函數(shù)在冒泡階段被執(zhí)行蟆炊，即事件默認(rèn)在冒泡階段被觸發(fā)稽莉。
如何設(shè)置事件在哪個(gè)階段觸發(fā)？
如果是第三種方式監(jiān)聽的事件盅称，addEventListener 第三個(gè)參數(shù)設(shè)置為 true 表示事件在捕獲階段觸發(fā)肩祥，false 表示在冒泡階段觸發(fā)，默認(rèn)值為 false缩膝。
如果是第一種和第二種方式監(jiān)聽的事件混狠，則在冒泡階段觸發(fā)且無法修改。
2.3 事件回調(diào)函數(shù)種 this 的指向
使用第二種疾层、第三種監(jiān)聽事件将饺，事件回調(diào)函數(shù)中
this的值是觸發(fā)事件的元素。-
使用第一種方式監(jiān)聽事件痛黎，屬性值里面可以直接使用
this予弧，值是該元素<button onclick="console.log(this)"> <!--此處的this即為button元素-->
2.4 常用事件
① 鼠標(biāo)事件
click 單擊
dblclick 雙擊
contextmenu 右鍵單擊
mouseover 鼠標(biāo)懸停在元素上，建議用 mouseenter 代替
mouseout 鼠標(biāo)離開元素湖饱，建議用 mouseleave 代替
mouseenter 鼠標(biāo)懸停在元素上
mouseleave 鼠標(biāo)離開元素
mousedown 鼠標(biāo)按鍵按下
mouseup 鼠標(biāo)按鍵抬起
mousemove 鼠標(biāo)移動(dòng)
mouseenter掖蛤、mouseleave 與 mouseover、mouseout 的區(qū)別：
- mouseenter 和 mouseleave 事件井厌，后代元素不會冒泡蚓庭，符合實(shí)際場景
- mouseover 和 mouseout 事件致讥，后代元素會冒泡，不符合實(shí)際場景器赞，鼠標(biāo)移入移出后代元素時(shí)也會觸發(fā)設(shè)置在元素上的事件垢袱。
② 鍵盤事件
鍵盤事件一般監(jiān)聽給document或文本框、文本域
keydown 鍵盤按鍵按下
keyup 鍵盤按鍵抬起
keypress 鍵盤按鍵按下（可輸入字符才能觸發(fā)港柜，控制按鍵如：上下左右请契、shift、alt夏醉、ctrl等不能觸發(fā)）
③ 文檔事件
當(dāng)獲取元素的事件過早爽锥，元素還未加載出來時(shí)是獲取不到的（如：把JS代碼寫到HTML代碼前面），可以用這兩個(gè)事件授舟。
load 文檔加載完畢救恨，監(jiān)聽到window或者body元素
DOMContentLoaded 文檔加載完畢
load 事件和 DOMContentLoaded 事件的區(qū)別：
- load 事件需等到頁面中所有的一切（包括外部文件）加載完畢才能觸發(fā)； DOMContentLoaded 事件只要頁面中的元素加載完畢（不包括外部文件）就可以觸發(fā)释树。
- DOMContentLoaded 只能使用 addEventListener 方法監(jiān)聽。
⑤ 表單事件
submit 表單提交的時(shí)候觸發(fā)擎淤，只能監(jiān)聽給form元素
reset 表單重置的時(shí)候觸發(fā)奢啥，只能監(jiān)聽給form元素
blur 失去焦點(diǎn)時(shí)觸發(fā)，監(jiān)聽給表單控件元素（input嘴拢、textarea 等）
focus 獲取焦點(diǎn)時(shí)觸發(fā)桩盲，監(jiān)聽給表單控件元素（input、textarea 等）
select 輸入框中文字被選中時(shí)觸發(fā)事件席吴，監(jiān)聽給輸入類表單控件
change 監(jiān)聽到輸入框的觸發(fā)條件：①輸入內(nèi)容改變 ②失去焦點(diǎn)赌结；監(jiān)聽到下拉框select上的觸發(fā)條件：下拉選項(xiàng)內(nèi)容改變
⑥ 圖片事件
load 圖片文件加載完畢時(shí)觸發(fā)
error 圖片文件加載失敗時(shí)觸發(fā)
abort 圖片加載中斷時(shí)觸發(fā)
注：圖片加載失敗后，如果給圖片換一個(gè)正確的src孝冒，加載成功后也會觸發(fā)一次load事件柬姚。
⑦ 其他事件
scroll 內(nèi)容滾動(dòng)時(shí)觸發(fā)，監(jiān)聽給window（整個(gè)頁面滾動(dòng)）或者內(nèi)容能夠滾動(dòng)的元素（內(nèi)容溢出且overflow不為visible）
resize 視口大小發(fā)生變化時(shí)觸發(fā)庄涡，只能監(jiān)聽給window
⑧ 動(dòng)畫和過渡事件
animationstart 動(dòng)畫開始時(shí)觸發(fā)
animationiteration 動(dòng)畫每執(zhí)行一次就觸發(fā)一次
animationend 動(dòng)畫結(jié)束時(shí)觸發(fā)
transitionstart 過渡開始量承，過渡開始時(shí)觸發(fā)（在過渡延遲之后觸發(fā)）
transitionrun 過渡運(yùn)行，過渡開始運(yùn)行時(shí)觸發(fā)（在過渡延遲之前就觸發(fā)）
transitionend 過渡結(jié)束時(shí)觸發(fā)（過渡時(shí)間）
3 Event 對象
在觸發(fā)DOM上某個(gè)事件時(shí)穴店，會產(chǎn)生一個(gè)事件對象event撕捍，當(dāng)中包含著所有與事件有關(guān)的信息，包括：導(dǎo)致事件的元素泣洞、事件的類型忧风、其他與特定事件相關(guān)的信息。比如：鼠標(biāo)事件的對象中有鼠標(biāo)的位置信息球凰，鍵盤事件的對象中有按下的鍵的信息狮腿。
3.1 Event對象的獲取
-
使用第一種方式監(jiān)聽的事件：用關(guān)鍵字
event该窗。（event其實(shí)是window的屬性，window.event蚤霞，.window可省略酗失，該屬性指向當(dāng)前觸發(fā)的對象）<button onclick = "console.log(event)"></button> //或 <button onclick = "fn()"></button> function fn(){ console.log(event); } -
使用第二、三種方式監(jiān)聽事件昧绣，回調(diào)函數(shù)自動(dòng)接收參數(shù)规肴，寫一個(gè)形參即可（不一定叫
event，叫什么都可以）夜畴。btn.onclick = function(event){//如果不寫此處的event拖刃，也會輸出event對象，因?yàn)閑vent是window的屬性贪绘，本作用域中沒有event則去上層查找直至window一定可以找到 console.log(event); } btn.addEventListener("click",function(event){ console.log(event); })
3.2 鼠標(biāo)事件對象 MouseEvent 的屬性和方法
offsetX / offsetY 獲取鼠標(biāo)在 目標(biāo)元素 上的位置（注：不一定是監(jiān)聽事件的元素）
pageX / pageY 獲取鼠標(biāo)在 頁面 上的位置
clientX / clientY 獲取鼠標(biāo)在 視口 上的位置
screenX / screenY 獲取鼠標(biāo)在 屏幕 上的位置
button 鼠標(biāo)按鍵的值： 0表示左鍵兑牡、1表示滾輪鍵、2表示右鍵
3.3 鍵盤事件對象 KeyboardEvent 的屬性和方法
keyCode 獲取鍵盤按鍵對應(yīng)的ASCII值
which 同上
key 獲取鍵盤按鍵對應(yīng)的值（字符串）
3.4 所有類型的事件對象都有的屬性和方法
type 返回事件名
timestamp 獲取時(shí)間戳（觸發(fā)事件時(shí)距離打開頁面時(shí)的毫秒數(shù)）
target 獲取目標(biāo)元素
stopPropagation() 阻止冒泡
preventDefault() 阻止瀏覽器默認(rèn)行為
3.5 阻止冒泡事件
防止該元素的祖先元素被冒泡
event.stopPrapagation();
3.6 阻止瀏覽器默認(rèn)行為
瀏覽器的默認(rèn)行為：
1. 單擊了超鏈接元素税灌，跳轉(zhuǎn)
2. 表單的提交按鈕和重置按鍵
3. 右鍵菜單
....
阻止瀏覽器默認(rèn)行為：
//適用于第二均函、三種事件監(jiān)聽方式
event.preventDefault();
//適用于第二種事件監(jiān)聽方式（在回調(diào)函數(shù)中return false）
return false；
4 事件委托
原理： 把事件監(jiān)聽到祖先元素上菱涤，在事件回調(diào)函數(shù)中判斷目標(biāo)元素是否是要觸發(fā)事件的元素苞也。
事件委托的優(yōu)勢： ① 讓新增的元素也具有事件。 ② 如果需要給大量的元素監(jiān)聽相同的事件粘秆，事件委托更節(jié)省資源如迟。
5 DOM 對象深入分析
不同的元素、事件具有相同的屬性攻走，是因?yàn)樗鼈冇邢嗤脑鸵罂保纾菏髽?biāo)事件和鍵盤事件都有Event.prototype。
5.1 元素對象的原型鏈關(guān)系
以div為例：
div元素 -> HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> EventTarget.prototype -> Object.prototype
5.2 事件對象的原型鏈關(guān)系
以鼠標(biāo)事件為例：
鼠標(biāo)事件對象 -> MouseEvent.prototype -> UIEvent.protptype -> Event.prototype -> Object.prototype
5.3 HTMLCollection 和 NodeList 的區(qū)別
① HTMLCollection對象
1. 獲取HTMLCollection類型的集合的方式：getElementsByTagName()昔搂、getElementsByClassName()玲销、元素.children、document.all
2. HTMLCollection中成員必須都是元素
3. HTMLCollection是動(dòng)態(tài)的集合巩趁，在獲取集合后痒玩，如果DOM結(jié)構(gòu)中新增滿足條件的元素，會自動(dòng)更新到集合中议慰。
4. HTMLCollection沒有forEach方法蠢古。
② Nodelist對象
1. 獲取Nodelist類型的集合的方式：getElementsByName()、querySelector()别凹、元素.ChildNodes
2. Nodelist中成員可以是任意類型的節(jié)點(diǎn)
3. Nodelist是靜態(tài)的集合草讶，獲取時(shí)有哪些節(jié)點(diǎn)就永遠(yuǎn)有哪些節(jié)點(diǎn)
4. Nodelist有forEach方法。
