書評－深入DOM，掌握網頁設計神髓

DOM Scripting：Web Design with 　JavaScript and the Document Object Model 　Jeremy Keith/著 　Friends of Ed出版 　售價：1230元 　推薦：Amazon四顆半星

在Web發展的歷史裡， JavaScript一度聲名狼籍，過於氾濫的動態效果與不夠周延的語法設計，不但降低網頁的可用性，甚至導致頁面根本無法開啟，尤有甚者，連瀏覽器都會當住不動。

然而Ajax崛起之後，終於讓JavaScript有機會洗刷過去污名，讓人發現JavaScript不再是猛跳彈跳視窗或轉動跑馬燈的小玩意，事實上，與Web應用程式互動的過程中，JavaScript能在展示層提供絕佳的互動體驗，提升網頁的可用性，而這恰恰是過去它最為人所詬病的地方。

有趣的是，Ajax並非因為JavaScript有一些新的技術或版本演進才產生，Ajax能做的技術早就存在那裡，因此與其說改變的是技術，不如說改變的是開發人員的腦袋，當觀念一轉，JavaScript就從污名泥沼中躍出，成為新的顯學。

而JavaScript能精細控制展示層的種種效果，是透過存取DOM（Document Object Model，文件物件模型）才能達成，我們在瀏覽器中看到的一切元素，其實就是DOM解析後的結果。

Jeremy Keith《DOM Scripting》一書，便是介紹如何應用JavaScript與DOM來開發網頁，透過基礎觀念的介紹和實例的應用，引領讀者一窺DOM的堂奧。

說文解字剖析DOM
作者在第三章中以說文解字的方式來折解DOM。D指的是文件，O指的是物件，M指的雖然是模型，不過作者認為利用地圖（Map）來解釋更容易理解。

倒著「種」的樹狀結構文
把樹當作底圖，將HTML標籤從樹根開始分枝漫延到枝、葉的樣子從而分布到樹上，形象化地解釋DOM的概念。假如將這棵樹倒種翻轉，就是DOM實際的結構。

低調而優雅的網頁設計哲學
由於過去JavaScript大量被誤用的歷史和現象，及著眼在使用者為中心的思考，作者提出優雅降級、非干擾性的JavaScript、向後相容與強化內容等概念。

累積式的實作引導
雖然本書從頭到尾只有實作一個完整的相片展示程式，但透過層層引導累加的方式，以及不斷修正既有程式碼的示範，使用者學到的不只是技巧，也體悟作者一再強調的開發哲學。

帶來正確觀念的入門書
對於DOM不熟知的讀者而言，透過各章節的引導，可以由淺入深去了解DOM是什麼？該如何使用？以及使用警戒線在哪裡？而當中的許多觀念，即使對於熟知DOM的開發人員而言仍有幫助。說文解字剖析DOM

作者在第三章中以說文解字的方式來折解DOM。D指的是文件，當開發人員撰寫的網頁文件被載入到瀏覽器時，DOM的生命周期就此開始。O指的是物件，載入瀏覽器的文件會被轉換成樹狀結構，使用者可以透過程式語法與它互動，而最常使用的便是JavaScript。

至於M指的雖然是模型，不過作者認為利用地圖（Map）來解釋更容易理解。無論是模型或地圖，都是對現實世界中一些具體事物的簡化，以地圖來看，城市和街道被大幅簡化成圖面上的點或線，但是透過它，我們仍然能找到特定的地點。

因此合而觀之，DOM代表了網頁文件被載入到瀏覽器的內容，而瀏覽器提供了一個頁面的模型，使用者可以透過JavaScript來閱讀或改變這張地圖/模型。

不過作者遲至第三章才介紹DOM，那麼前二章的內容是什麼？原來作者利用前兩章介紹DOM的最佳夥伴JavaScript，第一章著重在它的歷史演變，像是介紹瀏覽器大戰造成的各家支援語法不一，藉由這些背景因素的了解，才能知道透過DOM來設計網頁，最能接近跨瀏覽器運作的目標。

在第二章則是簡介JavaScript的基本語法，透過簡單範例引導使用者去認識變數、陣列、運算子、函式、物件。JavaScript說來也是一門學問，要盡得其妙，遠不是短短一章所能帶過，但是以了解本書後面章節而言，本章提供了足夠的知識和技術，讓不熟悉JavaScript的讀者能夠透過實作了解DOM。倒著「種」的樹狀結構

想要理解DOM，最重要的是掌握「樹狀結構」與「節點」（node）這兩個觀念。

在瀏覽器中，文件內容被再現為樹狀結構，作者提醒我們可以從族譜來認識這樣的樹狀結構。族譜從起源的那一代開始，枝繁葉茂地發展出去，父傳子、子傳孫，代代相傳而形成複雜結構。網頁中的文件，從這個標籤開始，構成頁面的標籤元素與內容不斷分枝出去，形成一個宛如族譜的結構。了解這樣的結構，以及理解上、下代之間的關係，是認識與操作DOM的重要觀念。

