Atitit 前端 dom 的藝術 attilax著

目錄

1. 概念 1

1. 概念

1.2　DOM　　什麼是DOM？簡單地說，DOM是一套對文件的內容進行抽象和概念化的方法。　　在現實世界裡，人們對所謂的“世界物件模型”都不會陌生。例如，當用“汽車”、“房子”和“樹”等名詞來稱呼日常生活環境裡的事物時，我們可以百分之百地肯定對方知道我們說的是什麼，這是因為人們對這些名詞所代表的東西有著同樣的認識。於是，當對別人說“汽車停在了車庫裡”時，可以斷定他們不會理解為“小鳥關在了壁櫥裡”。　　我們的“世界物件模型”不僅可以用來描述客觀存在的事物，還可以用來描述抽象概念。例如，假設有個人向我問路，而我給出的答案是“左邊第三棟房子”。這個答案有沒有意義將取決於那個人能否理解“第三”和“左邊”的含義。如果他不會數數或者分不清左右，則不管他是否理解這幾個概念，我的回答對他都不會有任何幫助。在現實世界裡，正是因為大家對抽象的世界物件模型有著基本的共識，人們才能用非常簡單的話表達出複雜的含義並得到對方的理解。具體到這裡的例子，你可以相當有把握地斷定，其他人對“第三”和“左邊”的理解和我完全一樣。

1. 發展歷程

1. 1. 廠商各自為政

　本書第1版面世的時候，做一名Web設計師是件很讓人很興奮的事。5個年頭過去了，這個職業依然保持著強大的吸引力。特別是JavaScript，經歷了從被人誤解到萬眾矚目的巨大轉變。Web開發呢，也已從混亂無序的狀態，發展成一門需要嚴格訓練才能從事的正規職業。無論設計師還是開發人員，在建立網站的過程中都積極地採用標準技術，Web標準已經深入人心。　　當網頁設計人員談論起與Web標準有關的話題時，HTML（超文字標記語言）和CSS（層疊樣式表）通常佔據著核心地位。不過，W3C（全球資訊網聯盟）已批准另一項技術，所有與標準相相容的Web瀏覽器都支援它，這就是DOM（文件物件模型）。我們可以利用DOM給文件增加互動能力，就像利用CSS給文件新增各種樣式一樣。

接下來，只需利用JavaScript改變myelement元素的left和top樣式，就可以讓它在頁面上隨意移動。不過，這只是理論而已。　　不幸的是，NN 4和IE4瀏覽器使用的是兩種不相容的DOM。換句話說，雖然瀏覽器製造商的目標一樣，但他們在解決DOM問題時採用的辦法卻完全不同。1.3.2　瀏覽器之間的衝突Netscape公司的DOM使用了專有元素，這些元素稱為層（layer）。層有唯一的ID，JavaScript程式碼需要像下面這樣引用它們：　　而在微軟公司的DOM中這個元素必須像下面這樣引用：　　這兩種DOM的差異並不止這一點。假設你想找出myelement元素的left位置並把它賦值給變數xpos，那麼在NetscapeNavigator 4瀏覽器裡必須這樣做：　　而在IE 4瀏覽器中，需要使用如下所示的語句才能完成同樣的工作：　　這就導致了一種很可笑的局面：程式設計師在編寫DOM指令碼程式碼時必須知道它們將執行在哪種瀏覽器環境裡，所以在實際工作中，許多指令碼都不得不編寫兩次，一次為NetscapeNavigator，另一次為IE。同時，為了確保能夠正確地向不同的瀏覽器提供與之相應的指令碼，程式設計師還必須編寫一些程式碼去探查在客戶端執行的瀏覽器到底是哪一種。DHTML打開了一個充滿機會的新世界，但想要進入其中的人們卻發現這是個充滿苦難的世界。因此，沒多久，DHTML就從一個大熱門變成了一個人們不願提起的名詞，而對這種技術的評價也很快地變成了“宣傳噱頭”和“難以實現”。

