在JavaScript中如何實(shí)現(xiàn)DOM操作

作者：隊(duì)長 2010-09-08 16:50:11

對于JavaScript DOM，首先需要理解的一點(diǎn)是，DOM是針對XML的基于樹的API，它的實(shí)現(xiàn)有很多，包括HTML DOM以及XML DOM，而本文主要討論JavaScript DOM的基礎(chǔ)知識。

對于JavaScript DOM，首先需要理解的一點(diǎn)是，DOM是針對XML的基于樹的API，它的實(shí)現(xiàn)有很多（各語言基本都有自己的實(shí)現(xiàn)），文章將討論的是JavaScript中或者說xhtml(html)對DOM的實(shí)現(xiàn)。

51CTO推薦閱讀：JavaScript DOM的本質(zhì)及操作方法

使用DOM

考慮一個(gè)html文件：

<html> 
<head><title>測試</title></head> 
<body> 
<p>測試</p> 
</body> 
</html>

1.訪問節(jié)點(diǎn)

◆訪問html元素：var oHtml=document.documentElement;

◆獲取head元素：var oHead=oHtml.firstChild;

◆獲取body元素：var oBody=oHtml.lastChild; 或者 var oBody=document.body;

也可以通過childNodes來做同樣的工作：

var oHead=oHtml.childNodes[0] 或者 oHtml.childNodes.item(0);  
var oBody=oHtml.childNodes[1] 或者 oHtml.childNodes.item(1);

判斷節(jié)點(diǎn)間關(guān)系：

alert(oHead.parentNode==oHtml);    
alert(oBody.previousSibling==oHead);  
alert(oHead.nextSibling==oBody);  
alert(oHead.ownerDocument==document);

2.檢測節(jié)點(diǎn)類型

通過節(jié)點(diǎn)的nodeType屬性來檢驗(yàn)節(jié)點(diǎn)類型：

alert(document.nodeType);  //輸出9

需要注意的是，DOM兼容的瀏覽器（以FF2.0為例），擁有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量。各常量名稱與數(shù)值對照表如下：

ELEMENT_NODE                                 1  
ATTRIBUTE_NODE                            2  
TEXT_NODE                                         3  
CDATA_SECTION_NODE                 4  
ENTITY_REFERENCE_NODE            5  
ENTITY_NODE                                     6  
PROCESSING_INSTRCTION_NODE       7  
COMMENT_NODE                              8  
DOCUMENT_NODE                            9  
DOCUMENT_TYPE_NODE               10  
DOCUMENT_FRAGMENT_NODE   11  
NOTATION_NODE                              12

IE6不支持，不過你可以自定義一個(gè)JavaScript對象Node。

3.處理特性

處理特性可以使用標(biāo)準(zhǔn)的NameNodeMap中的方法：

getNamedItem(name) removeNamedItem(name)  setNamedItem(node)    item(pos)

比如:<p id="test">測試</p>，假設(shè)變量oP是上面的p節(jié)點(diǎn)的引用，我們要訪問oP的id屬性:

var sId=oP.attributes.getNamedItem("id").nodeValue;

這些方法用起來很累贅,所以DOM又定義了三個(gè)方法來簡化:

getAttribute(name)         ——返回名稱為name的屬性的值  
setAttribute(name,value)   ——顧名思義  
removeAttribute(name)      ——顧名思義

上面的例子可以改寫為：

var sId=oP.getAttribute("name");

4.訪問指定節(jié)點(diǎn)

熟知的getElementByTagName(name),getElementByName(name),getElementById(id)三個(gè)方法，不再展開。

#p#

5.創(chuàng)建和操作節(jié)點(diǎn)

（1）創(chuàng)建新節(jié)點(diǎn)，一張IE(6.0)和FF對DOM Level1的創(chuàng)建新節(jié)點(diǎn)方法支持的對照表：

方法                                                               IE                               FF  
createAttribute(name)                                 Y                                Y  
createCDATASection(text)                        N                                Y  
createComment(text)                                    Y                                Y  
createDocumentFragment()                        Y                                Y  
createElement(tagName)                             Y                                 Y  
createEntityReference(name)                     N                                 Y  
createProcessingInstruction(  
target,data)                                                   N                                  Y  
createTextNode(text)                                  Y                                   Y

（2）createElement(),createTextNode(),appendChild()

例子：  
<html> 
    <head> 
        <title>createElement() Example</title> 
        <script type="text/JavaScript"> 
            function createMessage() {  
                var oP = document.createElement("p");  
                var oText = document.createTextNode("Hello World!");  
                oP.appendChild(oText);  
                document.body.appendChild(oP);  
            }  
        </script> 
    </head> 
    <body onload="createMessage()"> 
    </body> 
</html>

在頁面載入后，創(chuàng)建節(jié)點(diǎn)oP，并創(chuàng)建一個(gè)文本節(jié)點(diǎn)oText,oText通過appendChild方法附加在oP節(jié)點(diǎn)上，為了實(shí)際顯示出來，將oP節(jié)點(diǎn)通過appendChild方法附加在body節(jié)點(diǎn)上。此例子將顯示Hello World!

（3）removeChild(),replaceChild()和insertBefore()

從方法名稱就知道是干什么的：刪除節(jié)點(diǎn)，替換節(jié)點(diǎn)，插入節(jié)點(diǎn)。需要注意的是replaceChild和insertBefore兩個(gè)參數(shù)都是新節(jié)點(diǎn)在前，舊節(jié)點(diǎn)在后。

（4）createDocumentFragment()

此方法主要是為了解決大量添加節(jié)點(diǎn)時(shí)，速度過慢。通過創(chuàng)建一個(gè)文檔碎片節(jié)點(diǎn)，將要添加的新節(jié)點(diǎn)附加在此碎片節(jié)點(diǎn)上，然后再將文檔碎片節(jié)點(diǎn)append到body上面，替代多次append到body節(jié)點(diǎn)。

<html> 
    <head> 
        <title>insertBefore() Example</title> 
        <script type="text/JavaScript"> 
            function addMessages() {  
                var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];  
                  
                var oFragment = document.createDocumentFragment();  
                  
                for (var i=0; i < arrText.length; i++) {  
                    var oP = document.createElement("p");  
                    var oText = document.createTextNode(arrText[i]);  
                    oP.appendChild(oText);  
                    oFragment.appendChild(oP);  
                }  
                  
                document.body.appendChild(oFragment);  
 
            }  
        </script> 
    </head> 
    <body onload="addMessages()"> 
 
    </body> 
</html>