筆者曾在歐萊禮《Ajax 快速上手》一書內討論DOM的章節裡，看到該書利用漫畫的方式，把樹當作底圖，將HTML標籤從樹根開始分枝漫延到枝、葉的樣子從而分布到樹上，形象化地解釋了DOM的概念。假如將這棵樹倒種翻轉，就是DOM實際的結構，這種手法令人印象深刻。

節點則是了解DOM的另一個重要概念，文件就是節點的集合，是樹狀結構的枝、葉。DOM的節點可以分為元素節點、文字節點及屬性結點。了解這些節點的差異與方法，才能正確存取DOM。

DOM的屬性及方法有很多，作者在介紹完DOM的主要概念後卻只提及幾個存取DOM和屬性的方法。這是作者在寫作上的一大特色，就好像蓋房子一般，先從地基打起，而在打地基的階段，就只給你打地基所需要的工具和觀念。而後面緊接實作，的確也透過這些方法就能完成，等到需要深入到下個階段時，再提供相關的方法的介紹，以免讀者一開始就落入DOM的迷魂陣中。低調而優雅的網頁設計哲學

當我們學習到一項新技術時，總會興致勃勃地希望儘可能去應用，但作者在書中卻經常澆冷水地踩煞車，要我們在替網頁增作JavaScript功能時，一定要質疑自己，這個動作是不是真的必要，也要問問看能為使用者帶來什麼好處？

作者會這樣強調，一方面源於過去JavaScript大量被誤用的歷史和現象，另一方面則是著眼在使用者為中心的思考，因此作者提出優雅降級、非干擾性的JavaScript（Unobtrusive JavaScript）、向後相容與強化內容等概念。

優雅降級的原則，是要開發人員在確保網頁遇到不支援JavaScript的情況下仍能運作；非干擾性的JavaScript則要求儘量將文件結構與網頁動作分離。即使瀏覽器關掉JavaScript支援，使用者仍然能在網頁上暢行無阻，這是開發人員應該實作出的目標。當一個技術優雅地降級，也許功能會稍加減少，但不至於無法運作。

以實例來說，有許多人會利用＜a href=”javascript:”＞這種假網址的方式呼叫javascript函式，這種情況一旦遇上沒有啟用JavaScript的瀏覽器，就會造成失效的結果。許多常見的技巧，往往也經不起考驗，這種習焉不察的方式，會直接影響到使用者的瀏覽經驗。

向後相容，則要開發人員留心仍有人使用舊版瀏覽器；強化內容則是希望利用DOM和JavaScript的技術，提供更好的瀏覽經驗，作者利用第八章一整章來說明這個觀念與實作方法。

DOM和JavaScript的結合雖然強大，但為避免過去JavaScript的惡夢重演，作者認為無害的腳本要比好的腳本程式更為重要，以免造就新的程式怪物。事實上，如能具備上述觀念善用DOM，不但能降低JavaScript誤用的亂象，並且讓使用者更容易存取所需內容。累積式的實作引導

雖然本書從頭到尾只有實作一個完整的相片展示程式，但透過層層引導累加的方式，使用者該學的DOM開發技術卻不會因此而減少。

作者先在第四章，第一次帶領讀者實作簡單的相片展示程式，利用最基本、簡單的HTML和JavaScript加以開發。接著提出前一章所學的DOM方法，指出可以改善哪些項目，不但讓人可以看到DOM在使用前後的差異和使用的觀念，讓讀者實作時印象更為深刻。隨著程式的需要，作者也帶出新的技術與方法，例如子節點的屬性、firstChild、lastChild的存取方法等，在製作程式時一一帶出。

第五章作者講解了他鼓吹的低調優雅的設計哲學，然後在第六章重新改造第四章的實作方法，讓讀者能夠學習精益求精的思考方式；後面幾章中，作者又帶入動態增加、修改網頁元素的方法、突顯內容的觀念、利用DOM修改CSS的呈現風格，以及動畫的技巧等。隨著章節的推演，新的技術便跟著帶出，並藉此修改原有的程式。最後作者將書中介紹過的技巧與方法，全數套用在相本展示程式的基礎上所建構出來的網站頁面，讓讀者可以徹底體會DOM可以做到的效果。

透過這種層層深入的引導，以及不斷修正既有程式碼的示範，使用者學到的不只是技巧，也體悟作者一再強調的開發哲學。帶來正確觀念的入門書

綜觀來看，本書在定位上屬於DOM的入門書，在體例上，不像參考書列出一大堆方法，也沒有提供許多可以立即搬到網頁上的酷炫程式，但是對於DOM不熟知的讀者而言，透過各章節的引導，可以由淺入深去了解DOM是什麼？該如何使用？以及使用警戒線在哪裡？而當中的許多觀念，即使對於熟知DOM的開發人員而言仍有幫助，可以藉由本書了解如何設計出以使用者為中心的網頁，進而兼顧豐富性與可用性。

我們身處於網頁互動性與豐富體驗要求越來越高的時代，DOM無疑是切中這個需求的敲門磚，也許本書沒辦法提供進階的程式設計技術，例如大部分Ajax專書所提供的技巧，但對想了解DOM的讀者而言，它淺顯易懂的書寫方式，兼顧技術與觀念的鋪陳，的確是值得一讀的著作。文⊙黃天賜