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

1、前端開(kāi)發(fā)工程師學(xué)習(xí)筆記開(kāi)始時(shí)間：2016.01.28DOM 編程藝術(shù)基礎(chǔ)篇（一）一、文檔樹(shù)DOM 對(duì)象DOM，全稱(chēng)“Object M（文檔對(duì)象模型）”，它是由 W3C 組織定義的一個(gè)標(biāo)準(zhǔn)。端開(kāi)發(fā)時(shí)，往往需要在頁(yè)面某個(gè)地方添加一個(gè)元素或者刪除元素，這種添加元素、刪除元素的操作就是通過(guò) DOM 來(lái)實(shí)現(xiàn)的。說(shuō)白了，DOM 就是一個(gè)接口（API），可以通過(guò)DOM 來(lái)操作頁(yè)面中各種元素，例如添加元素、刪除元素、替換元素等。記住，DOM 就是文檔對(duì)象模型，文檔對(duì)象模型就是DOM.DOM 包含內(nèi)容：DOM CoreDOM HTMLDOM StyleDOM EventDOM 結(jié)構(gòu)DOM 采用樹(shù)形結(jié)構(gòu)作為分層結(jié)

2、構(gòu)，以樹(shù)節(jié)點(diǎn)形式表示頁(yè)面中各種元素或內(nèi)容。下圖左邊的HTML 文檔用DOM 樹(shù)形結(jié)構(gòu)表示如下：節(jié)點(diǎn)遍歷：在DOM 中，遍歷HTML 文檔樹(shù)，可以通過(guò)使用parentNode、Child、lastChild、previousSibling 和 nextSibling 等屬性來(lái)實(shí)現(xiàn)。關(guān)操作。們?cè)诓僮髟貢r(shí)，把每一個(gè)元素節(jié)點(diǎn)看成一個(gè)對(duì)象，然后使用這個(gè)對(duì)象的屬性和方法進(jìn)行相在 DOM 中，每一個(gè)元素看成一個(gè)節(jié)點(diǎn)，而每一個(gè)節(jié)點(diǎn)就是一個(gè)“對(duì)象”。也就是我其實(shí)除了上表列舉的屬性之外，還有 nodeName、nodeValue 和nodeType 等幾個(gè)比較重要的屬性。節(jié)點(diǎn)類(lèi)型：1. 元素節(jié)點(diǎn)：上圖中、等都是

3、元素節(jié)點(diǎn)，即。2. 文本節(jié)點(diǎn):向用戶(hù)展示的內(nèi)容，如.中的o/mooc 等文本。3. 屬性節(jié)點(diǎn):元素屬性，如(COMMENT_NODE/的屬性href=。_TYPE_NODE 節(jié)點(diǎn)不經(jīng)常使用。)節(jié)點(diǎn)屬性在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：nodeName : 節(jié)點(diǎn)的名稱(chēng)nodeValue ：節(jié)點(diǎn)的值nodeType ：節(jié)點(diǎn)的類(lèi)型一、nodeName 屬性: 節(jié)點(diǎn)的名稱(chēng)，是只讀的。1. 元素節(jié)點(diǎn)的 nodeName 與名相同2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱(chēng)文本節(jié)點(diǎn)的 nodeName文檔節(jié)點(diǎn)的 nodeName是 #text是 #二

4、、nodeValue 屬性：節(jié)點(diǎn)的值元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null文本節(jié)點(diǎn)的 nodeValue 是文本自身屬性節(jié)點(diǎn)的 nodeValue 是屬性的值三、nodeType 屬性: 節(jié)點(diǎn)的類(lèi)型，是只讀的。以下常用的幾種結(jié)點(diǎn)類(lèi)型:元素類(lèi)型元素 屬性 文本 注釋 文檔節(jié)點(diǎn)類(lèi)型12389元素遍歷如何實(shí)現(xiàn)瀏覽器兼容版的 element.children在Javascript 中，可以通過(guò) children 來(lái)獲取所有子節(jié)點(diǎn)。語(yǔ)法：nodeObject.children其中，nodeObject 為節(jié)點(diǎn)對(duì)象（元素節(jié)點(diǎn)），返回值為所有子節(jié)點(diǎn)的集合（數(shù)組）。例如，獲取 i