　　就在瀏覽器製造商以DOM為武器展開營銷大戰的同時，W3C不事聲張地結合大家的優點推出了一個標準化的DOM。令人欣慰的是，Netscape、微軟和其他一些瀏覽器製造商們還能拋開彼此的敵意而與W3C攜手製定新的標準，並於1998年10月完成了“第1級DOM”（DOMLevel 1）。　　回到剛才的例子，我們已經用　　標籤定義了一個ID為myelement的頁面元素，現在需要找出它的left位置並把這個值儲存到變數xpos中。下面是使用新的標準化DOM時需要用到的語法：　　乍看起來，這與剛才那兩種非標準化的專有DOM相比並沒有明顯的改進。但事實上，標準化的DOM有著非常遠大的抱負。　　瀏覽器製造商們感興趣的只不過是通過JavaScript操控網頁的具體辦法，但W3C推出的標準化DOM卻可以讓任何一種程式設計語言對使用任何一種標記語言編寫出來的任何一份文件進行操控。

DOM是一種API（應用程式設計介面）。簡單地說，API就是一組已經得到有關各方共同認可的基本約定。在現實世界中，相當於API的例子包括（但不限於）摩爾斯碼、國際時區、化學元素週期表。以上這些都是不同學科領域中的標準，它們使得人們能夠更方便地交流與合作。如果沒有一個統一的標準，事情往往會演變成為一場災難。別忘了，因混淆英制度量衡與公制度量衡至少導致過一次火星探測任務的失敗。　　在軟體程式設計領域中，雖然存在著多種不同的語言，但很多工卻是相同或相似的。這也正是人們需要API的原因。一旦掌握了某個標準，就可以把它應用在許多不同的環境中。雖然語法會因為使用的程式設計語言而有所變化，但這些約定卻總是保持不變的。　　因此，雖然本書的重點是教會你如何通過JavaScript使用DOM，當你需要使用諸如PHP或Python之類的程式設計語言去解析XML文件的時候，你獲得的DOM新知識將會有很大的幫助。W3C對DOM的定義是：“一個與系統平臺和程式語言無關的介面，程式和指令碼可以通過這個介面動態地訪問和修改文件的內容、結構和樣式。”W3C推出的標準化DOM，在獨立性和適用範圍等諸多方面，都遠遠超出了各自為戰的瀏覽器製造商們推出的各種專有DOM。

1. DOM 1 文件：DOM中的“D” 2 物件：DOM中的“O” 3 模型：DOM中的“M”

3.4 節點 3.4.1 元素節點 3.4.2 文字節點 3.4.3 屬性節點 3.4.4 CSS 3.4.5 獲取元素 3.4.6 盤點知識點 3.5 獲取和設定屬性 3.5.1 getAttribute 3.5.2 setAttribute

1. 1. 動態建立標記
2. 7.1 一些傳統方法7.1.1 document.write7.1.2 innerHTML屬性7.2 DOM方法7.2.1 createElement方法7.2.2 appendChild方法7.2.3 createTextNode方法7.2.4 一個更復雜的組合7.3 重回圖片庫7.3.1 在已有元素前插入一個新元素7.3.2 在現有方法後插入一個新元素7.3.3 圖片庫二次改進版7.4 Ajax7.4.1 XMLHttpRequest物件7.4.2 漸進增強與Ajax7.4.3 Hijax7.5 小結
   1. 第8章 充實文件的內容
3. 8.1 不應該做什麼8.2 把“不可見”變成“可見”8.3 內容8.3.1 選用HTML、XHTML還是HTML58.3.2 CSS8.3.3 JavaScript8.4 顯示“縮略語列表”8.4.1 編寫displayAbbreviations函式8.4.2 建立標記8.4.3 一個瀏覽器“地雷”8.5 顯示“文獻來源連結表”8.6 顯示“快捷鍵清單”8.7 檢索和新增資訊8.8 小結

1. 1. CSS-DOM
2. 9.1 三位一體的網頁9.1.1 結構層9.1.2 表示層9.1.3 行為層9.1.4 分離9.2 style屬性9.2.1 獲取樣式9.2.2 設定樣式

《JavaScript DOM程式設計藝術(第2版)（html+css+javascript教程精粹，JavaScrip權威指南！）》(（英）基思(Keith)【簡介_書評_線上閱讀】 - 噹噹圖書.html