一.節(jié)點(diǎn)操作
1.父節(jié)點(diǎn):
- node.parentNode? ? ? ? 得到的是離元素最近的父級節(jié)點(diǎn)
2.子節(jié)點(diǎn):
- parentNode.childNodes? ? ? ? 所有的子節(jié)點(diǎn) 包含元素節(jié)點(diǎn) 文本節(jié)點(diǎn)等等
- parentNode.children????????(非標(biāo)準(zhǔn)) 獲取所有的子元素節(jié)點(diǎn),實(shí)際開發(fā)常用
- parentNode.firstChild? ? ? ? 獲取第一個(gè)子節(jié)點(diǎn) 不管是文本節(jié)點(diǎn)還是元素節(jié)點(diǎn)
- parentNode.lastChild? ? ? ? 獲取最后一個(gè)子節(jié)點(diǎn)?不管是文本節(jié)點(diǎn)還是元素節(jié)點(diǎn)
- parentNode.firstElementChild 返回第一個(gè)子元素節(jié)點(diǎn)(兼容性問題,IE9以上才支持)
- parentNode.lastElementChild 返回最后一個(gè)子元素節(jié)點(diǎn)(兼容性問題,IE9以上才支持)
實(shí)際開發(fā): 既沒有兼容性問題又返回第一個(gè)子元素
- 如果想要第一個(gè)子元素節(jié)點(diǎn),可以使用 parentNode.chilren[0]
3.兄弟節(jié)點(diǎn):
- node.nextSibling 下一個(gè)兄弟節(jié)點(diǎn) 包含元素節(jié)點(diǎn)或者文本節(jié)點(diǎn)等等
- node.previousSibling 上一個(gè)
- node.nextElementSibling 得到下一個(gè)兄弟元素節(jié)點(diǎn)
- node.previousElementSibling 上一個(gè)
4.創(chuàng)建節(jié)點(diǎn)
- document.createElement('tagName')? ? ? ? 動態(tài)創(chuàng)建元素節(jié)點(diǎn)
5.添加節(jié)點(diǎn)
- node.appendChild(child)? ? ? ? node父級? ? ? ? child子級? ? ? ? 后面追加元素
- node.insertBefore(child , 指定元素)????????
6.刪除節(jié)點(diǎn)
- node.removeChild(child)
7.復(fù)制節(jié)點(diǎn)(克隆節(jié)點(diǎn))
- node.cloneNode()
- 如果括號參數(shù)為空或者里面是false 淺拷貝 只復(fù)制標(biāo)簽不復(fù)制內(nèi)容
- 括號內(nèi)為true 深拷貝 復(fù)制標(biāo)簽包括里面的內(nèi)容
8.三種創(chuàng)建元素方式的區(qū)別
- document.write()
- innerHTML
- document.createElement()
區(qū)別:
- document.write() 如果頁面文檔流加載完畢,再調(diào)用這句話會導(dǎo)致頁面重繪
- innerHTML是將內(nèi)容寫入某個(gè)DOM節(jié)點(diǎn),不會導(dǎo)致頁面全部重繪
- innerHTML創(chuàng)建多個(gè)元素效率更高(不要拼接字符串,采取數(shù)組形式拼接),結(jié)構(gòu)稍微復(fù)雜
- createElement()創(chuàng)建多個(gè)元素效率稍低一點(diǎn)點(diǎn),但是結(jié)構(gòu)更清晰
二.事件高級
1.注冊事件(綁定事件)
傳統(tǒng)注冊事件:
- 利用on開頭的事件onclick
- 特點(diǎn):注冊事件的唯一性
- 同一個(gè)元素同一個(gè)事件只能設(shè)置一個(gè)處理函數(shù),最后注冊的處理函數(shù)會覆蓋前面注冊的處理函數(shù)
方法監(jiān)聽注冊事件:
- w3c標(biāo)準(zhǔn) 推薦方法
- addEventListener()它是一個(gè)方法
- IE9之前的IE不支持此方法,可使用attachEvent()代替
- 特點(diǎn):同一個(gè)元素同一個(gè)事件可以注冊多個(gè)監(jiān)聽器,按注冊順序依次執(zhí)行
addEventListener()事件監(jiān)聽方式:
eventTarget.addEventListener(type , listener[ , useCapture]);
三個(gè)參數(shù):
- type:事件類型字符串,比如click , mouseover ,注意這里不要加on,并且一定是字符串
- listener:事件處理函數(shù),事件發(fā)生時(shí)會調(diào)用該監(jiān)聽函數(shù)
- useCapture:可選參數(shù),是一個(gè)布爾值,默認(rèn)是false
attachEvent事件監(jiān)聽方式:只有ie9以前的版本支持
eventTarget.attachEvent(eventNameWithOn , callback);
兩個(gè)參數(shù):
eventNameWithOn:事件類型字符串,比如onclick , onmouseover 這里要帶on
callback:事件處理函數(shù),當(dāng)目標(biāo)觸發(fā)事件時(shí)回調(diào)函數(shù)被調(diào)用
2.刪除事件(解綁事件)
傳統(tǒng)方式刪除事件:????????
- eventTarget.onclick = null
方法監(jiān)聽刪除事件:
- eventTarget.removeEventListener(type , listener[ , useCapture]);
- eventTarget.detachEvent(eventNameWithOn , callback);
三.DOM事件流
事件發(fā)生時(shí)會在元素節(jié)點(diǎn)之間按照特定的順序傳播,這個(gè)傳播過程就叫做DOM事件流
DOM事件流分為三個(gè)階段:
- 捕獲階段
- 當(dāng)前目標(biāo)階段
- 冒泡階段
注意:
四.事件對象
- event就是一個(gè)事件對象,寫在我們偵聽函數(shù)的小括號里面,當(dāng)作形參來看
- 事件對象只有有了事件才會存在,它是系統(tǒng)給我們自動創(chuàng)建的 不需要我們傳遞參數(shù)
- 事件對象是我們事件的一系列相關(guān)數(shù)據(jù)的集合,跟事件相關(guān)的,比如鼠標(biāo)點(diǎn)擊里面就包含了鼠標(biāo)的相關(guān)信息,鼠標(biāo)坐標(biāo)啊,如果是鍵盤事件里面就包含的鍵盤事件的信息,比如判斷用戶按下了那個(gè)鍵
- 這個(gè)事件對象我們可以自己命名,比如event? evt? e
- 事件對象也有兼容性問題? ? ? ? ie678通過window.event
常見事件對象的屬性和方法:
?return false也能阻止默認(rèn)行為,沒有兼容性問題? ? ? ?
特點(diǎn):return后面的代碼就不執(zhí)行了? ? ? ? 而且只限于傳統(tǒng)的注冊方式
五.事件委托(代理 委派)
給父節(jié)點(diǎn)添加偵聽器 , 利用事件冒泡影響每一個(gè)子節(jié)點(diǎn)
常見的鼠標(biāo)事件:
禁止鼠標(biāo)右鍵菜單:????????contextmenu????????主要用于程序員取消默認(rèn)的上下文菜單
禁止鼠標(biāo)選擇:????????selectstart??????????
鼠標(biāo)事件對象:
MouseEvent
常見的鍵盤事件:
?注意:
keyCode屬性可以判斷用戶按下哪個(gè)鍵
keyup和keydown事件不區(qū)分字母大小寫 a和A得到都是65文章來源：http://www.zghlxwxcb.cn/news/detail-643736.html
keypress事件區(qū)分字符大小寫 a 97? A 65文章來源地址http://www.zghlxwxcb.cn/news/detail-643736.html
到了這里，關(guān)于DOM的節(jié)點(diǎn)操作+事件高級+DOM事件流+事件對象的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
