Javascript & DHTML DOM基礎和基本API第2/5頁

更新時間：2008年07月03日 20:58:05 作者：

DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，其中以Mozilla的瀏覽器最與標準接近。

二、DOM樹
要注意：DOM樹的根統(tǒng)一為文檔根—document，DOM既然是樹狀結構，那么他們自然有如下的幾種關系:

根結點(document)

  父結點(parentNode)

    子結點(childNodes)

      兄弟結點  兄弟結點
      (sibling)  (sibling)

例子：

假設網(wǎng)頁的HTML如下

程序代碼

<html>
  <head>
    <title>never-online's website</title>
  </head>
  <body>
    <div>tutorial of DHTML and javascript programming</div>
  </body>
</html>

我們參照樹的概念，畫出該HTML文檔結構的DOM樹：

           html

      body       head

    div          title

  文本              文本

從上面的圖示可以看出
html有兩個子結點，而html就是這兩個子節(jié)點的父結點

head有節(jié)點title，title下有一個文本節(jié)點

doby下有節(jié)點div，div下有一個文本節(jié)點

三、操作DOM樹
開篇已經(jīng)說過，DHTML本質(zhì)就是操作DOM樹。如何操作它呢？
假設我要改變上面HTML文檔中div結點的文本，如何做?

程序代碼

<html>
  <head>
    <title>never-online's website</title>
    <script>
    function changedivText (strText) {
      var nodeRoot = document; //這個是根結點
      var nodeHTML = nodeRoot.childNodes[0]; //這個是html結點
      var nodeBody = nodeHTML.childNodes[1]; //body結點
      var nodeDiv = nodeBody.childNodes[0]; //DIV結點
      var nodeText = nodeDiv.childNodes[0];//文本結點'
      nodeText.data = strText; //文本節(jié)點有data這個屬性，因此我們可以改變這個屬性，也就成功的操作了DOM樹中的一個結點了
    }
    </script>
  </head>
  <body>
    <div>tutorial of DHTML and javascript programming</div>
    <input onclick="changedivText('change?')" type="button" value="change"/>
  </body>
</html>

從上面的示例可以看出，我們可以用上面的這種方法操作DOM樹上的任一節(jié)點。（注：1. 跨域除外，跨域通常是在操作frame上，簡單的說，就是兩個frame不屬于同一域名。2.上面的操作為了演示，采用的方法是從根結點一直到文本結點的遍歷，在DOM方法上，有更簡潔的方法，這些以后會有更多示例加以說明，下文中也會有介紹）

您可能感興趣的文章: