創(chuàng)新互聯(lián)建站專(zhuān)注于中大型企業(yè)的網(wǎng)站建設(shè)、網(wǎng)站制作和網(wǎng)站改版、網(wǎng)站營(yíng)銷(xiāo)服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開(kāi)發(fā)的融合，累計(jì)客戶(hù)數(shù)千家，服務(wù)滿(mǎn)意度達(dá)97%。幫助廣大客戶(hù)順利對(duì)接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專(zhuān)注成都品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開(kāi)發(fā)，在前進(jìn)的路上，與客戶(hù)一起成長(zhǎng)！

DOM(文檔隊(duì)形模型)是針對(duì)HTML和XML文檔的一個(gè)API(應(yīng)用程序編程接口)。DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)，允許開(kāi)發(fā)人員添加，移除和修改頁(yè)面的一部分。DOM可以講任何HTML和XML文檔描繪成一個(gè)有多層次節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)。節(jié)點(diǎn)分為幾種不同的類(lèi)型，每種類(lèi)型分別表示文檔中不同的信息。每個(gè)節(jié)點(diǎn)都擁有各自的特點(diǎn)、數(shù)據(jù)和方法，另外也與其他節(jié)點(diǎn)存在某種關(guān)系。節(jié)點(diǎn)之間的關(guān)系構(gòu)成了層次，而所有頁(yè)面標(biāo)記則表現(xiàn)為一個(gè)以特定節(jié)點(diǎn)為根節(jié)點(diǎn)的樹(shù)形結(jié)構(gòu)?？偣灿?2種節(jié)點(diǎn)類(lèi)型，這些類(lèi)型都繼承自一個(gè)基類(lèi)型-Node類(lèi)型

Node類(lèi)型

DOM1級(jí)定義了一個(gè)Node接口，Javascript中的所有節(jié)點(diǎn)類(lèi)型都繼承自Node類(lèi)型，因此所有節(jié)點(diǎn)類(lèi)型都共享著相同的基本屬性和方法，每個(gè)節(jié)點(diǎn)都有一個(gè)nodeType屬性，用于表明節(jié)點(diǎn)的類(lèi)型。節(jié)點(diǎn)類(lèi)型由在Node類(lèi)型中定義的下列12個(gè)數(shù)值常量來(lái)表示，任何節(jié)點(diǎn)類(lèi)型必居其一：

Node.ELEMENT_NODE (1) 
Node.ATTRIBUTE_NODE (2) 
Node.TEXT_NODE (3) 
Node.CDATA_SECTION_NODE (4) 
Node.ENTITY_REFERENCE_NODE (5) 
Node.ENTITY_NODE (6) 
Node.PROCESSING_INSTRUCTION_NODE (7) 
Node.COMMENT_NODE (8) 
Node.DOCUMENT_NODE (9) 
Node.DOCUMENT_TYPE_NODE (10) 
Node.DOCUMENT_FRAGMENT_NODE (11) 
Node.NOTATION_NODE (12)

通過(guò)比較上面這些常量，可以很容易的確定節(jié)點(diǎn)的類(lèi)型

