1 HTML DOM
1.1 表單相關(guān)元素
① form 元素
length form中表單控件的個(gè)數(shù)
element 返回一個(gè)對(duì)象，對(duì)象中是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元素對(duì)象
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è)，后面的事件均無效。
-
把事件作為元素對(duì)象的方法
元素對(duì)象.on事件名 = 回調(diào)函數(shù)function(){ code ...; }注：由于程序順序執(zhí)行，如果給同一元素的同一事件設(shè)置多個(gè)回調(diào)函數(shù)，則后面的會(huì)覆蓋前面的。
-
把事件作為addEventListener方法的參數(shù)(適用于IE9+)
元素對(duì)象.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)聽的事件：
元素對(duì)象.on事件名 = null; -
第三種方式監(jiān)聽的事件：
元素對(duì)象.removeEventListener('事件名', 函數(shù)名);
2.2 事件流
一個(gè)完整的事件觸發(fā)流程會(huì)經(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 事件，后代元素不會(huì)冒泡，符合實(shí)際場(chǎng)景
- mouseover 和 mouseout 事件，后代元素會(huì)冒泡，不符合實(shí)際場(chǎng)景，鼠標(biāo)移入移出后代元素時(shí)也會(huì)觸發(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，加載成功后也會(huì)觸發(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 對(duì)象
在觸發(fā)DOM上某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，當(dāng)中包含著所有與事件有關(guān)的信息，包括：導(dǎo)致事件的元素、事件的類型、其他與特定事件相關(guān)的信息。比如：鼠標(biāo)事件的對(duì)象中有鼠標(biāo)的位置信息，鍵盤事件的對(duì)象中有按下的鍵的信息。
3.1 Event對(duì)象的獲取
-
使用第一種方式監(jiān)聽的事件：用關(guān)鍵字
event。（event其實(shí)是window的屬性，window.event，.window可省略，該屬性指向當(dāng)前觸發(fā)的對(duì)象）<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，也會(huì)輸出event對(duì)象，因?yàn)閑vent是window的屬性，本作用域中沒有event則去上層查找直至window一定可以找到 console.log(event); } btn.addEventListener("click",function(event){ console.log(event); })
3.2 鼠標(biāo)事件對(duì)象 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 鍵盤事件對(duì)象 KeyboardEvent 的屬性和方法
keyCode 獲取鍵盤按鍵對(duì)應(yīng)的ASCII值
which 同上
key 獲取鍵盤按鍵對(duì)應(yīng)的值（字符串）
3.4 所有類型的事件對(duì)象都有的屬性和方法
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)勢(shì)： ① 讓新增的元素也具有事件。 ② 如果需要給大量的元素監(jiān)聽相同的事件，事件委托更節(jié)省資源。
5 DOM 對(duì)象深入分析
不同的元素、事件具有相同的屬性，是因?yàn)樗鼈冇邢嗤脑?，如：鼠?biāo)事件和鍵盤事件都有Event.prototype。
5.1 元素對(duì)象的原型鏈關(guān)系
以div為例：
div元素 -> HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> EventTarget.prototype -> Object.prototype
5.2 事件對(duì)象的原型鏈關(guān)系
以鼠標(biāo)事件為例：
鼠標(biāo)事件對(duì)象 -> MouseEvent.prototype -> UIEvent.protptype -> Event.prototype -> Object.prototype
5.3 HTMLCollection 和 NodeList 的區(qū)別
① HTMLCollection對(duì)象
1. 獲取HTMLCollection類型的集合的方式：getElementsByTagName()、getElementsByClassName()、元素.children、document.all
2. HTMLCollection中成員必須都是元素
3. HTMLCollection是動(dòng)態(tài)的集合，在獲取集合后，如果DOM結(jié)構(gòu)中新增滿足條件的元素，會(huì)自動(dòng)更新到集合中。
4. HTMLCollection沒有forEach方法。
② Nodelist對(duì)象
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方法。