5、d=demo 的節(jié)點(diǎn)的所有子節(jié)點(diǎn)：.ge ementById(demo).children;children 只返回 HTML 節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)，雖然不是標(biāo)準(zhǔn)的 DOM 屬性，但是得到了幾乎所有瀏覽器的支持。注意：在 IE 中，children 包含注釋節(jié)點(diǎn)。一般情況下是希望獲取元素節(jié)點(diǎn)，可以通過(guò)nodeType 屬性來(lái)進(jìn)行篩選，nodeType=1的節(jié)點(diǎn)為元素節(jié)點(diǎn)。如何實(shí)現(xiàn)瀏覽器兼容版的 element.childrenfunction ge ementChild(element)if(!element.children) var elementArr=;var nfor (var

6、if (nist = element.childNodes;= 0; i nist.length; i+) isti.nodeType = 1) elementArr.push(nisti);return elementArr;elsereturn element.children;二、節(jié)點(diǎn)操作獲取節(jié)點(diǎn)gege gegeementByIdementsByClaameementsByTagNamequerySelectorementById示例：geementsByClaame示例：獲取span 元素geementsByTagName示例：獲取spanquerySelector示例：獲取span

7、ge ementsByClaame -兼容IE6 方案：創(chuàng)建節(jié)點(diǎn)createElementinnerHTMLcreateElement批注 A1: if(+listi.cla ame+).indexOf(+clazz+)!=- 1)語(yǔ)句中，為什么要在clazz 前后加上innerHTML創(chuàng)建文本節(jié)點(diǎn)createTextNodecreateTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的 Text 節(jié)點(diǎn)。語(yǔ)法：.createTextNode(data)createElement & innerHTML 應(yīng)用：節(jié)點(diǎn)個(gè)數(shù)事件處理結(jié)合使用以下代碼是createElement & innerHT

8、ML 兩者結(jié)合使用的例子：節(jié)點(diǎn)appendChild insertBefore insertAdjacen ementinsertAdjacentHTMLappendChildinsertBeforeinsertAdjacenementinsertAdjacentHTML應(yīng)用-insertAdjacen ement-兼容性方法：修改節(jié)點(diǎn)innerHTMLtextContent(innerText)innerHTML萬(wàn)能的innerHTMLtextContent(innerText):textContent 是 W3C 定義的標(biāo)準(zhǔn)，而innerText 不是一個(gè)標(biāo)準(zhǔn)，但是一個(gè)流行使用的屬性。FF

9、 兼容 innerText 解決方法：innerHTML VS textContent(innerText)在JavaScript 中可以使用innerHTML 和innerText 這 2 個(gè)屬性很方便地獲取和設(shè)置某一個(gè)元素子元素或文本。innerHTML 屬性被多數(shù)瀏覽器所支持，而 innerText 只能被IE、chrome 等支持而不被Firefox 支持。innerHTML 屬性了元素含有的HTML 文本，不包括元素本身的開(kāi)始標(biāo)記和結(jié)束標(biāo)記。設(shè)置該屬性可以用于為指定的 HTML 文本替換元素的內(nèi)容。innerText 屬性與inerHTML 屬性的功能類(lèi)似，只是該屬性只能元素包含的文

10、本內(nèi)容。即使指定的是HTML 文本，它也會(huì)認(rèn)為是普通文本而原樣輸出。刪除節(jié)點(diǎn)removeChild replaceChildinnerHTMLremoveChildreplaceChild應(yīng)用：replaceChild = removeChild&appendChild：remove eventelm.innerHTML=三、屬性操作HTML attribute DOM propertyproperty acsorge tribute/se tr butedatasetproperty ac屬性讀操作sor:屬性器屬性寫(xiě)操作屬性類(lèi)型：通過(guò)屬性符的屬性，是轉(zhuǎn)換過(guò)的實(shí)用對(duì)象。屬性器特點(diǎn)：ge讀通用

11、性 -名字異常擴(kuò)展性 實(shí)用對(duì)象tribute/setribute 進(jìn)行屬性操作寫(xiě)類(lèi)型getribute/setribute 進(jìn)行屬性操作特點(diǎn)僅字符串 通用性datasetHTMLElement.dataset data-*屬性集元素上保存數(shù)據(jù)在HTML5 中可以使用 data-前綴設(shè)置需要的自定義屬性，來(lái)進(jìn)行一些數(shù)據(jù)的存放。DOM 對(duì)象中有個(gè)dataset 屬性對(duì)象，可以在該對(duì)象中存一些與該 DOM 對(duì)象相關(guān)的數(shù)據(jù)。如上寫(xiě)法是在生成 dom 對(duì)象時(shí)對(duì) dataset 的一個(gè)初始化的動(dòng)作，dataset 中會(huì)存在一個(gè) id屬性、accountName/name/mobile 屬性。這里需要注意

12、data-僅僅是一個(gè)約定好的前綴，在生成DOM 對(duì)象時(shí)所有已data-開(kāi)頭的屬性會(huì)將其去掉前綴 data-后存在 dataset 中。需要注意的是 dataset 中的屬性值只能是字符串，非字符串會(huì)轉(zhuǎn)換為字符串后，所以要存對(duì)象類(lèi)型是務(wù)必案例：。當(dāng)鼠標(biāo)移入時(shí)，顯示出卡片信息，如下圖：實(shí)現(xiàn)代碼：HTML 部分：wwqcjf：郵箱：CSS 部分：licursor: default;line-height: 1.8;taborder-collapse: collapse;th, td, captionpadding: 10px;border: 1px solid #ddd;font-size: 14p

