版dom編程藝術(shù)筆記基礎(chǔ)

1、網(wǎng)易微專業(yè)之前端開發(fā)工程DOM 編程藝術(shù)基礎(chǔ)網(wǎng)易微專業(yè)之前端開發(fā)工程DOM 編程藝術(shù)基礎(chǔ)篇（一一、文檔DOMObject（文檔對(duì)象模型）”，它是由W3C記住，DOMDOMDOMDOMDOMDOMDOM-1可以通過(guò)DOM來(lái)操作頁(yè)面中各種圖左邊的HTML 文檔用DOM在 DOM 中，每一個(gè)元素看成一個(gè)節(jié)點(diǎn)，而每一個(gè)節(jié)點(diǎn)就是一個(gè)“對(duì)象在DOM 中，遍歷HTML圖左邊的HTML 文檔用DOM在 DOM 中，每一個(gè)元素看成一個(gè)節(jié)點(diǎn)，而每一個(gè)節(jié)點(diǎn)就是一個(gè)“對(duì)象在DOM 中，遍歷HTMLlastChild、previousSiblingnextSibling-21上圖中、div。2.文本節(jié)點(diǎn):向用戶展示的內(nèi)

2、容，如.中 3的屬性在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM1上圖中、div。2.文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如.中 3的屬性在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：nodeName : 節(jié)點(diǎn)的名稱nodeValue ：節(jié)點(diǎn)的值nodeType ：節(jié)點(diǎn)的類型一、nodeName 屬性: -31. 元素節(jié)點(diǎn)的 nodeName 與2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱文本節(jié)點(diǎn)的 文檔節(jié)點(diǎn)的 是 是 #二、nodeValue 屬性：元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 文本節(jié)點(diǎn)的 nodeValue

3、是文本自身1. 元素節(jié)點(diǎn)的 nodeName 與2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱文本節(jié)點(diǎn)的 文檔節(jié)點(diǎn)的 是 是 #二、nodeValue 屬性：元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 文本節(jié)點(diǎn)的 nodeValue 是文本自身屬性節(jié)點(diǎn)的 nodeValue 是屬性的值三、nodeType 屬性: 12389元素遍Javascript children 其中，nodeObject 為節(jié)點(diǎn)對(duì)象（元素節(jié)點(diǎn)），返回值為所有子節(jié)點(diǎn)的集合（數(shù)組）id=demo 注意：在IE 中，children 是希望獲取元素節(jié)點(diǎn)以通過(guò) nodeType 屬性來(lái)進(jìn)行篩選nodeType

4、=1-4如何實(shí)現(xiàn)瀏覽器兼容版的二、節(jié)點(diǎn)操獲取節(jié)-5如何二、節(jié)點(diǎn)操獲取節(jié)-5如何實(shí)現(xiàn)瀏覽器兼容版的 var = element.childNodes;for (var i=0;i ist.length;i+)if isti.nodeType=1)return return 示例span 示例span -6-7-7ameIE6創(chuàng)建節(jié)ameIE6創(chuàng)建節(jié)-8-9-9創(chuàng)建文本節(jié)點(diǎn) createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的 Text 節(jié)點(diǎn)。createElement&innerHTML創(chuàng)建文本節(jié)點(diǎn) createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的 Text

5、節(jié)點(diǎn)。createElement&innerHTML以下代碼是createElement & innerHTML -10-11-12-12應(yīng)用-ement-修改節(jié)應(yīng)用-ement-修改節(jié)-13textContent 是 W3C 定義的標(biāo)準(zhǔn)，而 innerText FF innerTexttextContent 是 W3C 定義的標(biāo)準(zhǔn)，而 innerText FF innerText 解決方innerHTMLVS在JavaScriptinnerHTML 和innerText2innerHTMLinnerTextIE、chrome而不被Firefox-14束標(biāo)記。設(shè)置該屬性可以用于為指定的HTML

6、 刪除節(jié)-15刪除節(jié)-15容。即使指定的是HTML應(yīng)用replaceChild=：remove三、屬HTMLattribute DOM應(yīng)用replaceChild=：remove三、屬HTMLattribute DOMpropertyproperty屬性讀sor:屬器屬性寫-16屬性類屬的屬性，是轉(zhuǎn)換過(guò)的實(shí)用對(duì)象器特點(diǎn)通用性 屬性類屬的屬性，是轉(zhuǎn)換過(guò)的實(shí)用對(duì)象器特點(diǎn)通用性 -讀擴(kuò)展性 tribute 進(jìn)行屬性操-17寫類-寫類-18僅字符串 tribute 進(jìn)行屬性僅字符串 tribute 進(jìn)行屬性操作特-19HTML5可以前綴設(shè)需要的自定義屬性放。DOM 對(duì)象中有個(gè) dataset 屬性對(duì)象

7、，可以在該對(duì)象中存一些與該 DOM 如上寫法是在生成 dom對(duì)象時(shí)對(duì) dataset的一個(gè)初始化的動(dòng)作，dataset中會(huì)存在一個(gè) 屬性、/mobile 屬性。這里需要注意 data綴，在生成 DOM對(duì)象時(shí)所有已 data-開頭的屬性會(huì)將其去掉前綴 data-后存在 dataset需要注意的是 dataset 案例。HTML lidata-id=123456data-account-lidata-id=123457data-account-HTML5可以前綴設(shè)需要的自定義屬性放。DOM 對(duì)象中有個(gè) dataset 屬性對(duì)象，可以在該對(duì)象中存一些與該 DOM 如上寫法是在生成 dom對(duì)象時(shí)對(duì) d

8、ataset的一個(gè)初始化的動(dòng)作，dataset中會(huì)存在一個(gè) 屬性、/mobile 屬性。這里需要注意 data綴，在生成 DOM對(duì)象時(shí)所有已 data-開頭的屬性會(huì)將其去掉前綴 data-后存在 dataset需要注意的是 dataset 案例。HTML lidata-id=123456data-account-lidata-id=123457data-account-divid=cardcaption：td郵箱：td：tdCSS -20JSfunctionreturn var lis = for(vari=0,li;li=lisi;li.onmouseenter=event=event|va

9、r user = event.|event.srcElement; var data = user.dataset;$(accountName).innerText=$(name).innerText=).innerText=;$(mobile).innerText=$(card).style.display=li.onmouseleave=$(card).style.display=ie 上兼容類似的功能。參JSfunctionreturn var lis = for(vari=0,li;li=lisi;li.onmouseenter=event=event|var user = event

10、.|event.srcElement; var data = user.dataset;$(accountName).innerText=$(name).innerText=).innerText=;$(mobile).innerText=$(card).style.display=li.onmouseleave=$(card).style.display=ie 上兼容類似的功能。參四、樣式操-21（待補(bǔ)充licursor:default;line-height:th,td,captionpadding:10px;border:1pxsolid#ddd;font-size:thcolor:ca

11、ptionfont-size:20px;font-weight:bold;border-bottom:absolute;top:10px;left:內(nèi)嵌樣式表更新樣內(nèi)嵌樣式表更新樣-22不Script scriptUtil.addEventListener($(create0),不Script mouseover(A)-mouseenter(A)-mousemove(A)-MouseEvent 順序 -mousemove-mouseover(A)-mouseenter(A)-mousemove(A)-mouseout(A)- 點(diǎn)擊元-mousedown-mousemove-mouseup-例子-HTML CSSstyleJS -31border:1pxsoliddivWheelEvent-滾輪事WheelEvent 對(duì)象屬WheelEvent-滾輪事WheelEvent 對(duì)象屬FocusEvent-焦點(diǎn)事-32FocusEvent InputEvent- 輸入