1         if(someNode.nodeType == Node.ELEMENT_NODE){ //在IE中無(wú)效2             alert("Node is an element");3         }

 

為了確保跨瀏覽器兼容，最好還是將nodeType屬性與數(shù)字值比較

1         if(someNode.nodeType == 1){ 
2             alert("Node is an element");3         }

1、nodeName和nodeValue屬性

要了解節(jié)點(diǎn)的具體屬性，可以使用這兩個(gè)屬性，他們的值完全取決于節(jié)點(diǎn)的類(lèi)型，在使用這兩個(gè)值之前，最好是像下面這樣先檢測(cè)一下節(jié)點(diǎn)的類(lèi)型

1         if(someNode.nodeType == 1){2             value = someNode.nodeName; //nodeName的值是元素的標(biāo)簽名3         }

2、節(jié)點(diǎn)關(guān)系

每個(gè)節(jié)點(diǎn)都有一個(gè)childNodes屬性，其中保存著一個(gè)NodeList對(duì)象。NodeList是一種類(lèi)數(shù)組對(duì)象，用于保存一組有序的節(jié)點(diǎn)，可以通過(guò)為止來(lái)訪(fǎng)問(wèn)這些節(jié)點(diǎn)。要注意他不是Array的實(shí)例，他實(shí)際上是基于DOM結(jié)構(gòu)動(dòng)態(tài)執(zhí)行查詢(xún)的結(jié)果，因此DOM結(jié)構(gòu)的變化能夠自動(dòng)反映在NodeList對(duì)象中，要訪(fǎng)問(wèn)NodeList中的節(jié)點(diǎn)可以通過(guò)方括號(hào)，也可以使用item()方法，另外也與其他節(jié)點(diǎn)存在某種關(guān)系。節(jié)點(diǎn)之間的關(guān)系構(gòu)成了層次，而所有頁(yè)面標(biāo)記則表現(xiàn)為一個(gè)以特定節(jié)點(diǎn)。

1         var fitstChild = sonmeNode.childNodes[0];2         var secondChild = someNode.childNodes.item(1);3         var count = someNode.childNodes.length;

在前面介紹過(guò)，對(duì)arguments對(duì)象使用Array.prototype.slice()方法可以將其轉(zhuǎn)換為數(shù)組，對(duì)于NodeList也適用。

 1         //在IE8及之前版本無(wú)效 2         var arrayOfNodes = Array.prototype.alice.call(someNode.childNodes,0); 3  4         //兼容所有瀏覽器 5         function converToArray(nodes){ 6             var array = null; 7             try{ 8                 array = Array.prototype.slice.call(nodes,0); //針對(duì)非IE瀏覽器 9             }catch(ex){10                 array = new Array();11                 for(var i=0,len = nodes.length;i < len; i++){12                     array.push(nodes[i]);13                 }14             }15             return array;16         }

每一個(gè)節(jié)點(diǎn)都有一個(gè)parentNode屬性，該屬性指向文檔樹(shù)中的父節(jié)點(diǎn)。包含在childNodes列表中的所有節(jié)點(diǎn)都具有相同的父節(jié)點(diǎn)，因此他們的paternNode屬性都指向同一個(gè)節(jié)點(diǎn)。此外包含在childNodes列表中的每個(gè)節(jié)點(diǎn)相互之間都是同胞節(jié)點(diǎn)。通過(guò)使用列表中每個(gè)節(jié)點(diǎn)的previousSibling和nextSibling屬性，可以訪(fǎng)問(wèn)同一列表中的其他節(jié)點(diǎn)列表中第一個(gè)節(jié)點(diǎn)的previousSibling屬性值為null，而列表中最后一個(gè)節(jié)點(diǎn)的nextSlbling屬性的值同樣也是null

父節(jié)點(diǎn)的firstChild和lastChild屬性分別指向起childNodes列表中的第一個(gè)和最后一個(gè)節(jié)點(diǎn)。其中someNode.firstChild等于someNode.childNodes[0],而someNode.lastChild等于someNode.childNodes[someNode.childNodes.length - 1]

hasChildNodes()在節(jié)點(diǎn)包含一個(gè)或多個(gè)子節(jié)點(diǎn)的情況下返回true

所有節(jié)點(diǎn)都有的最后一個(gè)屬性是ownerDocument,該屬性指向表示整個(gè)文檔的文檔節(jié)點(diǎn)，通過(guò)這個(gè)屬性，我們可以不必在節(jié)點(diǎn)層次中層層回溯到頂端，而是可以直接訪(fǎng)問(wèn)文檔節(jié)點(diǎn)

3、操作關(guān)系

appendChild(),用于向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)，相應(yīng)的指針關(guān)系會(huì)更新，更新完成后返回一個(gè)新增的節(jié)點(diǎn)。

1         var returnNode = someNode.appendChild(newNode);2         console.log(returnNode = someNode.firstChild); //true3         console.log(returnNode = newNode);    //true

如果傳入到appendChild()方法中的參數(shù)已經(jīng)是文檔中的一部分，則他會(huì)從原來(lái)的位置轉(zhuǎn)移到新的位置，例如

1         var returnNode = someNode.appendChild(someNode.firstChild);2         console.log(returnNode = sonmeNode.firstChild); //false3         console.log(returnNode = someNode.lastChild); //true

insertBefore()把節(jié)點(diǎn)放在列表中某個(gè)特定的位置上。接受兩個(gè)參數(shù)：插入的節(jié)點(diǎn)和作為參考的節(jié)點(diǎn)。插入的節(jié)點(diǎn)會(huì)作為參考節(jié)點(diǎn)的前一個(gè)同胞節(jié)點(diǎn)，同時(shí)被返回，如果參照節(jié)點(diǎn)是null，則和appendChild()相同

1         //插入后成為第一個(gè)節(jié)點(diǎn)2          returnNode = someNode.insertBefore(newNode,someNode.childNodes[0]);3          //插入后成為最后一個(gè)節(jié)點(diǎn)4          returnNode = someNode.insertBefore(newNode,someNode.lastChild);5          //插入到最后一個(gè)節(jié)點(diǎn)的前面6          returnNode = someNode.insertBefore(newNode,someNode.childNodes[someNode.childNodes.length - 1]);

replaceChild()替換某個(gè)節(jié)點(diǎn)，接受兩個(gè)參數(shù)：插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)。要替換的節(jié)點(diǎn)將由這個(gè)方法返回并從文檔樹(shù)中移除。