13、x;thcolor: #999;captionfont-size: 20px;font-weight: bold;border-bottom: none;#cardition: absolute;top: 10px;left: 150px;JS 部分：function $(id)return.geementById(id);var lis =.geementsByTagName(li);for(var i = 0, li;li = lisi; i+)li.onmouseenter = function(event)event = event | window.event;var user =

14、event.| event.srcElement;var data = user.dataset;$(accountName).innerText = data.accountName;$(name).innerText = ;$().innerText = data.;$(mobile).innerText = data.mobile;$(card).style.display = block;li.onmouseleave = function(event)$(card).style.display = none;如何實(shí)現(xiàn)瀏覽器兼容版的 element.datasetel

15、ement.dataset 能夠獲取元素的自定義屬性，但是低版本的 ie 不支持（ie11 支持，ie10 及以下不支持），如何在低版本的 ie 上兼容類(lèi)似的功能。（待補(bǔ)充）參考：htt/gb/share/5588.htm四、樣式操作CSSDOM批注 A2: 看不懂，需深入理解樣式表內(nèi)嵌樣式表：更新樣式element.style更新一個(gè)屬性需要一條語(yǔ)句不是熟悉的CSSelement.style.cssText上面兩張方式的缺點(diǎn)：樣式混在邏輯中更新class上述方法特點(diǎn)：一次更新很多元素的樣式更換樣式表案例：網(wǎng)頁(yè)換膚Script 部分代碼：Util.addEventListener($(crea

16、te0), click, createStyleSheet0);Util.addEventListener($(create1), click, createStyleSheet1);function createStyleSheet0()var link =.createElement(link);link.rel = stylesheet;link.href = skin.summer.css;.ge ementsByTagName(head)0.appendChild(link);function createStyleSheet1()var style =.createElement(

17、style);style.innerText = bodybackground-color: #fefaf7;.m-tw .u-imgborder-color: #a84c5b;.m-tw pcolor: #6d3e48;.m-tw h3background-color: #a84c5b;.m-tw h3 a, .m-tw h3 a:hovercolor: # ;.ge ementsByTagName(head)0.appendChild(style);獲取樣式element.styleputedStyle()-獲取元素實(shí)際樣式putedStyle(elementvar style =);CS

18、S DOM overview如何實(shí)現(xiàn)瀏覽器兼容版的putedStyleputedStyle 能夠獲取元素的實(shí)際樣式，但是低版本的ie8 及以下不支持，如何在低版本的ie 上兼容類(lèi)似的功能。代碼實(shí)現(xiàn)：function getStyle(elm)if(putedStyle)putedStyle(elm);returnelsereturn elm.currentStyle; / ie8 及以下不支持putedStyle 時(shí)，shiyongcurrentStyle。五、事件DOM 事件？Javascript 與 HTML 之間的交互是通過(guò)事件來(lái)實(shí)現(xiàn)的。事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬

19、間。比如：點(diǎn)擊一個(gè) DOM 元素鍵盤(pán)按下一個(gè)鍵輸入框輸入內(nèi)容頁(yè)面加載完成事件流事件流描述的是從頁(yè)面中接收事件的順序。IE 的事件流是事件冒泡流（event bubbling），即事件開(kāi)始時(shí)由最具體的元素（文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn)）接收，然后逐級(jí)向上到較為不具體的節(jié)點(diǎn)（文檔）。Netsc的事件流是事件捕獲流(event capturing)。事件捕獲的是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。DOM2 級(jí)事件規(guī)定的事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。事件與觸發(fā)事件取消事件事件觸發(fā)瀏覽器兼容型（IE6/7/8）事件與取消：attachEve

20、nt() / detachEvent()這兩個(gè)方法接受相同的 2 個(gè)參數(shù)：事件處理程序名稱(chēng)、事件處理程序函數(shù)事件觸發(fā)：fireEvent(e)no capture: IE8 及更早版本只支持事件冒泡，不支持事件捕獲。瀏覽器兼容型事件對(duì)象在觸發(fā) DOM 上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象中包含著所有與事件有關(guān)的信息。事件對(duì)象屬性：type(srcElement)current事件對(duì)象方法：stopPropagation preventDefaultstopImmediatePropagation()事件 event.stopPropagation() (W3C) event.cancelBubble=true (IE)event.stopImmediatePropagation() (W3C)默認(rèn)行為Event.preventDefault() (W3C) Event.returnValue=false (IE)事件分類(lèi)EventWindow 對(duì)象Window 對(duì)象上的 Event 事件包括：load unload errorabortImage 對(duì)象Image 對(duì)象上的 Event 事件包括loaderro