欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2008年07月03日 20:58:05   作者：  
DOM是文檔對(duì)象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說(shuō)就是DHTML編程）的一套API接口，W3C出臺(tái)的推薦標(biāo)準(zhǔn)，每個(gè)瀏覽器都有一些細(xì)微的差別，其中以Mozilla的瀏覽器最與標(biāo)準(zhǔn)接近。

二、DOM樹(shù)
要注意：DOM樹(shù)的根統(tǒng)一為文檔根—document，DOM既然是樹(shù)狀結(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)頁(yè)的HTML如下

 程序代碼

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


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

           html

      body       head

    div          title

  文本              文本

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

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

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

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

 程序代碼

<html>
  <head>
    <title>never-online's website</title>
    <script>
    function changedivText (strText) {
      var nodeRoot = document; //這個(gè)是根結(jié)點(diǎn)
      var nodeHTML = nodeRoot.childNodes[0]; //這個(gè)是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這個(gè)屬性，因此我們可以改變這個(gè)屬性，也就成功的操作了DOM樹(shù)中的一個(gè)結(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樹(shù)上的任一節(jié)點(diǎn)。（注：1. 跨域除外，跨域通常是在操作frame上，簡(jiǎn)單的說(shuō)，就是兩個(gè)frame不屬于同一域名。2.上面的操作為了演示，采用的方法是從根結(jié)點(diǎn)一直到文本結(jié)點(diǎn)的遍歷，在DOM方法上，有更簡(jiǎn)潔的方法，這些以后會(huì)有更多示例加以說(shuō)明，下文中也會(huì)有介紹）

相關(guān)文章

最新評(píng)論