電腦遊戲製作開發設計論壇

[iceShadow]

前言:
前一陣子，因為寫的資料在各別瀏灠器上有些相容性的問題，所以也就擱置了一段時間，另外，在下並非專業的網頁設計者，因此，對網頁技術方面的瞭解有限，不過還是願意略提自己瞭解的部份和大家分享喲。以下是更正過的第一篇資料

由於網頁裡每一個構件，只要可以想到的到的部份，在DOM之下，都可以視為一個節點，包括像HTML、BODY、HEAD、TITLE標籤甚至連SCRIPT區段和在BODY標籤內的網頁主體或只是(標籤內的)一段文字，也因此都可以利用DOM的觀念加以改變和操作。

一個網頁，最簡單的型式便像這樣

＜html>
＜head>＜title>＜/title>＜/head>
＜body>＜/body>＜/html>

如果以document這個物件為根節點來看，它在微軟IE瀏灠器中的DOM構造便像這樣

#document
　│
　└─HTML
　　　│
　　　├─HEAD
　　　│　│
　　　│　└TITLE
　　　│
　　　└─BODY

其中，可以看出HTML節點是document的子節點、HEAD和BODY節點是HTML的子節點、TITLE節點是HEAD的子節點，不過很不幸的是，連最簡單的網頁的子節點順序並不是固定的。並沒有規定一個人的寫作習慣一定要怎麼寫才算是正確的寫法，只要願意，若有人文件開頭加上無害的註解：

＜!-- 這是一個來自iceShadow製作的HTML -->

那麼在微軟IE之下的DOM構造便會變成這樣：

#document
　│
　├─#comment ←這是剛加入的文件開頭註解
　│
　└─HTML
　　　│
　　　├─HEAD
　　　│　│
　　　│　└TITLE
　　　│
　　　└─BODY


可以看出，document的第一個子節點變成#comment了，html變成document第二個子節點了，這是來自設計者方面的一個問題(指撰寫風格)，另外在fireFox瀏灠器下卻不是如此，會變成這樣：


#document
　│
　└─HTML
　　　│
　　　├─HEAD
　　　│　│
　　　│　├#comment ←這是剛加入的文件開頭註解
　　　│　│
　　　│　└TITLE
　　　│
　　　└─BODY


可以看出，代表該註解的節點位置變成在head節點底下，所以我們可以明白到，甚至只是文件設計者一個對於文件的註解，一段文字的參插，或是使用者(指灠文件的人)所使用的瀏灠器的不同，其相對的子節點順序及位置在DOM上的構造便有所不同，這大大增加了文件設計者在用Script處理DOM節點時的難度了，這在稍後會談到如何剋服文件在DOM上節點順序的變動性，進而可以順利的操作到我們想要的節點的方法。
－－－－

※參考子節點的方式

如欲參照一個節點的性質、集合或方法，是透過〝．〞的方式來連接敘述的，而每個節點都會具有一個子節點集合，它叫childNodes，而childNodes具有一個較重要的性質length，length表示childNodes共有幾個單位，易知，所以document.childNodes.length便表示docuemnt這個節點具有多少個子節點(以第一個例子而言是1，以第二個例子而言是2，以fireFox兩個例子都是1，因為fireFox是將註解自動安插到head 節點下，故不影響document下的子節點集合數量和順序)，因此在SCRIPT中它們的參照位置關係語法便像如下這樣（以第二個例子而言）：

childNodes第一個位置的索引值是由0開始的，這和其它許多語言倒有很多

相通之處，索引值通常由0開始代表第一個位置：


微軟IE下的DOM構造
節點名稱／參照位置
#comment document.childNodes[0]
html document.childNodes[1]
head document.childNodes[1].childNodes[0]
body document.childNods[1].childNodes[1]
title document.childNodes[1].childNodes[0].childNodes[0]



fireFox下的DOM構造
節點名稱／參照位置
html document.childNodes[0]
head document.childNodes[0].childNodes[0]
body document.childNods[0].childNodes[1]
#comment document.childNodes[0].childNodes[0].childNodes[0]
title document.childNodes[0].childNodes[0].childNodes[1]


可以知道，若body內有資料，那麼在微軟IE瀏灠器之下，它個子節點參考便一定位於document.childNodes[1].childNodes[1]之下，而fireFox瀏灠器在兩個例子裡，都會是在documnet.childNodes[0].childNodes[1]之下。其實document這個物件提供了我們為數不少的性質和方法直接去參照或操作在網頁中的某個節點，例如上面對於微軟IE瀏灠器和fireFox瀏灠器的body位置參照，我們透過由層層節點的關係取得，但這種方式顯然並不怎麼保險，除非你願意固定你的HTML文件格式，且也限定文件只能供某家瀏灠器讀取，不然不保證body參照一定可以用相同的節點索引值取得，因此，document有提供一個對body的直接參照document.body，不管文件內容是如何的變動，保證一定可以參照到body，所以，以第二個例子而言

document.childNods[1].childNodes[1]←微軟IE瀏灠器參照BODY的位置
document.childNods[0].childNodes[1]←fireFox瀏灠器參照BODY的位置
document.body←不管是微軟IE或fireFox都參照到BODY

三者是參照到相同位置的，在此我建議各位用document.body參照，而不要用第一種或第二種的方式，理由，易知，第三種方式自然是比第一、二種方式方便的多，也較具相容性，也比較保險。

不過在此，我不打算詳細的討論document所有的方法與性質，僅提取一些我比較瞭解的部份加以說明。

暫時先寫到這。

以上

iceShadow