??? Netscape 6已經正式版發布，由于新版本的瀏覽器采用了全新的技術，是以Mozilla和Gecko為基礎的。Gecko是下一代瀏覽器引擎，它支持HTML、CSS、W3C DOM、XML、RDF以及JavaScript等開放的Internet標準。Netscape 6和以前的版本不兼容，因此，以前在Netscape Navigator里編寫的程序在新版本里不能正常運行。本文將向大家探討在Netscape 6瀏覽器里進行動態HTML編程的基本原理。以前當我們涉及到瀏覽器無關的DHTML動畫時，我們的代碼將變得很復雜。不同的瀏覽器對其屬性采用不同的句法和不同語義。一個瀏覽器使用top，而另一個瀏覽器也許使用pixelTop.一個瀏覽器使用屬性值來確定窗口的位置問題，而另一個瀏覽器則使用參考整個文檔的方法來實現。Netscape 6是DOM（文檔對象模型）兼容的瀏覽器，而DOM（文檔對象模型）是編寫瀏覽器無關腳本的關鍵。Netscape 6對W3C規范的支持，確實使我們在進行編寫腳本代碼時輕松了許多。但是Internet Explorer 5.5的DOM和Netscape 6的DOM仍然有一些差異。
??? 本文將向你展示一些在網頁中編寫動態HTML的基本原理。innerHTML屬性原本不是DOM標準的一部分，但是IE和Netscape 6都支持它.我們將向你展示怎樣利用這一屬性來建立引人入勝的頁面效果.我們將說明動畫的原理:在頁面里怎樣移動元素。由于動畫與坐標位置有關，我們將涉及到怎樣來設定、取得和初始化它們的坐標位置。還將探討元素可視性以及IE 5和Netscape 6之間的差異。我們將也討論對處理Netscape將要廢棄的BLINK標記可供選擇的方案。

??? 在本文里，你將學會:
?怎樣提取一個標記的所有屬性
?怎樣設定任意HTML標記的內容
?怎樣水平、垂直移動元素
?怎樣設定、取得、初始化、操縱坐標值
?怎樣設定、取得、初始化、操縱元素的可視性
?怎樣模擬閃爍效果。
?
1.怎樣提取一個標記的所有屬性？
?
??? 當我們要制作具有動畫效果的頁面時，我們要知道怎樣去參考要移動的元素。最好的方法是知道其ID值。我們可以利用元素的ID值來參考一個元素的所有屬性和方法。例如：要找出ID="bar"的元素的標記名，我們可以這樣：bar.nodeName。例如：假如我們在頁面的某一處設置了

……

，下面的的代碼將給出ID為examId的標記的名字。
???
??? arrayOfDocFonts.item(2).color = ' + arrayOfDocFonts.item(2).color);
??? }
???
??? 結果如圖3。
????
????
??? 注意：本頁所有代碼必須在Internet Explorer 或 Netscape 6里才能正確執行。

2.設定HTML內容

? Internet Explorer的innerHTML屬性并不是 W3C DOM規范的一部分，然而，應用戶的要求，基于Mozilla和 Gecko的瀏覽器（如Netscape 6）決定在2000年5月19以后的版本支持此屬性（Mozilla M16及以后的版本，Netscape 6 PR2及以后的版本）。讓我們來看個例子：通過點擊按鈕來刷新計數器的值。

???

點擊的次數 = 0
???
??? <script LANGUAGE="JavaScript">
???
??? </script>
?
??? 當點擊按鈕時函數updateMessage()被調用一次，點擊的次數增加1，DIV標記里的內容更新一次。
??? 顧名思義，innerHTML屬性值代表HTML標記里的內容，即一個完整標記的內容。比如上例點擊的次數 = 0中里的內容“點擊的次數 = 0”。
??? innerHTML屬性也可以包含許多HTML 標記，例如：
??? 點擊的次數 = 0
??? 此時的innerHTML的內容為：點擊的次數 = 0
??? 可以通過下面的方法進行刷新內容：
??? document.getElementById("counter2").innerHTML = "點擊的次數 = " + hits + "";

3.水平和垂直移動元素

??? 編寫DHTML代碼最頭疼的一件事情就是瀏覽器無關地在屏幕上移動元素，當我們提起元素水平位置和垂直位置時，自然會想到left和top，Netscape Navigator使用left和top屬性，但Internet Explorer使用style的pixelLeft和pixelTop屬性，Netscape 6則使用W3C規范的left和top屬性，由于Internet Explorer 5以上版本的瀏覽器也支持此屬性，因此，我們可以編寫瀏覽器無關的水平移動元素的腳本代碼：
???
?

??? 單擊上面的代碼生成的按鈕時，可以看到它移動到100px的位置，如果你不寫上單位px，你不會出錯，但那不是W3C/DOM推薦使用的。

4.設定元素坐標值

??? 設定和取得元素位置的瀏覽器無關W3C規范的辦法是通過style元素的left和top屬性來實現的，盡管這些屬性被解釋為物理計量單位，即字符串，這些字符串包含一個數字和一個“px”。我們在設定這些屬性的時候，必須在數字的后面加上“px”。例如：給ID="counter1"的元素設定水平位置為 xlocation，我們應當寫：

??? document.getElementById('counter1').style.left = xlocation + "px";

?? 如果不寫“px”，瀏覽器也能識別。瀏覽器會認為計量單位是px，會自動加上它。但你要獲取元素位置的時候，結果總是帶"px" 的字符串。

document.getElementById('counter1').style.left = xlocation;

The browser assumes the unit of measure is pixels and will add the "px" automatically. You'll always get a "px"-ended string when querying the top and left properties.
?
??? 記住left和top的返回值是很重要的，否則，你的瀏覽器會報告錯誤啊。如果你需要他們的數值時，可以使用parseInt()方法，此方法把字符串從左到右轉換成整數，當沒有整數可以進行轉換的時候，轉換停止。例如：parseInt("50px") 的結果是 50。下面的代碼在你每按一次按鈕的時候，按鈕位置增加50px。

?

?<script LANGUAGE="JavaScript">
?
?</script>

5.元素的可視性

? 要編寫瀏覽器無關的設定和獲取元素可視性的方法是采用W3C規范的推薦的style元素的visibility屬性。visibility可以取以下三個值：

??? 1.""，即 空字符串
??? 2."hidden"
??? 3."visible"

??? 當元素的visibility值為""或為"visible"時，元素在瀏覽器里是可見的，為"hidden"時，則不可見。要檢測某元素的可視性，有兩個辦法：
? if (visibility == "")...
? 或者:
? if (visibility != "hidden")...

6.元素閃爍效果的實現

??? 標記是Netscape Navigator特有的，Netscape 6將會在以后取消這一標記。W3C規范推薦使用樣式單style的text-decoration:blink來實現這一效果，但它只有Netscape Navigator 和 Netscape 6支持，Internet Explorer仍舊不支持這一效果。下面的兩行代碼在Netscape Navigator 和 Netscape 6里都會閃爍，

??? 此行文字在Netscape Navigator 和 Netscape 6應當閃爍
???

此行文字在Netscape Navigator和Netscape 6應當閃爍

??? 由于Internet Explorer不支持閃爍效果，因此編寫瀏覽器無關的代碼最好的辦法就是交替設定元素的可視性為顯示和隱藏。

總結

以上是生活随笔為你收集整理的Netscape 6 DHTML编程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。