快捷導(dǎo)航

Javascript & DHTML DOM基礎(chǔ)和基本API第2/5頁

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

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

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

根結(jié)點(diǎn)(document)

  父結(jié)點(diǎn)(parentNode)

    子結(jié)點(diǎn)(childNodes)

      兄弟結(jié)點(diǎn)  兄弟結(jié)點(diǎn)
      (sibling)  (sibling)

例子：

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

程序代碼

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

我們參照樹的概念，畫出該HTML文檔結(jié)構(gòu)的DOM樹：

           html

      body       head

    div          title

  文本              文本

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

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

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

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

程序代碼

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

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

您可能感興趣的文章: