天堂新在线,亚洲精品国产福利,福利网导航

深入理解JavaScript中的DOM及DOM技術

原創|其它|編輯：郝浩|2009-04-27 11:29:21.000|閱讀 1138 次

概述：本文概述了一些強大的，基本的DOM 級別一中的方法以及如何在JavaScript中使用它們。你將會學習到如何動態地創建，訪問，控制以及移除HTML元素。這里提到的DOM方法，并非是HTML專有的；它們在XML中同樣適用。

　　本文概述了一些強大的，基本的DOM 級別一中的方法以及如何在JavaScript中使用它們。你將會學習到如何動態地創建，訪問，控制以及移除HTML元素。這里提到的DOM方法，并非是HTML專有的；它們在XML中同樣適用。這里所有的示例，在任何全面支持DOM level1 的瀏覽器里都能正常工作；例如Mozilla瀏覽器或者其他基于Mozilla的瀏覽器，像網景公司的下一代導航者（Navigatior）瀏覽器等。這里的示例代碼在IE5中也能正常工作。（這里所提到的DOM方法是文檔對象模型規范（級別一）的核心的一部分。DOM 級別一包括對文檔進行訪問和處理的方法（DOM 1 核心）和專門為HTML文檔定義的方法。）

　　DOM簡介：

　　DOM的全稱是文檔對象模型（即Document Object Model），它在本質上是一種文檔平臺。文檔對象模型（DOM）是表示文檔（比如HTML和XML）和訪問、操作構成文檔的各種元素的應用程序接口（API）。支持Javascript的所有瀏覽器都支持DOM。DOM實際上是一個能夠讓程序和腳本動態訪問和更新文檔內容、結構和樣式的一種語言平臺。

　　這段文字是通過一個實例代碼來介紹了DOM的。那么我們從下面的HTML示例來開始吧。這段示例使用了DOM 級別一的方法，從JavaScript動態創建了一個HTML表格。它創建了一個包含了四個單元的小表格，并且在每個單元中含有文本。單元中文字內容是“這個單元式y行x列”，來展示單元格在表格中所處的位置。

<head>
<title>樣例代碼 - 使用 JavaScript 和 DOM 接口創建一個 HTML 表格</title>
<script>
    function start() {
        // 獲得從body的引用
        var mybody=document.getElementsByTagName("body").item(0);
        // 創建一個TABLE的元素
        mytable = document.createElement("TABLE");
        // 創建一個TBODY的元素
        mytablebody = document.createElement("TBODY");
        // 創建所有的單元格
        for(j=0;j<2;j++) {
            // 創建一個TR元素
            mycurrent_row=document.createElement("TR");
            for(i=0;i<2;i++) {
                // 創建一個TD元素
                mycurrent_cell=document.createElement("TD");
                // 創建一個文本（text）節點
                currenttext=document.createTextNode("cell is row "+j+", column "+i);
                // 將我們創建的這個文本節點添加在TD元素里
                mycurrent_cell.appendChild(currenttext);
                // 將TD元素添加在TR里
                mycurrent_row.appendChild(mycurrent_cell);
            }
            // 將TR元素添加在TBODY里
            mytablebody.appendChild(mycurrent_row);
        }
        // 將TBODY元素添加在TABLE里
        mytable.appendChild(mytablebody);
        // 將TABLE元素添加在BODY里
        mybody.appendChild(mytable);
        // 設置mytable的邊界屬性border為2
        mytable.setAttribute("border","2");
    }
</script>
</head>
<body onload="start()">
</body>
</html>

　　注意我們創建元素和文本節點的順序：

　　首先我們創建了TABLE元素。
　　然后，我們創建了TABLE的子元素--TBODY。
　　然后，我們使用循環語句創建了TBODY的子元素--TR。
　　對于每一個TR元素，我們使用一個循環語句創建它的子元素--TD。
　　對于每一個TD元素，我們創建單元格內的文本節點。
　　現在，我們創建了TABLE，TBODY，TR，TD等元素，然后創建了文本節點；接下來，我們將每一個對象接在各自的父節點上，使用逆序：

　　首先，我們將每一個文本節點接在TD元素上 mycurrent_cell.appendChild(currenttext);然后，我們將每一個TD元素接在他的父TR元素上。 mycurrent_row.appendChild(mycurrent_cell);然后，我們將每一個TR元素接在他們的父TBODY元素上。 mytablebody.appendChild(mycurrent_row);下一步,我們將TBODY元素接在他的父TABLE元素上 mytable.appendChild(mytablebody);最后，我們將TABLE元素接在他的父元素BODY上。 mybody.appendChild(mytable);請記住這個機制。你將會在W3C DOM編程中經常使用它。首先，你從上到下的創建元素；然后你從下向上的將子元素接在他們的父元素上。

　　下面是由javascript代碼生成的HTML代碼：

...
<TABLE border=5>
<tr><td>cell is row 0 column 0</td><td>cell is row 0 column 1</td></tr>
<tr><td>cell is row 1 column 0</td><td>cell is row 1 column 1</td></tr>
</TABLE>
...下面是由代碼生成的TABLE及其子元素的DOM對象樹：

　　你可以只用一些DOM方法來創建這個表格和它內部的子元素。請在腦海中時刻保留你想要創建的數據結構的樹之模型，這樣有利于更簡便的寫出必須的代碼。在圖1的TABLE樹中，TABLE有一個子元素TBODY。TBODY有兩個子元素。每一個TR又含有兩個子元素（TD）。最后，每一個TD有一個子元素--文本節點。

　　基本DOM方法 - Sample2.html

　　getElementByTagName是文檔接口（Document interface）和元素接口（Element interface）的中的方法，所以不管是根文檔對象還是所有的元素對象都含有方法getElementByTagName。用來通過它們的標簽名稱（tag name）來獲得某些元素的一系列子元素。你可以使用的方法是：element.getElementsByTagName(tagname)。

　　getElementsByTagName返回一個有特定標簽名稱（tagname）的子元素列表。從這個子元素列表中，你可以通過調用item和你想得到的元素的下標，來獲得單個元素。列表中第一個元素的下標是0。上面的方法很簡單，但是當你操作一個巨大的數據結構時還是應該小心一些。 OK，我們下一個話題中要繼續對我們的表格例子進行修改。下面的示例更加簡單，它意圖展示一些基礎的方法：

<html>
<head>
<title>樣例代碼 - 使用 JavaScript 和 DOM 接口操作 HTML 表格</title>
<script>
      function start() {
           // 獲得所有的body元素列表（在這里將只有一個）
           myDocumentElements=document.getElementsByTagName("body");
           // 我們所需要body元素是這個列表的第一個元素
           myBody=myDocumentElements.item(0);
           // 現在，讓我們獲得body的子元素中所有的p元素
           myBodymyBodyElements=myBody.getElementsByTagName("p");
           // 我們所需要的是這個列表中的第二個單元元素
           myP=myBodyElements.item(1);
       }   </script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>

　　在這個例子中，我們設置變量myP指向DOM對象body中的第二個p元素：

　　首先，我們使用下面的代碼獲得所有的body元素的列表，因為在任何合法的HTML文檔中都只有一個body元素，所以這個列表是只包含一個單元的。 document.getElementsByTagName("body")下一步，我們取得列表的第一個元素，它本身就會body元素對象。 myBody=myDocumentElements.item(0);然后，我們通過下面代碼獲得body的子元素中所有的p元素 myBodyElements=myBody.getElementsByTagName("p");

　　最后，我們從列表中取第二個單元元素。

myP=myBodyElements.item(1);

　　一旦你取得了HTML元素的DOM對象，你就可以設置它的屬性了。比如，如果你希望設置背景色屬性，你只需要添加：

myP.style.background="rgb(255,0,0)";
// 設置inline的背景色風格使用document.createTextNode(..)

　　創建文本節點

　　使用文檔對象來調用一個createTextNode方法并創建你自己的文本節點。你只需要傳遞文字內容給這個函數。返回的值就是一個展示那個文本節點信息的對象。

myTextNode=document.createTextNode("world");

　　這表示你已經創建了一個TEXT——NODE（一個文字片斷）類型的節點，并且它的內容是“world”，任何你對myTextNode的引用都指向這個節點對象。如果想將這個文本插入到HTML頁面中，你還需要將它作為其他節點元素的子元素。

　　使用appendChild(..)插入元素

　　那么，通過調用myP.appendChild([node_element])你可以將這個元素設置成為第二個P的一個新的子元素。

myP.appendChild(myTextNode);

　　在測試了這個例子之后，我們注意到，hello和world單詞被組合在了一個：helloworld。事實上，當你看到HTML頁面時，hello和world兩個文字節點看起來更像是一個節點。但是請記住它們在文檔模型中的形式--是兩個節點。第二個節點是一個TEXT_NODE類型的新節點，也是第二個P標簽的第二個子元素。下面的圖標將在文檔樹種展示最近創建的文本節點對象。

　　createTextNode 和 appendChild 是在單詞hello和world之間設置空格的一個簡單方法。另外一個重要的注意事項是：appendChild方法將把新的子節點接在最后一個子節點之后，正如world被加在了hello之后。所以如果你想在hello和world中間添加一個文本節點的話，你應該使用insertBefore來提到appendChild.

　　使用文檔對象和createElement(..)方法創建新的元素

　　你可以使用createElement來創建新的HTML元素或者任何其它你想要的元素。比如，如果你想要創建一個新的P作為BODY的子元素，你可以使用前面例子的myBody并給它接上一個新的元素節點。使用 document.createElement("tagname")可以方便的創建一個節點。如下：

myNewPTAGnode=document.createElement("p");
myBody.appendChild(myNewPTAGnode);

　　使用removeChild(..)方法移除節點

　　每一個節點都可以被移除.下面的一行代碼移除了包含在myP(第二個p元素)下面的文本節點world。

myP.removeChild(myTextNode);

　　最后你可以將myTextNode（那個包含了world單詞的節點）添加給我們最后創建的P元素：

myNewPTAGnode.appendChild(myTextNode);被修改的對象樹的最后的狀態如下：

　　動態創建一個表格(回到Sample1.html)

　　這一段落的剩余部分我們將繼續修改我們sample1.html。下面的圖展示了我們在示例中創建的表格的對象樹的結構。

　　復習一下HTML表格結構

　　創建元素節點并將他們插入到文檔樹中

　　sample1.html中創建表格的基本步驟是：

　　獲得body對象（文檔對象的第一個元素）創建所有元素。
　　最后，根據表格結構（上面圖中所示）將每一個孩子節點拼接起來。下面的一段源碼是經過修改的sample1.html ，在start函數的最后，有一行新代碼。使用另一個DOM方法（setAttribute）來設置表格的邊界屬性。setAttribute有兩個參數：屬性的名稱和屬性的值。你可以使用這個方法來設置任意元素的任意屬性。

<head>
<title>示例代碼 - 使用Javascript和DOM Interfaces來處理HTML</title>
<script>
      function start() {
           // 獲得body的引用
           var mybody=document.getElementsByTagName("body").item(0);
           // 創建一個標簽名稱為TABLE的元素
           mytable = document.createElement("TABLE");
           // 創建一個標簽名稱為在TBODY的元素
           mytablebody = document.createElement("TBODY");
           // 創建所有的單元格
           for(j=0;j<2;j++) {
               // 創建一個標簽名稱為在TR的元素
               mycurrent_row=document.createElement("TR");
               for(i=0;i<2;i++) {
                   // 創建一個標簽名稱為在TD的元素
                   mycurrent_cell=document.createElement("TD");
                   // 創建一個文字節點
                   currenttext=document.createTextNode("cell is row "+j+", column "+i);
                   // 將文字節點添加到TD單元格內
                   mycurrent_cell.appendChild(currenttext);
                   // 將TD單元格添加到TR行中
                   mycurrent_row.appendChild(mycurrent_cell);
               }
               // 將TR行添加到TBODY中
               mytablebody.appendChild(mycurrent_row);
           }
           // 將TBODY添加到TABLE中
           mytable.appendChild(mytablebody);
           // 將TABLE添加到BODY中
           mybody.appendChild(mytable);
           // 設置邊界屬性為2
           mytable.setAttribute("border","2");
       }
</script>
</head>
<body onload="start()">
</body>
</html>

　　使用CSS和DOM來操作表格

　　從表格中獲得一個文字節點

　　示例介紹了兩個新的DOM屬性。首先，使用childNodes屬性來獲得mycel的孩子節點列表。childNodes列表包括所有的孩子節點，無論它們的名稱或類型是什么。像getElemengByTagName一樣，它返回了一個節點列表。不同的是，getElementByTagName只返回指定標簽名稱的元素。一旦你獲得了返回的列表，你可以使用item(x)方法來使用指定的元素。這個例子在表格的第二行第二個單元格中的myceltext中保存了一個文字節點。然后，運行這個例子并觀察結果，他創建了一個新的文字節點，這個文字節點的內容是myceltext的值，并且將這個文字節點作為了BODY元素的一個孩子。

如果你的對象是一個文字節點，你可以使用data屬性來回收（retrieve）節點的文字內容

mybody=document.getElementsByTagName("body").item(0);
mytable=mybody.getElementsByTagName("table").item(0);
mytablebody=mytable.getElementsByTagName("tbody").item(0);
myrow=mytablebody.getElementsByTagName("tr").item(1);
mycel=myrow.getElementsByTagName("td").item(1);
// mycel的孩子節點列表的第一個元素
myceltext=mycel.childNodes.item(0);
// currenttext的內容是myceltext的內容
currenttext=document.createTextNode(myceltext.data);
mybody.appendChild(currenttext);

　　獲得一個屬性的值

　　在sample1的最后我們在mytable對象上調用了setAttribute。這個調用是用來設置表格的邊界屬性的。然后是用了getAttribute方法來獲得一個屬性的值：

mytable.getAttribute("border");

　　通過改變樣式屬性來隱藏一列

　　一旦你在你的javascript變量中保存了一個對象，你就可以直接為它設置樣式屬性了。下面的代碼是修改后的sample1.html，在這里，第二列的每一個單元格都被隱藏了。而且第一列中的每一個單元格改為使用紅色背景。注意，樣式屬性是被直接設置的。

<html>
<body onload="start()">
</body>
<script>
      function start() {
          var mybody=document.getElementsByTagName("body").item(0);
          mytable = document.createElement("TABLE");
          mytablebody = document.createElement("TBODY");
          for(j=0;j<2;j++) {
              mycurrent_row=document.createElement("TR");
              for(i=0;i<2;i++) {
                  mycurrent_cell=document.createElement("TD");
                  currenttext=document.createTextNode("cell is:"+i+j);
                  mycurrent_cell.appendChild(currenttext);
                  mycurrent_row.appendChild(mycurrent_cell);
                  // 當column為0時，設置單元格背景色；column為1時隱藏單元格
                  if(i==0) {
                      mycurrent_cell.style.background="rgb(255,0,0)";
                  } else {
                      mycurrent_cell.style.display="none";
                  }
              }
              mytablebody.appendChild(mycurrent_row);
          }
          mytable.appendChild(mytablebody);
          mybody.appendChild(mytable);
       }
   </script>
</html>