mozilla

比較修改

轉換網頁程式:從 IE 到 Mozilla

Change Revisions

版本 22828:

Revision 22828 by sailplaneTW on

版本 307297:

Revision 307297 by sailplaneTW on

標題:
轉換網頁程式:從 IE 到 Mozilla
轉換網頁程式:從 IE 到 Mozilla
URL代稱:
轉換網頁程式:從_IE_到_Mozilla
轉換網頁程式:從_IE_到_Mozilla
標籤:
"待翻譯"
內容:

Revision 22828
Revision 307297
tt7    <p>
8      {{ template.Translation("http://developer.mozilla.org/en/do
 >cs/Migrate_apps_from_Internet_Explorer_to_Mozilla") }}
9    </p>
10    <p>
11      這篇文章描述 IE 與 Mozilla 瀏覽器之間在程式上的差異,協助您將 IE-only 網頁改寫為 Mozilla
 > 通用網頁。
12    </p>
13    <h3 id=".E7.B0.A1.E4.BB.8B" name=".E7.B0.A1.E4.BB.8B">
14      簡介
15    </h3>
16    <p>
17      Netscape 當初決定要製作 Mozilla 瀏覽器時刻意決定要支援 W3C 標準,因此 Mozilla 並不能完
 >全回溯相容 Netscape Navigator 4.x 及 Microsoft Internet Explorer 的自有程式。
 >舉例來說,Mozilla 不支援稍候會討論的 <code>&lt;layer&gt;</code> 標籤。此外,有些在 W3C 標
 >準觀念尚未普及前製作的瀏覽器(如 Internet Explorer 4)內含各式怪異的花招,我們稱為怪癖(Quirk),而為了相
 >容這些舊瀏覽器的模式便稱為 Quirks 模式。本文稍後也會討論 Mozilla 的 Quirks 模式。
18    </p>
19    <p>
20      我也會闡述其他 Mozilla 支援、但還沒有 W3C 相關規格的非標準技術,如 XMLHttpRequest 及 R
 >ich-text 編輯功能。此處指的 W3C 規格包括:
21    </p>
22    <ul>
23      <li>
24        <a class="external" href="http://www.w3.org/TR/html401/">
 >HTML 4.01</a> 和 <a class="external" href="http://www.w3.org/TR/xh
 >tml1/">XHTML 1.0/1.1</a>
25      </li>
26      <li>Cascade Style Sheets (CSS): <a class="external" href="h
 >ttp://www.w3.org/TR/REC-CSS1">CSS Level 1</a>、<a class="external"
 > href="http://www.w3.org/TR/REC-CSS2">CSS Level 2</a> 及部分 <a clas
 >s="external" href="http://www.w3.org/Style/CSS/current-work.html"
 >>CSS Level 3</a>
27      </li>
28      <li>Document Object Model (DOM): <a class="external" href="
 >http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</
 >a>、<a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DO
 >M Level 2</a> 及部分 <a class="external" href="http://www.w3.org/DOM
 >/DOMTR#dom3">DOM Level 3</a>
29      </li>
30      <li>Mathematical Markup Language: <a class="external" href=
 >"http://www.w3.org/Math/">MathML Version 2.0</a>
31      </li>
32      <li>Extensible Markup Language (XML): <a class="external" h
 >ref="http://www.w3.org/TR/REC-xml">XML 1.0</a>、<a class="external
 >" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a
 >>、<a class="external" href="http://www.w3.org/TR/xml-stylesheet/"
 >>Associating Style Sheets with XML Documents 1.0</a>、<a class="ex
 >ternal" href="http://lists.w3.org/Archives/Public/www-xml-linking
 >-comments/2001AprJ%20un/att-0074/01-NOTE-FIXptr-20010425.htm">Fra
 >gment Identifier for XML</a>
33      </li>
34      <li>XSL Transformations: <a class="external" href="http://w
 >ww.w3.org/TR/xslt">XSLT 1.0</a>
35      </li>
36      <li>XML Path Language: <a class="external" href="http://www
 >.w3.org/TR/xpath">XPath 1.0</a>
37      </li>
38      <li>Resource Description Framework: <a class="external" hre
 >f="http://www.w3.org/RDF/">RDF</a>
39      </li>
40      <li>Simple Object Access Protocol: <a class="external" href
 >="http://www.w3.org/TR/SOAP/%20">SOAP 1.1</a>
41      </li>
42      <li>ECMA-262, revision 3 (JavaScript 1.5): <a class="extern
 >al" href="http://www.ecma-international.org/publications/standard
 >s/Ecma-262.htm">ECMA-262</a>
43      </li>
44    </ul>
45    <h3 id=".E8.B7.A8.E7.80.8F.E8.A6.BD.E5.99.A8.E7.A8.8B.E5.BC.8
 >F.E5.B0.8F.E6.8A.80.E5.B7.A7" name=".E8.B7.A8.E7.80.8F.E8.A6.BD.E
 >5.99.A8.E7.A8.8B.E5.BC.8F.E5.B0.8F.E6.8A.80.E5.B7.A7">
46      跨瀏覽器程式小技巧
47    </h3>
48    <p>
49      雖然這世上有所謂的 Web 標準,但不同的瀏覽器作法依然大不相同(即使是同一個瀏覽器,也可能因為作業系統差別而相異)。
 >許多瀏覽器(如 Internet Explorer)在 W3C 規格形成前便提供某些功能,卻在標準制訂後忘了修改既有支援程式以符合
 >標準。
50    </p>
51    <p>
52      在我闡述 Mozilla 與 Internet Explorer 相異之處前,我會先講點小技巧,讓你的 Web 應用程
 >式容易擴充、在未來略事修改便能相容新瀏覽器。
53    </p>
54    <p>
55      不同瀏覽器下的某相同功能,往往也有不同的 API,所以在某些程式中你會發現不少 <code>if() else()</
 >code> 程式區段,以便區分不同的瀏覽器。以下程式是寫給 Internet Explorer 用的:
56    </p>
57    <pre>
58. . . 
59 
60var elm; 
61 
62if (ns4) 
63  elm = document.layers["myID"]; 
64else if (ie4) 
65  elm = document.all["myID"]
66</pre>
67    <p>
68      上面這段程式稱不上容易擴充,如果你要多相容一種瀏覽器就得改寫一次。
69    </p>
70    <p>
71      要排除遇到新的瀏覽器就要重寫網頁碼的情形,最容易的方法,就是把功能「抽」出來。與其使用一堆 <code>if() el
 >se()</code>,不如將常用的程式片段獨立為一個函式以提高效率。如此一來不但程式易讀,要支援更多瀏覽器也方便些:
72    </p>
73    <pre>
74var elm = getElmById("myID"); 
75 
76function getElmById(aID){ 
77  var element = null; 
78 
79  if (isMozilla || isIE5) 
80    element = document.getElementById(aID) 
81  else if (isNetscape4) 
82   element = document.layers[aID] 
83  else if (isIE4) 
84    element = document.all[aID]; 
85 
86  return element; 
87
88</pre>
89    <p>
90      以上的程式仍得處理<strong>瀏覽器偵測</strong>的問題,通常這要靠 useragent 字串來解決,例如
 >
91    </p>
92    <pre>
93Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016 
94</pre>
95    <p>
96      雖然 useragent 字串提供瀏覽器的詳細資訊,但處理這段字串的程式碰上新瀏覽器時還是有可能出錯,此時便需修改程式
 >
97    </p>
98    <p>
99      如果瀏覽器種類無關緊要(好比你已經把不支援的瀏覽器全都擋在門外了),那麼依據瀏覽器的能力來判別會比較好一點。通常可以用
 > JavaScript 來測試必備的功能,舉例來說,與其使用這樣的程式碼:
100    </p>
101    <pre>
102if (isMozilla || isIE5) 
103</pre>
104    <p>
105      還不如換條路走:
106    </p>
107    <pre>
108if (document.getElementById) 
109</pre>
110    <p>
111      這樣也可以讓其他支援此方法的瀏覽器(如 Opera 或 Safari)正常使用,無須更動程式。
112    </p>
113    <p>
114      而依據 useragent 字串辨識瀏覽器也並非一無是處,例如在檢查瀏覽器是否符合最低需求或除錯時都有其用途。
115    </p>
116    <p>
117      JavaScript也允許順序條件語言(inline conditional statements)以助於代碼的可讀性
 >
118    </p>
119    <p>
120      JavaScript 也支援判斷句簡寫法,協助你將程式寫得更易讀:
121    </p>
122    <pre>
123var foo = (condition) ? conditionIsTrue : conditionIsFalse; 
124</pre>
125    <p>
126      舉例而言,要取用某元素,可以寫為:
127    </p>
128    <pre>
129 
130function getElement(aID){ 
131  return (document.getElementById) ? document.getElementById(aID)
132                                   : document.all[aID];
133
134</pre>
135    <h3 id="Mozilla_.E8.88.87_Internet_Explorer_.E7.9A.84.E5.B7.A
 >E.E5.88.A5" name="Mozilla_.E8.88.87_Internet_Explorer_.E7.9A.84.E
 >5.B7.AE.E5.88.A5">
136      Mozilla 與 Internet Explorer 的差別
137    </h3>
138    <p>
139      首先,我要討論Mozilla和IE在表現HTML行為上的差別。
140    </p>
141    <h4 id=".E5.B7.A5.E5.85.B7.E6.8F.90.E7.A4.BA.EF.BC.88tooltips
 >.EF.BC.89" name=".E5.B7.A5.E5.85.B7.E6.8F.90.E7.A4.BA.EF.BC.88too
 >ltips.EF.BC.89">
142      工具提示(tooltips)
143    </h4>
144    <p>
145      老牌的瀏覽器透過在超連結和利用 <code>alt</code> 屬性值的 HTML 中導入工具提示來作為工具提示的內
 >容。 最新的 W3C HTML specification 建立了 <code>title</code> 這個屬性,它包含超連結的
 >詳細說明。 現代的瀏覽器會使用 <code>title</code> 的屬性來顯示工具提示,而且 mozilla 只支援 <cod
 >e>title</code> 屬性,並不支援 <code>alt</code> 屬性。
146    </p>
147    <h4 id="HTML_.E7.89.B9.E6.AE.8A.E5.AD.97.E5.85.83.EF.BC.88ent
 >ities.EF.BC.89" name="HTML_.E7.89.B9.E6.AE.8A.E5.AD.97.E5.85.83.E
 >F.BC.88entities.EF.BC.89">
148      HTML 特殊字元(entities)
149    </h4>
150    <p>
151      HTML 標籤可以是一些在 <a class="external" href="http://www.w3.org/T
 >R/REC-html40/sgml/entities.html">W3 standards body</a> 中已定義的字元。 您
 >可以利用它們的數值或字符來代替字元。 舉例來說,您可以利用 <code>&amp;#160;</code> 或等同的字符參考資料 
 ><code>&amp;nbsp;</code> 來代替空白鍵。
152    </p>
153    <p>
154      有一些很老很老的瀏覽器,像是 Internet Explorer ,它們允許在特殊字元後面拿走<code>;</cod
 >e>(分號(:
155    </p>
156    <pre>
157&amp;nbsp Foo 
158&amp;nbsp&amp;nbsp Foo 
159</pre>
160    <p>
161      Mozilla 依然會把 <code>&amp;nbsp</code> 當作空白鍵,既使這樣違反了 W3C 標準(W3
 >C specification)。 但如果 <code>&amp;nbsp</code> 後面直接跟上一些其他的字元,瀏覽器就不會
 >轉換它。 範例:
162    </p>
163    <pre>
164&amp;nbsp12345 
165</pre>
166    <p>
167      這行程式碼在 Mozilla 中就不會被執行,因為它違反了 W3 標準(W3 standard)。請使用正確的格式(<
 >code>&amp;nbsp;</code>)來避免瀏覽器與瀏覽器之間的差異性。
168    </p>
169    <h3 id="DOM_.E5.B7.AE.E7.95.B0" name="DOM_.E5.B7.AE.E7.95.B0"
 >>
170      DOM 差異
171    </h3>
172    <p>
173      文件物件模型(The Document Object Model,簡稱DOM)是一個裝載著文件元素的樹狀結構。你可以熟
 >練地透過已成為 W3C 標準的 JavaScript API 來操作 DOM。然而在 W3C 標準建立以前, Netscape 4
 > 和 IE 4 實作了一些類似的 API。 Mozilla 僅在使用 W3C 標準無法達成這些 API 的效果時才予以實作。
174    </p>
175    <h4 id=".E5.AD.98.E5.8F.96.E5.85.83.E7.B4.A0" name=".E5.AD.98
 >.E5.8F.96.E5.85.83.E7.B4.A0">
176      存取元素
177    </h4>
178    <p>
179      如果你想以跨瀏覽器的方式來取得某個元素的參考,請使用<code>document.getelementById(aID
 >)</code> 方法,這個方法不僅可以在 IE 5.0+ 和 Mozilla 上正常運作,它還是 DOM Level 1 的規範
 >
180    </p>
181    <p>
182      Mozilla 不能夠以 <code>document.elementName</code> 或是元素名稱來存取元素,
 >而 IE 可以(名為<em>全域名稱污染</em>)。 Mozilla 也不支援 Netscape 4 的 <code>docum
 >ent.layers</code> 和 IE 的 <code>document.all</code>。 而 <code>docum
 >ent.getElementById</code> 可以讓你取得某個元素,你還可以使用 <code>document.layers
 ></code> 和 <code>document.all</code> 指定一個 tag 名稱來取得一串文件元素,像是全部的 <c
 >ode>&lt;div&gt;</code> 元素。
183    </p>
184    <p>
185      在 W3C DOM Level 1 的規範中,JavaScript 應透過 <code>getElementsByTa
 >gName()</code> 取得相同標籤(tag)下的元素。這個方法會傳回一個陣列,同時這個方法也可以呼叫 <code>docu
 >ment</code> 或其他節點下的元素。如果你想取得,你可以透過 <code>getElementsByTagName("*"
 >)</code> 來取得整個 DOM 下的元素陣列。
186    </p>
187    <p>
188      就如下面表格一,DOM Level 1 經常被用來移動或者隱藏元素。當一個 HTML 元素可以隨意移動時,Netsca
 >pe 4 所使用的 <code>&lt;layer&gt;</code> 標籤就不被 Mozilla 支援,你可以使用如同 Int
 >ernet Explorer 的 <code>&lt;div&gt;</code>。根據 HTML 規範,這個標籤可以在 Mozi
 >lla 正常運行的。
189    </p>
190    <p>
191      &nbsp;
192    </p>
193    <p>
194      表格一 - 用於存取元素的方法
195    </p>
196    <table class="standard-table">
197      <tbody>
198        <tr>
199          <th>
200            方法
201          </th>
202          <th>
203            描述
204          </th>
205        </tr>
206        <tr>
207          <td>
208            document.getElementById( aId )
209          </td>
210          <td>
211            回傳文件中 ID 值為 aId 元素的。
212          </td>
213        </tr>
214        <tr>
215          <td>
216            document.getElementsByTagName( aTagName )
217          </td>
218          <td>
219            回傳文件中標籤名稱為 aTagName 的元素
220          </td>
221        </tr>
222      </tbody>
223    </table>
224    <h4 id=".E7.B8.B1.E6.A9.AB_DOM" name=".E7.B8.B1.E6.A9.AB_DOM"
 >>
225      縱橫 DOM
226    </h4>
227    <p>
228      Mozilla 支援透過 JavaScript 存取 DOM 樹狀圖的 W3C DOM APIs (詳見表格二)。透過
 >他可以讀取文件中的任何一個節點。Internet Explorer 也支援這個 APIs,同時也支援一些過時的方法,像是 <cod
 >e>children</code>。
229    </p>
230    <p>
231      &nbsp;
232    </p>
233    <p>
234      表格二 - 縱橫 DOM 的方法
235    </p>
236    <table class="standard-table">
237      <tbody>
238        <tr>
239          <th>
240            屬性/方法
241          </th>
242          <th>
243            描述
244          </th>
245        </tr>
246        <tr>
247          <td>
248            childNodes
249          </td>
250          <td>
251            回傳一個該元素下所有子節點的陣列。
252          </td>
253        </tr>
254        <tr>
255          <td>
256            firstChild
257          </td>
258          <td>
259            回傳該元素下的第一個子節點。
260          </td>
261        </tr>
262        <tr>
263          <td>
264            getAttribute( aAttributeName )
265          </td>
266          <td>
267            回傳 aAttributeName 的值。
268          </td>
269        </tr>
270        <tr>
271          <td>
272            hasAttribute( aAttributeName )
273          </td>
274          <td>
275            回傳一個關於節點 aAttributeName 是否有屬性的布林值。
276          </td>
277        </tr>
278        <tr>
279          <td>
280            hasChildNodes()
281          </td>
282          <td>
283            回傳一個關於該節點下是否仍含有子節點的布林值。
284          </td>
285        </tr>
286        <tr>
287          <td>
288            lastChild
289          </td>
290          <td>
291            回傳該元素下的最後一個子節點。
292          </td>
293        </tr>
294        <tr>
295          <td>
296            nextSibling
297          </td>
298          <td>
299            回傳當下節點後的下一個節點。
300          </td>
301        </tr>
302        <tr>
303          <td>
304            nodeName
305          </td>
306          <td>
307            回傳一個當下節點名稱的字串。
308          </td>
309        </tr>
310        <tr>
311          <td>
312            nodeType
313          </td>
314          <td>
315            回傳該節點的類型。
316            <table>
317              <tbody>
318                <tr>
319                  <th>
320                    數值
321                  </th>
322                  <th>
323                    描述
324                  </th>
325                </tr>
326                <tr>
327                  <td>
328                    1
329                  </td>
330                  <td>
331                    元素節點(Element Node)
332                  </td>
333                </tr>
334                <tr>
335                  <td>
336                    2
337                  </td>
338                  <td>
339                    屬性節點(Attribute Node)
340                  </td>
341                </tr>
342                <tr>
343                  <td>
344                    3
345                  </td>
346                  <td>
347                    文字節點(Text Node)
348                  </td>
349                </tr>
350                <tr>
351                  <td>
352                    4
353                  </td>
354                  <td>
355                    CDATA 段落節點(CDATA Section Node)
356                  </td>
357                </tr>
358                <tr>
359                  <td>
360                    5
361                  </td>
362                  <td>
363                    實體參引節點(Entity Reference Node)
364                  </td>
365                </tr>
366                <tr>
367                  <td>
368                    6
369                  </td>
370                  <td>
371                    實體節點(Entity Node)
372                  </td>
373                </tr>
374                <tr>
375                  <td>
376                    7
377                  </td>
378                  <td>
379                    處理指令(Processing Instruction Node)
380                  </td>
381                </tr>
382                <tr>
383                  <td>
384                    8
385                  </td>
386                  <td>
387                    註解節點(Comment Node)
388                  </td>
389                </tr>
390                <tr>
391                  <td>
392                    9
393                  </td>
394                  <td>
395                    文件節點(Document Node)
396                  </td>
397                </tr>
398                <tr>
399                  <td>
400                    10
401                  </td>
402                  <td>
403                    文件型別(Document Type Node)
404                  </td>
405                </tr>
406                <tr>
407                  <td>
408                    11
409                  </td>
410                  <td>
411                    文件片段(Document Fragment Node)
412                  </td>
413                </tr>
414                <tr>
415                  <td>
416                    12
417                  </td>
418                  <td>
419                    記法節點(Notation Node)
420                  </td>
421                </tr>
422              </tbody>
423            </table>
424            <pre class="eval">
425     <em>*譯注:目前參照 <a class="external" href="http://xml.ascc.net/z
 >h/utf-8/gloss.html">中央研究院計算中心曾士熊先生提供 SGML 名詞部份的翻譯內容</a>,其中並不包含「文件
 >片段(Document Fragment Node)」</em>
426</pre>
427          </td>
428        </tr>
429        <tr>
430          <td>
431            nodeValue
432          </td>
433          <td>
434            回傳當下節點的值。當節點中存在文字或文段,如文字和註解節點時,此方法會回傳他們的字串值。當節點為屬性節點(
 >attribute node)時,此方法將會回傳屬性值。除此之外,其餘的節點類型都會回傳 <code>null</code>。&n
 >bsp;
435          </td>
436        </tr>
437        <tr>
438          <td>
439            ownerDocument
440          </td>
441          <td>
442            回傳存在於當下節點的 <code>document</code> 物件。
443          </td>
444        </tr>
445        <tr>
446          <td>
447            parentNode
448          </td>
449          <td>
450            回傳當前節點的父節點。
451          </td>
452        </tr>
453        <tr>
454          <td>
455            previousSibling
456          </td>
457          <td>
458            回傳在該節點之前的節點。
459          </td>
460        </tr>
461        <tr>
462          <td>
463            removeAttribute( aName )
464          </td>
465          <td>
466            從當前的節點中移除 aName 屬性。
467          </td>
468        </tr>
469        <tr>
470          <td>
471            setAttribute( aName, aValue )
472          </td>
473          <td>
474            將 aName 屬性的值更改為 aValue。
475          </td>
476        </tr>
477      </tbody>
478    </table>
479    <p>
480      在 Internet Explorer 中有個不正常的怪癖(quirk),上表中有許多方法會略過自動產生的空白文字節點
 >。請注意,在 Mozilla 中這些並不會略過,所以有時候你必須區別開這些節點。每一個節點都有它的 <code>nodeType<
 >/code> 屬性。舉例來說,元素節點的類型是 1;而文字節點是 3、註解節點是 8(詳見表格二 - nodeType)。最好區別
 >開這些空白文字節點的辦法就是指處裡節點類型為 1 的子節點:
481    </p>
482    <pre>
483HTML部分: 
484  &lt;div id="foo"&gt;
485    &lt;span&gt;Test&lt;/span&gt;
486  &lt;/div&gt;
487 
488JavaScript部分: 
489  var myDiv = document.getElementById("foo"); 
490  var myChildren = myXMLDoc.childNodes; 
491  for (var i = 0; i &lt; myChildren.length; i++) { 
492    if (myChildren[i].nodeType == 1){ 
493      // 元素節點
494    }
495  }
496</pre>
497    <h4 id=".E5.85.A7.E5.AE.B9.E5.BB.BA.E7.AB.8B.E5.8F.8A.E8.99.9
 >5.E7.90.86" name=".E5.85.A7.E5.AE.B9.E5.BB.BA.E7.AB.8B.E5.8F.8A.E
 >8.99.95.E7.90.86">
498      內容建立及處理
499    </h4>
500    <p>
501      Mozilla 支援一些比較舊的動態增加 DOM 內容的方法,像是
502    </p>
503    <pre class="eval">
504<code>document.write</code>, <code>document.open</code> 和 documen
 >t.close。 
505</pre>
506    <p>
507      Mozilla 也支援 Internet Explorer 的 <code>innerHTML</code> 方法,這
 >個方法可以用來處理所有的節點。即使這個方法無效,Mozilla 還支援 <code>outerHTML</code> (這個方法包
 >含該元素,它與 <code>innerHTML</code> 有一定的差異) 和 <code>innerText</code> (
 >用於存取或修改節點的文字,功能與 Mozilla 裡的 <code>textContent</code> 差不多)。
508    </p>
509    <p>
510      Internet Explorer 中存在著許多不規範也不被 Mozilla 的內容處理方法,包括回傳參數、插入數值和
 >插入元素到節點中。像是 <code>getAdjacentElement</code>、 <code>insertAdjacent
 >HTML</code> 等。表格三中敘述了 W3C 定義的內容處理方法,它們適用於所有的 DOM 節點。
511    </p>
512    <p>
513      &nbsp;
514    </p>
515    <p>
516      表格三 - Mozilla 使用的內容處理方法
517    </p>
518    <table class="standard-table">
519      <tbody>
520        <tr>
521          <th>
522            方法
523          </th>
524          <th>
525            描述
526          </th>
527        </tr>
528        <tr>
529          <td>
530            appendChild( aNode )
531          </td>
532          <td>
533            建立一個新的子節點,並回傳新子節點的參照值。
534          </td>
535        </tr>
536        <tr>
537          <td>
538            cloneNode( aDeep )
539          </td>
540          <td>
541            複製該節點並且傳回複製後的節點。如果 aDeep 的值「成立」,那個這個方法會把該節點下所有的子節點複製到
 >新的節點。
542          </td>
543        </tr>
544        <tr>
545          <td>
546            createElement( aTagName )
547          </td>
548          <td>
549            建立並回傳一個沒有母節點(即上層沒有節點)的節點。該節點的名稱為 aTagName 。
550          </td>
551        </tr>
552        <tr>
553          <td>
554            createTextNode( aTextValue )
555          </td>
556          <td>
557            建立並回傳一個沒有母節點的文字節點,該節點值為 aTextValue。
558          </td>
559        </tr>
560        <tr>
561          <td>
562            insertBefore( aNewNode, aChildNode )
563          </td>
564          <td>
565            把 aNewNode 插入到 aChildNode 之前。(兩者都必須在當前的節點下)
566          </td>
567        </tr>
568        <tr>
569          <td>
570            removeChild( aChildNode )
571          </td>
572          <td>
573            移除 aChildNode 並回傳一個參照值。
574          </td>
575        </tr>
576        <tr>
577          <td>
578            replaceChild( aNewNode, aChildNode )
579          </td>
580          <td>
581            用 aChildNode 替代 aNewNode,並且回傳一個移除節點的參照值。
582          </td>
583        </tr>
584      </tbody>
585    </table>
586    <h4 id=".E6.96.87.E4.BB.B6.E7.89.87.E6.AE.B5" name=".E6.96.87
 >.E4.BB.B6.E7.89.87.E6.AE.B5">
587      文件片段
588    </h4>
589    <p>
590      因為效能的緣故,你可以在記憶體中創建 document 而非在現存的 DOM 上做動作。 DOM Level 1 Co
 >re 引入了 document fragments,這是一個輕量化的 document 且支援了部份既有可用的 document 
 >interface。舉例來說,他雖不支援&nbsp;<code>getElementById</code>&nbsp;但卻支援&n
 >bsp;<code>appendChild</code>&nbsp;。你可以很容易的按照現存的的 document 來創建 &nb
 >sp;document fragments 。
591    </p>
592    <p>
593      在 Mozilla 中,要創造新的&nbsp;document fragments 只需要使用&nbsp;<code>
 >document.createDocumentFragment()</code>,之後你便可取得一個空的 document fra
 >gment。
594    </p>
595    <p>
596      Internet Explorer 在實做 document fragment 上並未按照標準的 W3C standa
 >rd 。倘若你在 IE 中調用此功能,只能拿回一個 regular document 而非 document fragment。
597    </p>
598    <h3 id="JavaScript_.E5.B7.AE.E7.95.B0" name="JavaScript_.E5.B
 >7.AE.E7.95.B0">
599      JavaScript 差異
600    </h3>
601    <p>
602      Mozilla 與 Internet Explorer 之間最大的差別就是 JavaScript。 這些問題通常存在於
 >瀏覽器所公佈的 JavaScript APIs,像是 DOM hooks。 這兩種瀏覽器各自佔有一部份 JavaScript 核心
 >的差異性;這些遇到的問題通常也和時間有關。
603    </p>
604    <h4 id="JavaScript_.E6.97.A5.E6.9C.9F.E5.B7.AE.E7.95.B0" name
 >="JavaScript_.E6.97.A5.E6.9C.9F.E5.B7.AE.E7.95.B0">
605      JavaScript 日期差異
606    </h4>
607    <p>
608      <code>getYear</code> 這個函數是唯一 <code>Date</code> 中的不同點。根據 ECM
 >AScript specification(JavaScript 也遵循這個 specification),這個函式不是 Y2k-
 >compliant 。假設在 2004 年時執行 <code>new Date().getYear()</code>,它會回傳 "
 >104" 。根據 ECMAScript specification , <code>getYear</code> 會回傳年份減去 
 >1900,原意是回傳 "98" 來表示 1998。<code>getYear</code> 在 ECMAScript Versio
 >n 3 時被 <code>getFullYear()</code> 所代替。 當 mozilla 繼續遵循規範時,Internet
 > Explorer 已經把 <code>getYear()</code> 修改成像 <code>getFullYear()</co
 >de> 的工作方式,使它成為Y2k-compliant。
609    </p>
610    <h4 id="JavaScript_.E5.9F.B7.E8.A1.8C.E5.B7.AE.E7.95.B0" name
 >="JavaScript_.E5.9F.B7.E8.A1.8C.E5.B7.AE.E7.95.B0">
611      JavaScript 執行差異
612    </h4>
613    <p>
614      不同的瀏覽器使用不同的方法執行 JavaScript。舉例來說,下面的程式碼假設當 <code>script</cod
 >e> 執行的時候 <code>div</code> 節點已經存在於 DOM:
615    </p>
616    <pre>
617...
618&lt;div id="foo"&gt;Loading...&lt;/div&gt;
619 
620&lt;script&gt; 
621  document.getElementById("foo").innerHTML = "Done."; 
622&lt;/script&gt; 
623</pre>
624    <p>
625      無論如何,這都不能夠確定元素(elements)是否存在。要確認所有的元素都存在,您應該將 <code>onload<
 >/code> 事件擺在 <code>&lt;body&gt;</code> 標籤:
626    </p>
627    <pre>
628&lt;body onload="doFinish()"&gt; 
629 
630&lt;div id="foo"&gt;Loading...&lt;/div&gt; 
631 
632&lt;script&gt; 
633  function doFinish() { 
634    var element = document.getElementById("foo");
635          element.innerHTML = "Done."; 
636  }
637&lt;/script&gt; 
638... 
639</pre>
640    <p>
641      像這樣與時間相關的問題也和硬體有關-較慢的系統可以顯示出較快的系統中隱藏的臭蟲(bugs)。 <code>window
 >.open</code> 是一個具體的例子: &nbsp;
642    </p>
643    <pre>
644&lt;script&gt; 
645  function doOpenWindow(){ 
646    var myWindow = window.open("about:blank"); 
647    myWindow.location.href = "http://www.ibm.com"; 
648  }
649&lt;/script&gt; 
650</pre>
651    <p>
652      這段程式碼的問題是: <code>window.open</code> 的時程是非同步的-它不會阻擋 JavaScri
 >pt 的執行,直到所有的新視窗載入完畢。 因此,您應該在在載入新視窗完畢後才執行 <code>window.open</code>
 > 。 您可以透過 在新視窗中利用 <code>onload</code> 執行 <code>window.opener</code
 >> 來回到原本開啟新視窗的視窗(母體)。
653    </p>
654    <h4 id="JavaScript_.E7.94.A2.E7.94.9F.E4.B9.8B_HTML_.E5.B7.AE
 >.E7.95.B0" name="JavaScript_.E7.94.A2.E7.94.9F.E4.B9.8B_HTML_.E5.
 >B7.AE.E7.95.B0">
655      JavaScript 產生之 HTML 差異
656    </h4>
657    <p>
658      &nbsp; 在 JavaScript 中,我們可以透過 <code>document.write 來從字串產生 HT
 >ML 程式碼。但這有個值得注意的地方在於,要是你的內嵌碼中中含有</code>&nbsp;<code>&lt;script&gt;
 ></code> tag 會發生什麼事?當你的目標頁面處於 &lt;a href="#html_modes"&gt;strict r
 >endering mode&lt;/a&gt; 下時,它將會解析位於&nbsp;&nbsp;<code>&lt;script&gt
 >; 和&nbsp;</code>&nbsp;<code>&lt;/script&gt;</code>&nbsp; 中的內容。讓我們
 >看個例子:
659    </p>
660    <pre>
661&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 > 
662 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
663... 
664&lt;script&gt; 
665  document.write("&lt;script&gt;alert("Hello")&lt;/script&gt;") 
666&lt;/script&gt; 
667</pre>
668    <p>
669      &nbsp; 因為目前處於 strict mode 下,Mozilla 的解析器 (parser) 將會查看介於 <c
 >ode>&lt;script&gt;</code>&nbsp;和&nbsp;<code>&lt;/script&gt;中的內容。這
 >是因為在 strict mode 下解析器並不認得任何語言。但假如處在</code>&nbsp;quirks mode 下,解析器
 >卻識得 JavaScript 語法。而事實上,Internet Explorer 總是處於 quirks mode 下 - 它並不
 >真正之支援 XHTML。一個比較兩全其美的作法是將該內容分割成兩個部份:
670    </p>
671    <pre>
672&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 > 
673 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
674... 
675&lt;script&gt; 
676  document.write("&lt;script&gt;alert("Hello")&lt;/" + "script&gt
 >;") 
677&lt;/script&gt; 
678</pre>
679    <h4 id="JavaScript_.E9.99.A4.E9.8C.AF" name="JavaScript_.E9.9
 >9.A4.E9.8C.AF">
680      JavaScript 除錯
681    </h4>
682    <p>
683      Mozilla provides several ways to debug JavaScript-related i
 >ssues found in applications created for Internet Explorer. The fi
 >rst tool is the built-in JavaScript console, shown in Figure 1, w
 >here errors and warnings are logged. You can access it in Mozilla
 > by going to <strong>Tools -&gt; Web Development -&gt; JavaScript
 > Console</strong>, or in Firefox (the standalone browser product 
 >from Mozilla) at <strong>Tools -&gt; JavaScript Console</strong>.
684    </p>
685    <p>
686      &nbsp;
687    </p>
688    <p>
689      Figure 1. JavaScript console
690    </p>
691    <div>
692      <img alt="Javascript Console" fileid="0" src="File:zh_tw/Me
 >dia_Gallery/Migrationguide-jsconsole.jpg">
693    </div>
694    <p>
695      The JavaScript console can show the full log list or just e
 >rrors, warnings, and messages. The error message in Figure 1 says
 > that at aol.com, line 95 tries to access an undefined variable c
 >alled is_ns70. Clicking on the link will open Mozilla's internal 
 >view source window with the offending line highlighted.
696    </p>
697    <p>
698      The console also allows you to evaluate JavaScript. To eval
 >uate the entered JavaScript syntax, type in <code>1+1</code> into
 > the input field and press <strong>Evaluate</strong>, as Figure 2
 > shows.
699    </p>
700    <p>
701      &nbsp;
702    </p>
703    <p>
704      Figure 2. JavaScript console evaluating
705    </p>
706    <div>
707      <img alt="JavaScript Console evaluating" fileid="0" src="Fi
 >le:zh_tw/Media_Gallery/Migrationguide-jsconsole-eval.jpg">
708    </div>
709    <p>
710      Mozilla's JavaScript engine has built-in support for debugg
 >ing, and thus can provide powerful tools for JavaScript developer
 >s. Venkman, shown in Figure 3, is a powerful, cross-platform Java
 >Script debugger that integrates with Mozilla. It is usually bundl
 >ed with Mozilla releases; you can find it at <strong>Tools -&gt; 
 >Web Development -&gt; JavaScript Debugger</strong>. For Firefox, 
 >the debugger isn't bundled; instead, you can download and install
 > it from the <a class="external" href="http://www.mozilla.org/pro
 >jects/venkman/">Venkman Project Page</a>. You can also find tutor
 >ials at the development page, located at the <a class="external" 
 >href="http://www.hacksrus.com/%7Eginda/venkman/">Venkman Developm
 >ent Page</a>.
711    </p>
712    <p>
713      &nbsp;
714    </p>
715    <p>
716      Figure 3. Mozilla's JavaScript debugger
717    </p>
718    <div>
719      <img alt="Mozilla's JavaScript debugger" fileid="0" src="Fi
 >le:zh_tw/Media_Gallery/Migrationguide-venkman.jpg">
720    </div>
721    <p>
722      The JavaScript debugger can debug JavaScript running in the
 > Mozilla browser window. It supports such standard debugging feat
 >ures as breakpoint management, call stack inspection, and variabl
 >e/object inspection. All features are accessible through the user
 > interface or through the debugger's interactive console. With th
 >e console, you al can execute arbitrary JavaScript in the same sc
 >ope as the JavaScript currently being debugged.
723    </p>
724    <h3 id="CSS_.E5.B7.AE.E7.95.B0" name="CSS_.E5.B7.AE.E7.95.B0"
 >>
725      CSS 差異
726    </h3>
727    <p>
728      與 Internet Explorer 和其他的瀏覽器比較之下, Mozilla 擁有最強大的 Cascading S
 >tyle Sheets 4(即 CSS) 支援, 包含大部份的 CSS1、CSS2 和部份的 CSS3 。
729    </p>
730    <p>
731      對於下列敘述的問題, Mozilla 會在 JavaScript 控制台中發出警告。 如果您遇到了 CSS 的相關問題
 >,請確認 JavaScript 控制台。
732    </p>
733    <h4 id="CSS_.E6.AA.94.E7.84.A1.E6.B3.95.E5.A5.97.E7.94.A8.EF.
 >BC.9AMIME_Type_.E5.95.8F.E9.A1.8C" name="CSS_.E6.AA.94.E7.84.A1.E
 >6.B3.95.E5.A5.97.E7.94.A8.EF.BC.9AMIME_Type_.E5.95.8F.E9.A1.8C">
734      CSS 檔無法套用:MIME Type 問題
735    </h4>
736    <p>
737      CSS 定義的相關檔沒有被讀取是 CSS 的相關問題中最常見的。 這通常是伺服器將 CSS 檔案送出了錯誤的 MIME
 > Type 。 CSS 說明書 ( CSS specification ) 中提到:「 CSS 檔案應該被作為 text/css 
 >mimetype 。」 當網頁處於嚴格的規範模式 ( strict standards mode )時, Mozilla 將遵循並
 >只載入以 text/css 作為 mimetype 的 CSS 檔案。 在 Internet Explorer 中,無論 mime
 >type 是甚麼, CSS 檔案都會被載入。 當網頁的 doctype ( document type,檔案類型 ) 在網頁的開頭
 >被指定時,他們會進入嚴格的標準模式。 要解決這個問題,您可以修改正確的 mimetype 或移除 doctype。 我們會在下個章
 >節中討論更多關於 doctype。
738    </p>
739    <h4 id="CSS_.E5.96.AE.E4.BD.8D" name="CSS_.E5.96.AE.E4.BD.8D"
 >>
740      CSS 單位
741    </h4>
742    <p>
743      有很多網路應用程式都不在他們的 CSS 中加上單位,尤其是利用 JavaScript 設定 CSS 的時候。 當網頁不
 >執行在標準模式時,Mozilla 不會回報錯誤。 因為 Internet Explorer 並非真正的支援 XHTML ,它不在乎
 >有沒有具體的單位描述。 如果網頁處於嚴格的標準描述下,並且沒有使用單位,那麼 Mozilla 將忽略以下的 style :
744    </p>
745    <pre class="eval">
746&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 > 
747  "<span class="nowiki">http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr
 >ansitional.dtd</span>"&gt; 
748&lt;html&gt; 
749  &lt;body&gt; 
750    // works in strict mode 
751    &lt;div style="width:40<span class="boldcode">px</span>; bord
 >er:1px solid black;"&gt;
752      Text
753    &lt;/div&gt;
754 
755    // will fail in strict mode 
756    &lt;div style="width:40; border:1px solid black;"&gt;
757      Text
758    &lt;/div&gt;
759  &lt;/body&gt; 
760&lt;/html&gt; 
761</pre>
762    <p>
763      因為上述的範例中有一個規範的 doctype (檔案類型),所以網頁將執行在嚴格的標準模式下。 第一個 div 標籤會
 >套用 40 像素的寬度,因為它有單位,但是第二個 div 標籤將不會套用指定的寬度,因此會套用預設的 100% 寬度。 透過 Ja
 >vaScript 設定寬度將會得到一樣的結果。
764    </p>
765    <h4 id="JavaScript_.E5.8F.8A_CSS" name="JavaScript_.E5.8F.8A_
 >CSS">
766      JavaScript 及 CSS
767    </h4>
768    <p>
769      既然 Mozilla 支援 CSS 標準,它同時也支援透過 JavaScript 設定 CSS 的 CSS DOM。 
 >您可以透過 <code>style</code> 標籤讀取、移除和修改 CSS 的屬性規則:
770    </p>
771    <pre>
772&lt;div id="myDiv" border:1px solid black;"&gt;
773  Text
774&lt;/div&gt;
775 
776&lt;script&gt; 
777  var myElm = document.getElementById("myDiv"); 
778  myElm.style.width = "40px"; 
779&lt;/script&gt; 
780</pre>
781    <p>
782      您可以利用這種方式來延伸 css 的屬性。再次強調,如果網頁處於標準模式,您必須加上單位,否則 Mozilla 將忽略
 >指令。 當您要查詢變數時,透過 <code>.style.width</code> 來達成,在 Mozilla 和 Interne
 >t Explorer 中,傳回的值中會包含單位,也就是傳回了一串字串。 您可以利用 <code>parseFloat("40px"
 >)</code> 將字串轉換成數值。
783    </p>
784    <h4 id="CSS_.E6.BA.A2.E5.87.BA.E9.83.A8.E5.88.86.EF.BC.88over
 >flow.EF.BC.89.E5.B7.AE.E7.95.B0" name="CSS_.E6.BA.A2.E5.87.BA.E9.
 >83.A8.E5.88.86.EF.BC.88overflow.EF.BC.89.E5.B7.AE.E7.95.B0">
785      CSS 溢出部分(overflow)差異
786    </h4>
787    <p>
788      CSS 增加了溢出(overflow)的概念,它允許您定義如何處理溢出部份;舉例來說,當 <code>div</cod
 >e> 內容指定的高度高於 <code>div</code> 的高度時, CSS 規範(CSS standard)中定義了如果程式中
 >沒有定義溢出的相關設定, <code>div</code> 的內容將會溢出。 但是 Internet Explorer 仍然不會遵
 >循相關規範,並且會為了留住內容而擴張 <code>div</code> 的高度。 下面的例子表現了這個差異性:
789    </p>
790    <pre>
791&lt;div style="height:100px; border: 1px solid black;"&gt; 
792  &lt;div style="height:150px; border: 1px solid red; margin:10px
 >;"&gt;
793    a
794  &lt;/div&gt; 
795&lt;/div&gt; 
796</pre>
797    <p>
798      就像你在圖片四看到的,Mozilla 依照了 CSS 規範做出了判斷。 規範中提到了在這個情況下,因為 <code>d
 >iv</code> 的內部高過它的母體,所以它溢出到了按鈕的地方。 如果您這麼愛 Internet Explorer 的行為,就不
 >要在母體(即 <code>div</code> )加上 height 這個屬性。
799    </p>
800    <p>
801      &nbsp;
802    </p>
803    <p>
804      圖片四:div溢出部份
805    </p>
806    <div>
807      <img alt="DIVdiv溢出部份" fileid="0" src="File:zh_tw/Media_Gall
 >ery/Migrationguide-overflow.jpg">
808    </div>
809    <h4 id="hover.EF.BC.88.E6.BB.91.E9.BC.A0.E7.A7.BB.E4.B8.8A.E6
 >.9F.90.E5.85.83.E7.B4.A0.EF.BC.89.E6.95.88.E6.9E.9C.E5.B7.AE.E7.9
 >5.B0" name="hover.EF.BC.88.E6.BB.91.E9.BC.A0.E7.A7.BB.E4.B8.8A.E6
 >.9F.90.E5.85.83.E7.B4.A0.EF.BC.89.E6.95.88.E6.9E.9C.E5.B7.AE.E7.9
 >5.B0">
810      hover(滑鼠移上某元素)效果差異
811    </h4>
812    <p>
813      在一些網站上存在著 Internet Explorer 的非標準 CSS hover。 在 Mozilla 中,通常當
 >滑鼠滑入的時候,利用改變 Text Style 來顯示它自己。 這是因為 <code>a:hover</code> ,在 Inte
 >rnet Explorer 中的 CSS 解析器對應 HTML 中錨點(anchor)的是 <code>&lt;a href=""
 > /&gt;</code>,而不是 <code>&lt;a name="" /&gt;</code> 由於作者將錨點設定標記(an
 >chor-setting markup)套用進了區塊,所以造成了文字的顏色變化:
814    </p>
815    <pre>
816CSS: 
817  a:hover {color:green;} 
818 
819HTML: 
820  &lt;a href="foo.com"&gt;This text should turn green when you ho
 >ver over it.&lt;/a&gt;
821 
822  &lt;a name="anchor-name"&gt; 
823    This text should change color when hovered over, but doesn't 
 >in Internet Explorer. 
824  &lt;/a&gt; 
825</pre>
826    <p>
827      Mozilla 遵循 CSS 說明書 ( CSS specification )並且在這個例子中會把顏色變成綠色。 您
 >可以使用這兩種方法來讓 Mozilla 擁有像 Internet Explorer 的效果,並且當滑鼠滑入時不會改變文字的顏色:
828    </p>
829    <ul>
830      <li>其一,您可以把 CSS 的規則改成 <code>a:link:hover {color:green;}</co
 >de>,這樣只會當該元素是超連結(有 <code>href</code> 屬性),才會改變顏色。
831      </li>
832      <li>其二,您可以修改標記,並在文字的開頭之前關閉已打開的 <code>&lt;a /&gt;</code> -採用
 >這個方法的話,錨點(anchor)會是有效的。
833      </li>
834    </ul>
835    <h3 id="Quirks_.E6.A8.A1.E5.BC.8F.E3.80.81.E6.A8.99.E6.BA.96.
 >E6.A8.A1.E5.BC.8F" name="Quirks_.E6.A8.A1.E5.BC.8F.E3.80.81.E6.A8
 >.99.E6.BA.96.E6.A8.A1.E5.BC.8F">
836      Quirks 模式、標準模式
837    </h3>
838    <p>
839      &nbsp; 在舊的瀏覽器上 (如 Internet Explorer 4),網頁可能會被以一種被不完全正確的方式渲染
 >網頁。當 Mozilla 企圖成為一個和標準相容的瀏覽器的情況下,它採取三種不同方式來處理在這些不太合標準的渲染方式下開發的既有網
 >頁。你可以在 &nbsp;Mozilla 瀏覽器中的 &nbsp;<strong>View -&gt; Page Info</st
 >rong> (或 Ctrl-i) 下查看目前處於哪種模式。而該採取怎樣的模式則取決於該頁面的 doctype。
840    </p>
841    <p>
842      &nbsp; Doctypes (document type declarations) 看起來是:
843    </p>
844    <p>
845      <code>&lt;!DOCTYPE HTML PUBLIC <span style="color:blue;">"-
 >//W3C//DTD HTML 4.01 Transitional//EN"</span> <span style="color:
 >green;">"<span class="nowiki">http://www.w3.org/TR/html4/loose.dt
 >d</span>"</span>&gt;</code>
846    </p>
847    <p>
848      &nbsp; 藍色部份稱為 public identifier,而綠色部份是為 system identifier (
 >以 URI 方式描述)。
849    </p>
850    <h4 id=".E6.A8.99.E6.BA.96.E6.A8.A1.E5.BC.8F" name=".E6.A8.99
 >.E6.BA.96.E6.A8.A1.E5.BC.8F">
851      Standards Mode (標準模式)
852    </h4>
853    <p>
854      &nbsp; Standards mode 是最嚴謹的渲染模式。它將完全按照 W3C HTML 以及 CSS spec
 >ification 來處理,並且不支援任何除此之外的寫法。 Mozilla 會在以下情形中使用此模式:
855    </p>
856    <ul>
857      <li>當頁面是以&nbsp;<code>text/xml</code> mimetype 或任何其他 XML 及&n
 >bsp;XHTML mimetype 發送時
858      </li>
859      <li>採用除了&nbsp;IBM doctype 之外的任何&nbsp;"DOCTYPE HTML SYSTEM" 
 >doctype (例如&nbsp;<code>&lt;!DOCTYPE HTML SYSTEM "<span class="now
 >iki">http://www.w3.org/TR/REC-html40/strict.dtd</span>"&gt;</code
 >>)
860      </li>
861      <li>不知名的 doctypes 或沒有提供 DTDs 的 doctypes&nbsp;
862      </li>
863    </ul>
864    <h4 id=".E8.BF.91.E4.B9.8E.E6.A8.99.E6.BA.96.E6.A8.A1.E5.BC.8
 >F" name=".E8.BF.91.E4.B9.8E.E6.A8.99.E6.BA.96.E6.A8.A1.E5.BC.8F">
865      Almost Standards mode (近乎標準模式)
866    </h4>
867    <p>
868      Mozilla introduced almost standards mode for one reason: a 
 >section in the CSS 2 specification breaks designs based on a prec
 >ise layout of small images in table cells. Instead of forming one
 > image to the user, each small image ends up with a gap next to i
 >t. The old IBM homepage shown in Figure 5 offers an example.
869    </p>
870    <p>
871      &nbsp;
872    </p>
873    <p>
874      Figure 5. Image gap
875    </p>
876    <div>
877      <img alt="Image Gap" fileid="0" src="File:zh_tw/Media_Galle
 >ry/Migrationguide-imagegap.jpg">
878    </div>
879    <p>
880      Almost standards mode behaves almost exactly as standards m
 >ode, except when it comes to an image gap issue. The issue occurs
 > often on standards-compliant pages and causes them to display in
 >correctly.
881    </p>
882    <p>
883      Mozilla uses almost standards mode for the following condit
 >ions:
884    </p>
885    <ul>
886      <li>For any "loose" doctype (for example, <code>&lt;!DOCTYP
 >E HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&gt;</code>
 >, <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio
 >nal//EN" "<span class="nowiki">http://www.w3.org/TR/html4/loose.d
 >td</span>"&gt;</code>)
887      </li>
888      <li>For the IBM doctype (<code>&lt;!DOCTYPE html SYSTEM "<s
 >pan class="nowiki">http://www.ibm.com/data/dtd/v11/ibmxhtml1-tran
 >sitional.dtd</span>"&gt;</code>)
889      </li>
890    </ul>
891    <p>
892      You can read more about the <a href="/zh_tw/Images,_Tables,
 >_and_Mysterious_Gaps" title="zh_tw/Images,_Tables,_and_Mysterious
 >_Gaps">image gap issue</a>.
893    </p>
894    <h4 id="Quirks_.E6.A8.A1.E5.BC.8F" name="Quirks_.E6.A8.A1.E5.
 >BC.8F">
895      Quirks Mode (怪癖模式)
896    </h4>
897    <p>
898      &nbsp; 以目前情況來說,網路上充斥著許多不完全符合標準規範的網頁。這些不合標準的網頁,卻和有著 bug 的瀏覽器
 >配合的很好。舉例來說,在以前Netscape 居市場領導地位時,便有著 bug。而 IE 誕生石,為了能和那些網頁相容,「繼承」了
 >這些 bug 們。對於在之後才來到市場上的新一代瀏覽器們來說,這些 bug 們便被稱為&nbsp;<strong>quirks</
 >strong>&nbsp;(但他們大都能向下相容於這些網頁)。值得注意的是,因為這些既有網頁並非按照規格設計,所以新瀏覽器在渲染時
 >得花上更多時間。不幸的是,絕大多數的網頁都有賴新瀏覽器們以此模式渲染。
899    </p>
900    <p>
901      Mozilla 會在以下情況使用此模式:
902    </p>
903    <ul>
904      <li>當網頁不指明 doctype 時
905      </li>
906      <li>當 doctypes 沒有 system identifier 時(例如&nbsp;<code>&lt;!DO
 >CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;</c
 >ode>)
907      </li>
908    </ul>
909    <p>
910      For further reading, check out: <a class="external" href="h
 >ttp://www.mozilla.org/docs/web-developer/quirks/quirklist.html">L
 >ist of Quirks</a> and <a class="external" href="http://www.mozill
 >a.org/docs/web-developer/quirks/doctypes.html">List of Doctypes a
 >nd What Modes They Cause</a>.
911    </p>
912    <p>
913      &nbsp;
914    </p>
915    <h3 id=".E4.BA.8B.E4.BB.B6.E5.B7.AE.E7.95.B0" name=".E4.BA.8B
 >.E4.BB.B6.E5.B7.AE.E7.95.B0">
916      事件差異
917    </h3>
918    <p>
919      Mozilla and Internet Explorer are almost completely differe
 >nt in the area of events. The Mozilla event model follows the W3C
 > and Netscape model. In Internet Explorer, if a function is calle
 >d from an event, it can access the <code>event</code> object thro
 >ugh <code>window.event</code>. Mozilla passes an <code>event</cod
 >e> object to event handlers. They must specifically pass the obje
 >ct on to the function called through an argument. A cross-browser
 > event handling example follows:
920    </p>
921    <pre>
922&lt;div onclick="handleEvent(event)"&gt;Click me!&lt;/div&gt; 
923 
924&lt;script&gt; 
925  function handleEvent(aEvent) { 
926    // if aEvent is null, means the Internet Explorer event model
 >
927    // so get window.event. 
928    var myEvent = aEvent ? aEvent : window.event; 
929  }
930&lt;/script&gt; 
931</pre>
932    <p>
933      The properties and functions that the event object exposes 
 >are also often named differently between Mozilla and Internet Exp
 >lorer, as Table 4 shows.
934    </p>
935    <p>
936      &nbsp;
937    </p>
938    <p>
939      Table 4. Event properties differences between Mozilla and I
 >nternet Explorer
940    </p>
941    <table class="standard-table">
942      <tbody>
943        <tr>
944          <th>
945            Internet Explorer Name
946          </th>
947          <th>
948            Mozilla Name
949          </th>
950          <th>
951            Description
952          </th>
953        </tr>
954        <tr>
955          <td>
956            altKey
957          </td>
958          <td>
959            altKey
960          </td>
961          <td>
962            Boolean property that returns whether the alt key was
 > pressed during the event.
963          </td>
964        </tr>
965        <tr>
966          <td>
967            cancelBubble
968          </td>
969          <td>
970            stopPropagation()
971          </td>
972          <td>
973            Used to stop the event from bubbling farther up the t
 >ree.
974          </td>
975        </tr>
976        <tr>
977          <td>
978            clientX
979          </td>
980          <td>
981            clientX
982          </td>
983          <td>
984            The X coordinate of the event, in relation to the cli
 >ent.
985          </td>
986        </tr>
987        <tr>
988          <td>
989            clientY
990          </td>
991          <td>
992            clientY
993          </td>
994          <td>
995            The Y coordinate of the event, in relation to the cli
 >ent.
996          </td>
997        </tr>
998        <tr>
999          <td>
1000            ctrlKey
1001          </td>
1002          <td>
1003            ctrlKey
1004          </td>
1005          <td>
1006            Boolean property that returns whether the Ctrl key wa
 >s pressed during the event.
1007          </td>
1008        </tr>
1009        <tr>
1010          <td>
1011            fromElement
1012          </td>
1013          <td>
1014            relatedTarget
1015          </td>
1016          <td>
1017            For mouse events, this is the element from which the 
 >mouse moved away.
1018          </td>
1019        </tr>
1020        <tr>
1021          <td>
1022            keyCode
1023          </td>
1024          <td>
1025            keyCode
1026          </td>
1027          <td>
1028            For keyboard events, this is a number representing th
 >e key that was pressed. It is 0 for mouse events.
1029          </td>
1030        </tr>
1031        <tr>
1032          <td>
1033            returnValue
1034          </td>
1035          <td>
1036            preventDefault()
1037          </td>
1038          <td>
1039            Used to prevent the event's default action from occur
 >ring.
1040          </td>
1041        </tr>
1042        <tr>
1043          <td>
1044            screenX
1045          </td>
1046          <td>
1047            screenX
1048          </td>
1049          <td>
1050            The X coordinate of the event, in relation to the scr
 >een.
1051          </td>
1052        </tr>
1053        <tr>
1054          <td>
1055            screenX
1056          </td>
1057          <td>
1058            screenY
1059          </td>
1060          <td>
1061            The Y coordinate of the event, in relation to the scr
 >een.
1062          </td>
1063        </tr>
1064        <tr>
1065          <td>
1066            shiftKey
1067          </td>
1068          <td>
1069            shiftKey
1070          </td>
1071          <td>
1072            Boolean property that returns whether the Shift key w
 >as pressed during the event.
1073          </td>
1074        </tr>
1075        <tr>
1076          <td>
1077            srcElement
1078          </td>
1079          <td>
1080            target
1081          </td>
1082          <td>
1083            The element to which the event was originally dispatc
 >hed.
1084          </td>
1085        </tr>
1086        <tr>
1087          <td>
1088            toElement
1089          </td>
1090          <td>
1091            currentTarget
1092          </td>
1093          <td>
1094            For mouse events, this is the element to which the mo
 >use moved.
1095          </td>
1096        </tr>
1097        <tr>
1098          <td>
1099            type
1100          </td>
1101          <td>
1102            type
1103          </td>
1104          <td>
1105            Returns the name of the event.
1106          </td>
1107        </tr>
1108      </tbody>
1109    </table>
1110    <h4 id=".E5.8A.A0.E4.B8.8A.E4.BA.8B.E4.BB.B6.E6.8E.A7.E5.88.B
 >6.E5.BC.8F" name=".E5.8A.A0.E4.B8.8A.E4.BA.8B.E4.BB.B6.E6.8E.A7.E
 >5.88.B6.E5.BC.8F">
1111      加上事件控制式
1112    </h4>
1113    <p>
1114      Mozilla supports two ways to attach events through JavaScri
 >pt. The first, supported by all browsers, sets event properties d
 >irectly on objects. To set a <code>click</code> event handler, a 
 >function reference is passed to the object's <code>onclick</code>
 > property:
1115    </p>
1116    <pre>
1117&lt;div id="myDiv"&gt;Click me!&lt;/div&gt;
1118 
1119&lt;script&gt;
1120  function handleEvent(aEvent) {
1121    // if aEvent is null, means the Internet Explorer event model
 >,
1122    // so get window.event.
1123    var myEvent = aEvent ? aEvent : window.event;
1124  }
1125 
1126  function onPageLoad(){
1127    document.getElementById("myDiv").onclick = handleEvent;
1128  } 
1129&lt;/script&gt;
1130</pre>
1131    <p>
1132      Mozilla fully supports the W3C standard way of attaching li
 >steners to DOM nodes. You use the <code>addEventListener()</code>
 > and <code>removeEventListener()</code> methods, and have the ben
 >efit of being able to set multiple listeners for the same event t
 >ype. Both methods require three parameters: the event type, a fun
 >ction reference, and a boolean denoting whether the listener shou
 >ld catch events in their capture phase. If the boolean is set to 
 >false, it will only catch bubbling events. W3C events have three 
 >phases: capturing, at target, and bubbling. Every event object ha
 >s an <code>eventPhase</code> attribute indicating the phase numer
 >ically (0 indexed). Every time you trigger an event, the event st
 >arts at the DOM's outermost element, the element at the top of th
 >e DOM tree. It then walks the DOM using the most direct route tow
 >ard the target, which is the capturing phase. When the event reac
 >hes the target, the event is in the target phase. &nbsp;After arr
 >iving at the target, it walks up the DOM tree back to the outermo
 >st node; this is <strong>bubbling</strong>. Internet Explorer's e
 >vent model only has the bubbling phase; therefore, setting the th
 >ird parameter to false results in Internet Explorer-like behavior
 >:
1133    </p>
1134    <pre>
1135&lt;div id="myDiv"&gt;Click me!&lt;/div&gt; 
1136 
1137&lt;script&gt; 
1138 
1139  function handleEvent(aEvent) {
1140    // if aEvent is null, it is the Internet Explorer event model
 >,
1141    // so get window.event.
1142    var myEvent = aEvent ? aEvent : window.event;
1143  }
1144 
1145  function onPageLoad() {
1146    var element = document.getElementById("myDiv");
1147    element.addEventListener("click", handleEvent, false);
1148  }
1149&lt;/script&gt;
1150</pre>
1151    <p>
1152      One advantage of <code>addEventListener()</code> and <code>
 >removeEventListener()</code> over setting properties is that you 
 >can have multiple event listeners for the same event, each callin
 >g another function. Thus, to remove an event listener requires al
 >l three parameters be the same as the ones you use when adding th
 >e listener.
1153    </p>
1154    <p>
1155      Mozilla does not support Internet Explorer's method of conv
 >erting &lt;script&gt; tags into event handlers, which extends &lt
 >;script&gt; with <code>for</code> and <code>event</code> attribut
 >es (see Table 5). It also does not support the <code>attachEvent<
 >/code> and <code>detachEvent</code> methods. Instead, you should 
 >use the <code>addEventListener</code> and <code>removeEventListen
 >er</code> methods. Internet Explorer does not support the W3C eve
 >nts specification.
1156    </p>
1157    <p>
1158      &nbsp;
1159    </p>
1160    <p>
1161      Table 5. Event method differences between Mozilla and Inter
 >net Explorer
1162    </p>
1163    <table class="standard-table">
1164      <tbody>
1165        <tr>
1166          <th>
1167            Internet Explorer Method
1168          </th>
1169          <th>
1170            Mozilla Method
1171          </th>
1172          <th>
1173            Description
1174          </th>
1175        </tr>
1176        <tr>
1177          <td>
1178            attachEvent(aEventType, aFunctionReference)
1179          </td>
1180          <td>
1181            addEventListener(aEventType, aFunctionReference, aUse
 >Capture)
1182          </td>
1183          <td>
1184            Adds an event listener to a DOM element.
1185          </td>
1186        </tr>
1187        <tr>
1188          <td>
1189            detachEvent(aEventType, aFunctionReference)
1190          </td>
1191          <td>
1192            removeEventListener(aEventType, aFunctionReference, a
 >UseCapture)
1193          </td>
1194          <td>
1195            Removes an event listener to a DOM element.
1196          </td>
1197        </tr>
1198      </tbody>
1199    </table>
1200    <h3 id="Rich-text_.E7.B7.A8.E8.BC.AF" name="Rich-text_.E7.B7.
 >A8.E8.BC.AF">
1201      Rich-text 編輯
1202    </h3>
1203    <p>
1204      While Mozilla prides itself with being the most W3C standar
 >ds-compliant browser, it does support nonstandard functionality, 
 >such as <code>innerHTML</code> and rich text editing, if no W3C e
 >quivalent exists.
1205    </p>
1206    <p>
1207      Mozilla 1.3 introduced an implementation of Internet Explor
 >er's designMode feature, which turns an HTML document into a rich
 > text editor field. Once turned into the editor, commands can run
 > on the document through the <code>execCommand</code> command. Mo
 >zilla does not support Internet Explorer's <code>contentEditable<
 >/code> attribute for making any widget editable. You can use an i
 >frame to add a rich text editor.
1208    </p>
1209    <h4 id="Rich-text_.E5.B7.AE.E7.95.B0" name="Rich-text_.E5.B7.
 >AE.E7.95.B0">
1210      Rich-text 差異
1211    </h4>
1212    <p>
1213      Mozilla supports the W3C standard of accessing iframe's doc
 >ument object through <code>IFrameElm.contentDocument</code>, whil
 >e Internet Explorer requires you to access it through <code>docum
 >ent.frames{{ mediawiki.external('\"name\"') }}</code> and then ac
 >cess the resulting <code>document</code>:
1214    </p>
1215    <pre>
1216function getIFrameDocument(aID) {
1217  var rv = null; 
1218 
1219  // if contentDocument exists, W3C compliant (Mozilla)
1220  if (document.getElementById(aID).contentDocument){
1221    rv = document.getElementById(aID).contentDocument;
1222  } else {
1223    // IE
1224    rv = document.frames[aID].document;
1225  }
1226  return rv;
1227}
1228</pre>
1229    <p>
1230      Another difference between Mozilla and Internet Explorer is
 > the HTML that the rich text editor creates. Mozilla defaults to 
 >using CSS for the generated markup. However, Mozilla allows you t
 >o toggle between HTML and CSS mode using the <code>useCSS</code> 
 >execCommand and toggling it between true and false. Internet Expl
 >orer always uses HTML markup.
1231    </p>
1232    <pre>
1233Mozilla (CSS): 
1234  &lt;span style="color: blue;"&gt;Big Blue&lt;/span&gt; 
1235 
1236Mozilla (HTML): 
1237  &lt;font color="blue"&gt;Big Blue&lt;/font&gt; 
1238 
1239Internet Explorer: 
1240  &lt;FONT color="blue"&gt;Big Blue&lt;/FONT&gt; 
1241</pre>
1242    <p>
1243      Below is a list of commands that execCommand in Mozilla sup
 >ports:
1244    </p>
1245    <p>
1246      &nbsp;
1247    </p>
1248    <p>
1249      Table 6. Rich text editing commands
1250    </p>
1251    <table class="standard-table">
1252      <tbody>
1253        <tr>
1254          <th>
1255            Command Name
1256          </th>
1257          <th>
1258            Description
1259          </th>
1260          <th>
1261            Argument
1262          </th>
1263        </tr>
1264        <tr>
1265          <td>
1266            bold
1267          </td>
1268          <td>
1269            Toggles the selection's bold attribute.
1270          </td>
1271          <td>
1272            ---
1273          </td>
1274        </tr>
1275        <tr>
1276          <td>
1277            createlink
1278          </td>
1279          <td>
1280            Generates an HTML link from the selected text.
1281          </td>
1282          <td>
1283            The URL to use for the link
1284          </td>
1285        </tr>
1286        <tr>
1287          <td>
1288            delete
1289          </td>
1290          <td>
1291            Deletes the selection.
1292          </td>
1293          <td>
1294            ---
1295          </td>
1296        </tr>
1297        <tr>
1298          <td>
1299            fontname
1300          </td>
1301          <td>
1302            Changes the font used in the selected text.
1303          </td>
1304          <td>
1305            The font name to use (Arial, for example)
1306          </td>
1307        </tr>
1308        <tr>
1309          <td>
1310            fontsize
1311          </td>
1312          <td>
1313            Changes the font size used in the selected text.
1314          </td>
1315          <td>
1316            The font size to use
1317          </td>
1318        </tr>
1319        <tr>
1320          <td>
1321            fontcolor
1322          </td>
1323          <td>
1324            Changes the font color used in the selected text.
1325          </td>
1326          <td>
1327            The color to use
1328          </td>
1329        </tr>
1330        <tr>
1331          <td>
1332            indent
1333          </td>
1334          <td>
1335            Indents the block where the caret is.
1336          </td>
1337          <td>
1338            ---
1339          </td>
1340        </tr>
1341        <tr>
1342          <td>
1343            inserthorizontalrule
1344          </td>
1345          <td>
1346            Inserts an &lt;hr&gt; element at the cursor's positio
 >n.
1347          </td>
1348          <td>
1349            ---
1350          </td>
1351        </tr>
1352        <tr>
1353          <td>
1354            insertimage
1355          </td>
1356          <td>
1357            Inserts an image at the cursor's position.
1358          </td>
1359          <td>
1360            URL of the image to use
1361          </td>
1362        </tr>
1363        <tr>
1364          <td>
1365            insertorderedlist
1366          </td>
1367          <td>
1368            Inserts an ordered list (&lt;ol&gt;) element at the c
 >ursor's position.
1369          </td>
1370          <td>
1371            ---
1372          </td>
1373        </tr>
1374        <tr>
1375          <td>
1376            insertunorderedlist
1377          </td>
1378          <td>
1379            Inserts an unordered list (&lt;ul&gt;) element at the
 > cursor's position.
1380          </td>
1381          <td>
1382            ---
1383          </td>
1384        </tr>
1385        <tr>
1386          <td>
1387            italic
1388          </td>
1389          <td>
1390            Toggles the selection's italicize attribute.
1391          </td>
1392          <td>
1393            ---
1394          </td>
1395        </tr>
1396        <tr>
1397          <td>
1398            justifycenter
1399          </td>
1400          <td>
1401            Centers the content at the current line.
1402          </td>
1403          <td>
1404            ---
1405          </td>
1406        </tr>
1407        <tr>
1408          <td>
1409            justifyleft
1410          </td>
1411          <td>
1412            Justifies the content at the current line to the left
 >.
1413          </td>
1414          <td>
1415            ---
1416          </td>
1417        </tr>
1418        <tr>
1419          <td>
1420            justifyright
1421          </td>
1422          <td>
1423            Justifies the content at the current line to the righ
 >t.
1424          </td>
1425          <td>
1426            ---
1427          </td>
1428        </tr>
1429        <tr>
1430          <td>
1431            outdent
1432          </td>
1433          <td>
1434            Outdents the block where the caret is.
1435          </td>
1436          <td>
1437            ---
1438          </td>
1439        </tr>
1440        <tr>
1441          <td>
1442            redo
1443          </td>
1444          <td>
1445            Redoes the previous undo command.
1446          </td>
1447          <td>
1448            ---
1449          </td>
1450        </tr>
1451        <tr>
1452          <td>
1453            removeformat
1454          </td>
1455          <td>
1456            Removes all formatting from the selection.
1457          </td>
1458          <td>
1459            ---
1460          </td>
1461        </tr>
1462        <tr>
1463          <td>
1464            selectall
1465          </td>
1466          <td>
1467            Selects everything in the rich text editor.
1468          </td>
1469          <td>
1470            ---
1471          </td>
1472        </tr>
1473        <tr>
1474          <td>
1475            strikethrough
1476          </td>
1477          <td>
1478            Toggles the strikethrough of the selected text.
1479          </td>
1480          <td>
1481            ---
1482          </td>
1483        </tr>
1484        <tr>
1485          <td>
1486            subscript
1487          </td>
1488          <td>
1489            Converts the current selection into subscript.
1490          </td>
1491          <td>
1492            ---
1493          </td>
1494        </tr>
1495        <tr>
1496          <td>
1497            superscript
1498          </td>
1499          <td>
1500            Converts the current selection into superscript.
1501          </td>
1502          <td>
1503            ---
1504          </td>
1505        </tr>
1506        <tr>
1507          <td>
1508            underline
1509          </td>
1510          <td>
1511            Toggles the underline of the selected text.
1512          </td>
1513          <td>
1514            ---
1515          </td>
1516        </tr>
1517        <tr>
1518          <td>
1519            undo
1520          </td>
1521          <td>
1522            Undoes the last executed command.
1523          </td>
1524          <td>
1525            ---
1526          </td>
1527        </tr>
1528        <tr>
1529          <td>
1530            unlink
1531          </td>
1532          <td>
1533            Removes all link information from the selection.
1534          </td>
1535          <td>
1536            ---
1537          </td>
1538        </tr>
1539        <tr>
1540          <td>
1541            useCSS
1542          </td>
1543          <td>
1544            Toggles the usage of CSS in the generated markup.
1545          </td>
1546          <td>
1547            Boolean value
1548          </td>
1549        </tr>
1550      </tbody>
1551    </table>
1552    <p>
1553      For more information, visit <a href="/zh_tw/Rich-Text_Editi
 >ng_in_Mozilla" title="zh_tw/Rich-Text_Editing_in_Mozilla">Rich-Te
 >xt Editing in Mozilla</a>.
1554    </p>
1555    <p>
1556      &nbsp;
1557    </p>
1558    <h3 id="XML_.E5.B7.AE.E7.95.B0" name="XML_.E5.B7.AE.E7.95.B0"
 >>
1559      XML 差異
1560    </h3>
1561    <p>
1562      Mozilla 對 XML 與相關的技術有很完整的支援,如對 XSLT 與 Web services 等。它也支援一些
 > Internet Explorer 非標準的延伸,例如 XMLHttpRequest。
1563    </p>
1564    <p>
1565      Mozilla has strong support for XML and XML-related technolo
 >gies, such as XSLT and Web services. It also supports some nonsta
 >ndard Internet Explorer extensions, such as XMLHttpRequest.
1566    </p>
1567    <h4 id=".E6.8E.8C.E6.8E.A7_XML" name=".E6.8E.8C.E6.8E.A7_XML"
 >>
1568      掌控 XML
1569    </h4>
1570    <p>
1571      如同對於標準 HTML,對於可各方面控制 XML 檔的 DOM 的支援,Mozilla 也是依 W3C 所定的 XML
 > DOM 規格。Mozilla 與 Internet Explorer 在 XML DOM 上的不同處大多在於 Internet 
 >Explorer 非標準的處理方式。一個常見的差異是對空白字元節點的處理。 通常在建立 XML 時,XML 節點間會有空白。 In
 >ternet Explorer 用 <code>XMLNode.childNodes[]</code> 時不會包括這些空白節點,但
 >在 Mozilla 上這些節點會在 array 裡。
1572    </p>
1573    <p>
1574      As with standard HTML, Mozilla supports the W3C XML DOM spe
 >cification, which allows you to manipulate almost any aspect of a
 >n XML document. Differences between Internet Explorer's XML DOM a
 >nd Mozilla are usually caused by Internet Explorer's nonstandard 
 >behaviors. Probably the most common difference is how they handle
 > white space text nodes. Often when XML generates, it contains wh
 >ite spaces between XML nodes. Internet Explorer, when using <code
 >>XMLNode.childNodes[]</code>, will not contain these white space 
 >nodes. In Mozilla, those nodes will be in the array.
1575    </p>
1576    <pre>
1577XML: 
1578  &lt;?xml version="1.0"?&gt; 
1579  &lt;myXMLdoc xmlns:myns="http://myfoo.com"&gt; 
1580    &lt;myns:foo&gt;bar&lt;/myns:foo&gt; 
1581  &lt;/myXMLdoc&gt;
1582 
1583JavaScript:
1584  var myXMLDoc = getXMLDocument().documentElement; 
1585  alert(myXMLDoc.childNodes.length); 
1586</pre>
1587    <p>
1588      The first line of JavaScript 的第一行載入 XML 檔並用 <code>documentE
 >lement</code> 來存取它的 root 元素 (<code>myXMLDoc</code>)。第二行顯示子節點的數目。根
 >據 W3C 規格,接在一起的空白與換行字符組成一個文字節點。在 Mozilla 上 <code>myXMLdoc</code> 節
 >點有三個子:一個有換行字符與兩個空白的文字節點、<code>myns:foo</code> 節點、與另一個有換行字符的文字節點。I
 >nternet Explorer 並不遵循這個,因此上面的程式碼會顯示 "1",表示只有 <code>myns:foo</code
 >> 節點。所以,如要迴走子節點並掠過文字節點,要分辨這些節點。
1589    </p>
1590    <p>
1591      The first line of JavaScript loads the XML document and acc
 >esses the root element (<code>myXMLDoc</code>) by retrieving the 
 ><code>documentElement</code>. The second line simply alerts the n
 >umber of child nodes. Per the W3C specification, the white spaces
 > and new lines merge into one text node if they follow each other
 >. For Mozilla, the <code>myXMLdoc</code> node has three children:
 > a text node containing a new line and two spaces; the <code>myns
 >:foo</code> node; and another text node with a new line. Internet
 > Explorer, however, does not abide by this and will return "1" fo
 >r the above code, namely only the <code>myns:foo</code> node. The
 >refore, to walk the child nodes and disregard text nodes, you mus
 >t distinguish such nodes.
1592    </p>
1593    <p>
1594      As mentioned earlier, every node has a <code>nodeType</code
 >> attribute representing the node type. For example, an element n
 >ode has type 1, while a document node has type 9. To disregard te
 >xt nodes, you must check for types 3 (text node) and 8 (comment n
 >ode).
1595    </p>
1596    <pre>
1597XML:
1598  &lt;?xml version="1.0"?&gt;   
1599  &lt;myXMLdoc xmlns:myns="http://myfoo.com"&gt; 
1600    &lt;myns:foo&gt;bar&lt;/myns:foo&gt; 
1601  &lt;/myXMLdoc&gt;
1602 
1603JavaScript: 
1604  var myXMLDoc = getXMLDocument().documentElement; 
1605  var myChildren = myXMLDoc.childNodes; 
1606 
1607  for (var run = 0; run &lt; myChildren.length; run++){ 
1608    if ( (myChildren[run].nodeType != 3) &amp;&amp;
1609          myChildren[run].nodeType != 8) ){ 
1610      // not a text or comment node 
1611    }
1612  }
1613</pre>
1614    <h4 id="XML_data_islands" name="XML_data_islands">
1615      XML data islands
1616    </h4>
1617    <p>
1618      Internet Explorer has a nonstandard feature called <em>XML 
 >data islands</em>, which allow you to embed XML inside an HTML do
 >cument using the nonstandard HTML tag <code>&lt;xml&gt;</code>. M
 >ozilla does not support XML data islands and handles them as unkn
 >own HTML tags. You can achieve the same functionality using XHTML
 >; however, because Internet Explorer's support for XHTML is weak,
 > this is usually not an option.
1619    </p>
1620    <p>
1621      One cross-browser solution is to use DOM parsers, which par
 >se a string that contains a serialized XML document and generates
 > the document for the parsed XML. Mozilla uses the <code>DOMParse
 >r</code> class, which takes the serialized string and creates an 
 >XML document out of it. In Internet Explorer, you can achieve the
 > same functionality using ActiveX. A new <code>Microsoft.XMLDOM</
 >code> generates and has a <code>loadXML</code> method that can ta
 >ke in a string and generate a document from it. The following cod
 >e shows you how:
1622    </p>
1623    <pre>
1624IE XML data island: 
1625  .. 
1626  &lt;xml id="xmldataisland"&gt; 
1627    &lt;foo&gt;bar&lt;/foo&gt; 
1628  &lt;/xml&gt;
1629 
1630Cross-browser solution: 
1631  var xmlString = "&lt;xml id=\"xmldataisland\"&gt;&lt;foo&gt;bar
 >&lt;/foo&gt;&lt;/xml&gt;"; 
1632 
1633  var myDocument; 
1634 
1635  if (document.implementation.createDocument){ 
1636    // Mozilla, create a new DOMParser 
1637    var parser = new DOMParser(); 
1638    myDocument = parser.parseFromString(xmlString, "text/xml"); 
1639  } else if (window.ActiveXObject){ 
1640    // Internet Explorer, create a new XML document using ActiveX
 > 
1641    // and use loadXML as a DOM parser. 
1642    myDocument = new ActiveXObject("Microsoft.XMLDOM") 
1643    myDocument.async="false"; 
1644 
1645    myDocument.loadXML(xmlString);   
1646  }
1647</pre>
1648    <h4 id="XML_HTTP_request" name="XML_HTTP_request">
1649      XML HTTP request
1650    </h4>
1651    <p>
1652      Internet Explorer allows you to send and retrieve XML files
 > using MSXML's <code>XMLHTTP</code> class, which is instantiated 
 >through ActiveX using <code>new ActiveXObject("Msxml2.XMLHTTP")</
 >code> or <code>new ActiveXObject("Microsoft.XMLHTTP")</code>. Sin
 >ce there is no standard method of doing this, Mozilla provides th
 >e same functionality in the global JavaScript <code>XMLHttpReques
 >t</code> object. The object generates asynchronous requests by de
 >fault.
1653    </p>
1654    <p>
1655      After instantiating the object using <code>new XMLHttpReque
 >st()</code>, you can use the <code>open</code> method to specify 
 >what type of request (GET or POST) you use, which file you load, 
 >and if it is asynchronous or not. If the call is asynchronous, th
 >en give the <code>onload</code> member a function reference, whic
 >h is called once the request has completed.
1656    </p>
1657    <p>
1658      Synchronous request:
1659    </p>
1660    <pre class="eval">
1661  var myXMLHTTPRequest = new XMLHttpRequest(); 
1662  myXMLHTTPRequest.open("GET", "data.xml", false); 
1663 
1664  myXMLHTTPRequest.send(null); 
1665 
1666  var myXMLDocument = myXMLHTTPRequest.responseXML; 
1667</pre>
1668    <p>
1669      Asynchronous request:
1670    </p>
1671    <pre class="eval">
1672  var myXMLHTTPRequest; 
1673 
1674  function <span class="boldcode">xmlLoaded</span>() { 
1675    var myXMLDocument = myXMLHTTPRequest.responseXML; 
1676  }
1677 
1678  function loadXML(){ 
1679    myXMLHTTPRequest = new XMLHttpRequest();
1680 
1681    myXMLHTTPRequest.open("GET", "data.xml", true);
1682 
1683    myXMLHTTPRequest.onload = <span class="boldcode">xmlLoaded</s
 >pan>; 
1684 
1685    myXMLHTTPRequest.send(null); 
1686  }
1687</pre>
1688    <p>
1689      Table 7 features a list of available methods and properties
 > for Mozilla's <code>XMLHttpRequest</code>.
1690    </p>
1691    <p>
1692      &nbsp;
1693    </p>
1694    <p>
1695      Table 7. XMLHttpRequest methods and properties
1696    </p>
1697    <table class="standard-table">
1698      <tbody>
1699        <tr>
1700          <th>
1701            Name
1702          </th>
1703          <th>
1704            Description
1705          </th>
1706        </tr>
1707        <tr>
1708          <td>
1709            void abort()
1710          </td>
1711          <td>
1712            Stops the request if it is still running.
1713          </td>
1714        </tr>
1715        <tr>
1716          <td>
1717            string getAllResponseHeaders()
1718          </td>
1719          <td>
1720            Returns all response headers as one string.
1721          </td>
1722        </tr>
1723        <tr>
1724          <td>
1725            string getResponseHeader(string headerName)
1726          </td>
1727          <td>
1728            Returns the value of the specified header.
1729          </td>
1730        </tr>
1731        <tr>
1732          <td>
1733            functionRef onerror
1734          </td>
1735          <td>
1736            If set, the references function will be called whenev
 >er an error occurs during the request.
1737          </td>
1738        </tr>
1739        <tr>
1740          <td>
1741            functionRef onload
1742          </td>
1743          <td>
1744            If set, the references function will be called when t
 >he request completes successfully and the response has been recei
 >ved. Use when an asynchronous request is used.
1745          </td>
1746        </tr>
1747        <tr>
1748          <td>
1749            void open (string HTTP_Method, string URL)<br>
1750            <br>
1751            void open (string HTTP_Method, string URL, boolean as
 >ync, string userName, string password)
1752          </td>
1753          <td>
1754            Initializes the request for the specified URL, using 
 >either GET or POST as the HTTP method. To send the request, call 
 >the <code>send()</code> method after initialization. If <code>asy
 >nc</code> is false, the request is synchronous, else it defaults 
 >to asynchronous. Optionally, you can specify a username and passw
 >ord for the given URL needed.
1755          </td>
1756        </tr>
1757        <tr>
1758          <td>
1759            int readyState
1760          </td>
1761          <td>
1762            State of the request. Possible values:
1763            <table>
1764              <tbody>
1765                <tr>
1766                  <th>
1767                    Value
1768                  </th>
1769                  <th>
1770                    Description
1771                  </th>
1772                </tr>
1773                <tr>
1774                  <td>
1775                    0
1776                  </td>
1777                  <td>
1778                    UNINITIALIZED - open() has not been called ye
 >t.
1779                  </td>
1780                </tr>
1781                <tr>
1782                  <td>
1783                    1
1784                  </td>
1785                  <td>
1786                    LOADING - send() has not been called yet.
1787                  </td>
1788                </tr>
1789                <tr>
1790                  <td>
1791                    2
1792                  </td>
1793                  <td>
1794                    LOADED - send() has been called, headers and 
 >status are available.
1795                  </td>
1796                </tr>
1797                <tr>
1798                  <td>
1799                    3
1800                  </td>
1801                  <td>
1802                    INTERACTIVE - Downloading, responseText holds
 > the partial data.
1803                  </td>
1804                </tr>
1805                <tr>
1806                  <td>
1807                    4
1808                  </td>
1809                  <td>
1810                    COMPLETED - Finished with all operations.
1811                  </td>
1812                </tr>
1813              </tbody>
1814            </table>
1815          </td>
1816        </tr>
1817        <tr>
1818          <td>
1819            string responseText
1820          </td>
1821          <td>
1822            String containing the response.
1823          </td>
1824        </tr>
1825        <tr>
1826          <td>
1827            DOMDocument responseXML
1828          </td>
1829          <td>
1830            DOM Document containing the response.
1831          </td>
1832        </tr>
1833        <tr>
1834          <td>
1835            void send(variant body)
1836          </td>
1837          <td>
1838            Initiates the request. If <code>body</code> is define
 >d, it issent as the body of the POST request. <code>body</code> c
 >an be an XML document or a string serialized XML document.
1839          </td>
1840        </tr>
1841        <tr>
1842          <td>
1843            void setRequestHeader (string headerName, string head
 >erValue)
1844          </td>
1845          <td>
1846            Sets an HTTP request header for use in the HTTP reque
 >st. Has to be called after <code>open()</code> is called.
1847          </td>
1848        </tr>
1849        <tr>
1850          <td>
1851            string status
1852          </td>
1853          <td>
1854            The status code of the HTTP response.
1855          </td>
1856        </tr>
1857      </tbody>
1858    </table>
1859    <h4 id="XSLT_.E5.B7.AE.E7.95.B0" name="XSLT_.E5.B7.AE.E7.95.B
 >0">
1860      XSLT 差異
1861    </h4>
1862    <p>
1863      Mozilla supports XSL Transformations (XSLT) 1.0. It also al
 >lows JavaScript to perform XSLT transformations and allows runnin
 >g XPATH on a document.
1864    </p>
1865    <p>
1866      Mozilla requires that you send the XML and XSLT file holdin
 >g the stylesheet with an XML mimetype (<code>text/xml</code> or <
 >code>application/xml</code>). This is the most common reason why 
 >XSLT won't run in Mozilla but will in Internet Explorer. Mozilla 
 >is strict in that way.
1867    </p>
1868    <p>
1869      Internet Explorer 5.0 and 5.5 supported XSLT's working draf
 >t, which is substantially different than the final 1.0 recommenda
 >tion. The easiest way to distinguish what version an XSLT file wa
 >s written against is to look at the namespace. The namespace for 
 >the 1.0 recommendation is <code><span class="nowiki">http://www.w
 >3.org/1999/XSL/Transform</span></code>, while the working draft's
 > namespace is <code><span class="nowiki">http://www.w3.org/TR/WD-
 >xsl</span></code>. Internet Explorer 6 supports the working draft
 > for backwards compatibility, but Mozilla does not support the wo
 >rking draft, only the final recommendation.
1870    </p>
1871    <p>
1872      If XSLT requires you to distinguish the browser, you can qu
 >ery the "xsl:vendor" system property. Mozilla's XSLT engine will 
 >report itself as "Transformiix" and Internet Explorer will return
 > "Microsoft."
1873    </p>
1874    <pre>
1875&lt;xsl:if test="system-property('xsl:vendor') = 'Transformiix'"&
 >gt; 
1876  &lt;!-- Mozilla specific markup --&gt; 
1877&lt;/xsl:if&gt; 
1878&lt;xsl:if test="system-property('xsl:vendor') = 'Microsoft'"&gt;
 > 
1879  &lt;!-- Internet Explorer specific markup --&gt; 
1880&lt;/xsl:if&gt; 
1881</pre>
1882    <p>
1883      Mozilla also provides JavaScript interfaces for XSLT, allow
 >ing a Web site to complete XSLT transformations in memory. You ca
 >n do this using the global <code>XSLTProcessor</code> JavaScript 
 >object. <code>XSLTProcessor</code> requires you to load the XML a
 >nd XSLT files, because it needs their DOM documents. The XSLT doc
 >ument, imported by the <code>XSLTProcessor</code>, allows you to 
 >manipulate XSLT parameters. <code>XSLTProcessor</code> can genera
 >te a standalone document using <code>transformToDocument()</code>
 >, or it can create a document fragment using <code>transformToFra
 >gment()</code>, which you can easily append into another DOM docu
 >ment. Below is an example:
1884    </p>
1885    <p>
1886      &nbsp;
1887    </p>
1888    <pre>
1889var xslStylesheet; 
1890var xsltProcessor = new XSLTProcessor(); 
1891 
1892// load the xslt file, example1.xsl 
1893var myXMLHTTPRequest = new XMLHttpRequest(); 
1894myXMLHTTPRequest.open("GET", "example1.xsl", false); 
1895myXMLHTTPRequest.send(null); 
1896 
1897// get the XML document and import it 
1898xslStylesheet = myXMLHTTPRequest.responseXML; 
1899 
1900xsltProcessor.importStylesheet(xslStylesheet); 
1901 
1902// load the xml file, example1.xml 
1903myXMLHTTPRequest = new XMLHttpRequest(); 
1904myXMLHTTPRequest.open("GET", "example1.xml", false); 
1905myXMLHTTPRequest.send(null); 
1906 
1907var xmlSource = myXMLHTTPRequest.responseXML; 
1908 
1909var resultDocument = xsltProcessor.transformToDocument(xmlSource)
 >
1910</pre>
1911    <p>
1912      After creating an <code>XSLTProcessor</code>, you load the 
 >XSLT file using <code>XMLHttpRequest</code>. The XMLHttpRequest's
 > <code>responseXML</code> member contains the XML document of the
 > XSLT file, which is passed to <code>importStylesheet</code>. You
 > then use the <code>XMLHttpRequest</code> again to load the sourc
 >e XML document that must be transformed; that document is then pa
 >ssed to the <code>transformToDocument</code> method of <code>XSLT
 >Processor</code>. Table 8 features a list of <code>XSLTProcessor<
 >/code> methods.
1913    </p>
1914    <p>
1915      &nbsp;
1916    </p>
1917    <p>
1918      Table 8. XSLTProcessor methods
1919    </p>
1920    <table class="standard-table">
1921      <tbody>
1922        <tr>
1923          <th>
1924            Method
1925          </th>
1926          <th>
1927            Description
1928          </th>
1929        </tr>
1930        <tr>
1931          <td>
1932            void importStylesheet(Node styleSheet)
1933          </td>
1934          <td>
1935            Imports the XSLT stylesheet. The <code>styleSheet</co
 >de> argument is the root node of an XSLT stylesheet's DOM documen
 >t.
1936          </td>
1937        </tr>
1938        <tr>
1939          <td>
1940            DocumentFragment transformToFragment(Node source, Doc
 >ument owner)
1941          </td>
1942          <td>
1943            Transforms the Node <code>source</code> by applying t
 >he stylesheet imported using the <code>importStylesheet</code> me
 >thod and generates a DocumentFragment. <code>owner</code> specifi
 >es what DOM document the DocumentFragment should belong to, makin
 >g it appendable to that DOM document.
1944          </td>
1945        </tr>
1946        <tr>
1947          <td>
1948            Document transformToDocument(Node source)
1949          </td>
1950          <td>
1951            Transforms the Node <code>source</code> by applying t
 >he stylesheet imported using the <code>importStylesheet</code> me
 >thod and returns a standalone DOM document.
1952          </td>
1953        </tr>
1954        <tr>
1955          <td>
1956            void setParameter(String namespaceURI, String localNa
 >me, Variant value)
1957          </td>
1958          <td>
1959            Sets a parameter in the imported XSLT stylesheet.
1960          </td>
1961        </tr>
1962        <tr>
1963          <td>
1964            Variant getParameter(String namespaceURI, String loca
 >lName)
1965          </td>
1966          <td>
1967            Gets the value of a parameter in the imported XSLT st
 >ylesheet.
1968          </td>
1969        </tr>
1970        <tr>
1971          <td>
1972            void removeParameter(String namespaceURI, String loca
 >lName)
1973          </td>
1974          <td>
1975            Removes all set parameters from the imported XSLT sty
 >lesheet and makes them default to the XSLT-defined defaults.
1976          </td>
1977        </tr>
1978        <tr>
1979          <td>
1980            void clearParameters()
1981          </td>
1982          <td>
1983            Removes all set parameters and sets them to defaults 
 >specified in the XSLT stylesheet.
1984          </td>
1985        </tr>
1986        <tr>
1987          <td>
1988            void reset()
1989          </td>
1990          <td>
1991            Removes all parameters and stylesheets.
1992          </td>
1993        </tr>
1994      </tbody>
1995    </table>
1996    <div class="originaldocinfo">
1997      <h3 id=".E5.8E.9F.E6.96.87.E8.B3.87.E8.A8.8A" name=".E5.8E.
 >9F.E6.96.87.E8.B3.87.E8.A8.8A">
1998        原文資訊
1999      </h3>
2000      <ul>
2001        <li>原文作者:Doron Rosenberg, IBM Corporation
2002        </li>
2003        <li>公開日期: 26 Jul 2005
2004        </li>
2005        <li>原文連結: <a class="external" href="http://www-128.ibm.co
 >m/developerworks/web/library/wa-ie2mozgd/" rel="freelink">http://
 >www-128.ibm.com/developerwork...y/wa-ie2mozgd/</a>
2006        </li>
2007      </ul>
2008    </div>
2009    <p>
2010      {{ languages( { "en": "en/Migrate_apps_from_Internet_Explor
 >er_to_Mozilla", "es": "es/Migrar_aplicaciones_desde_Internet_Expl
 >orer_a_Mozilla", "fr": "fr/Migration_d\'applications_d\'Internet_
 >Explorer_vers_Mozilla", "ko": "ko/Migrate_apps_from_Internet_Expl
 >orer_to_Mozilla", "zh-cn": "cn/\u4eceInternet_Explorer\u8fc1\u79f
 >b\u5230Mozilla" } ) }}
2011    </p>

回到編輯歷史