DOM-Node類型

    

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

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

Node類型

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

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)

通過比較上面這些常量，可以很容易的確定節(jié)點的類型

1         if(someNode.nodeType == Node.ELEMENT_NODE){ //在IE中無效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é)點的具體屬性，可以使用這兩個屬性，他們的值完全取決于節(jié)點的類型，在使用這兩個值之前，最好是像下面這樣先檢測一下節(jié)點的類型

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

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

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

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

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

DOM-Node類型

 1         //在IE8及之前版本無效 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); //針對非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         }

DOM-Node類型

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

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

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

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

3、操作關(guān)系

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

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

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

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

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

DOM-Node類型

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

DOM-Node類型

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

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

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

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

4、其他方法

有兩個方法是所有類型的節(jié)點都有的：cloneNode()和normalize()

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

DOM-Node類型

 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

DOM-Node類型

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

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

 

網(wǎng)站名稱：DOM-Node類型
文章起源：http://muchs.cn/article16/gdojgg.html

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

廣告

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

營銷型網(wǎng)站建設(shè)