1          //替換第一個(gè)子節(jié)點(diǎn)2          var returnNode = replaceChild(newNode,someNode.firstChild);

removeChild()移除某個(gè)節(jié)點(diǎn)，接受一個(gè)參數(shù)即要移除的節(jié)點(diǎn)并返回它。

1          //移除第一個(gè)子節(jié)點(diǎn)2          var returnNode = removeChild(someNode.childNodes[0]);

4、其他方法

有兩個(gè)方法是所有類(lèi)型的節(jié)點(diǎn)都有的：cloneNode()和normalize()

cloneNode()方法接受一個(gè)布爾值參數(shù)，表示是否執(zhí)行深復(fù)制，參數(shù)為true時(shí)，執(zhí)行深復(fù)制。也就是復(fù)制節(jié)點(diǎn)本身和整個(gè)子節(jié)點(diǎn)樹(shù)。參數(shù)為false時(shí)，執(zhí)行淺復(fù)制即只復(fù)制節(jié)點(diǎn)本身。復(fù)制后返回的節(jié)點(diǎn)副本屬于文檔所有，但并沒(méi)有為他指定父節(jié)點(diǎn)。因此，這個(gè)節(jié)點(diǎn)的副本就成為了一個(gè)“孤兒”，除非通過(guò)appendChild()、insertBefore()或replaceChild()將他添加到文檔中，例如：

 1          <ul> 2              <li></li> 3              <li></li> 4              <li></li> 5          </ul> 6  7          //如果我們已經(jīng)將<ul>元素的引用保存在了myList中， 8  9          var deepList = myList.cloneNode(true);10          console.log(deepList.childNodes.length); //311 12          var shallowList = myList.cloneNode(false);13          concole.log(shallow.childNodes.length); //0

cloneNode()方法不會(huì)復(fù)制添加到DOM節(jié)點(diǎn)中的JavaScript屬性，例如事件處理程序等。

normalize()唯一的作用就是處理文檔中的文本節(jié)點(diǎn)，由于解析器的實(shí)現(xiàn)或者DOM操作等原因，可能會(huì)出現(xiàn)文本節(jié)點(diǎn)不包含文本，或者接連出現(xiàn)兩個(gè)文本節(jié)點(diǎn)的情況。當(dāng)在某個(gè)節(jié)點(diǎn)上調(diào)用這個(gè)方法時(shí)，就會(huì)在該節(jié)點(diǎn)中查照上述兩種情況。如果找到了空文本節(jié)點(diǎn)，則刪除它。如果找到相鄰的文本節(jié)點(diǎn)，則將它們合并為一個(gè)文本節(jié)點(diǎn)。

 

網(wǎng)站名稱(chēng)：DOM-Node類(lèi)型
文章起源：http://www.rwnh.cn/article16/gdojgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、面包屑導(dǎo)航、服務(wù)器托管、外貿(mào)建站、小程序開(kāi)發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)