掌握Ajax,第5部分: 操縱DOM

來源:互聯網
上載者:User

使用 JavaScript 即時更新 Web 頁面

簡介:上一期中 Brett 介紹了文件物件模型(DOM),它的元素在幕後定義了 Web 頁面。這一期文 章中他將進一步探討 DOM。瞭解如何建立、刪除和修改 DOM 樹的各個部分,瞭解如何?網頁的即時更 新!

如果閱讀過本系列的 上一期文章,那麼您就非常清楚當 網頁瀏覽器顯示網頁時幕後發生的一切了。 前面已經提到,當 HTML 或為頁面定義的 CSS 發送給 網頁瀏覽器時,網頁被從文本轉化成物件模型。無 論代碼簡單或複雜,集中到一個檔案還是分散到多個檔案,都是如此。然後瀏覽器直接使用物件模型而不 是您提供的文字檔。瀏覽器使用的模型稱為文件物件模型(Document Object Model,DOM)。它串連表 示文檔中元素、屬性和文本的對象。HTML 和 CSS 中所有的樣式、值、甚至大部分空格都合并到該對象模 型中。給定網頁的具體模型稱為該頁面的 DOM 樹。

瞭解什麼是 DOM 樹,以及知道它如何表示 HTML 和 CSS 僅僅是控制 Web 頁面的第一步。接下來還需要瞭解如何處理 Web 頁面的 DOM 樹。比方說 ,如果向 DOM 樹中增加一個元素,這個元素就會立即出現在使用者的 網頁瀏覽器中 —— 不需 要重新載入頁面。從 DOM 樹中刪除一些文本,那些文本就會從使用者螢幕上消失。可以通過 DOM 修改使用者 介面或者與使用者介面互動,這樣就提供了很強的編程能力和靈活性。一旦學會了如何處理 DOM 樹,您就 向實現豐富的、互動式動態網站邁出了一大步。

注意,下面的討論以上一期文章 “利用 DOM 進行 Web 響應” 為基礎,如果沒有閱讀過那一期,請在繼續閱讀之前首先閱讀上一期文章。

跨瀏覽器、跨語言

文件物件模型是一種 W3C 標準(連結參見 參考資料)。因此,所有現 代 網頁瀏覽器都支援 DOM —— 至少在一定程度上支援。雖然不同的瀏覽器有一些區別,但 如果使用 DOM 核心功能並注意少數特殊情況和例外,DOM 代碼就能以同樣的方式用於任何瀏覽器。修改 Opera 網頁的代碼同樣能用於 Apple's Safari®、Firefox®、Microsoft® Internet Explorer® 和 Mozilla®。

DOM 也是一種跨語言 的規範,換句話說,大多數主流程式設計語言都能使用它。W3C 為 DOM 定義了幾種 語言綁定。一種語言綁定就是為特定語言定義的讓您使用 DOM 的 API。比如,可以使用為 C、Java 和 JavaScript 定義的 DOM 語言綁定。因此可以從這些語言中使用 DOM。還有幾種用於其他語言的語言綁定 ,儘管很多是由 W3C 以外的第三方定義的。

本系列文章主要討論 JavaScript 的 DOM 綁定。這是因為多數非同步應用程式開發都需要編寫在 網頁瀏覽器中啟動並執行 JavaScript 代碼。使用 JavaScript 和 DOM 可以即時修改使用者介面、響應使用者事件和 輸入等等 —— 使用的完全是標準的 JavaScript。

總之,建議您也嘗試一下其他語言中的 DOM 綁定。比如,使用 Java 語言綁定不僅能處理 HTML 還可 處理 XML,這些內容將在以後的文章中討論。因此本文介紹的技術還可用於 HTML 之外的其他語言,客戶 端 JavaScript 之外的其他環境。

節點的概念

節點是 DOM 中最基本的物件類型。實際上,您將在本文中看到,基本上 DOM 定義的其他所有對象都 是節點對象的擴充。但是在深入分析語義之前,必須瞭解節點所代表的概念,然後再學習節點的具體屬性 和方法就非常簡單了。

在 DOM 樹中,基本上一切都是節點。每個元素在最底層上都是 DOM 樹中的節點。每個屬性都是節點 。每段文本都是節點。甚至注釋、特殊字元(如著作權符號 ©)、DOCTYPE 聲明(如果 HTML 或 者 XHTML 中有的話)全都是節點。因此在討論這些具體的類型之前必須清楚地把握什麼是節點。

節點是……

用最簡單的話說,節點就是 DMO 樹中的任何事物。之所以用 “事物” 這個模糊的字眼,是因為只能 明確到這個程度。比如 HTML 中的元素(如 img)和 HTML 中的文本片段(如 “Scroll down for more details”)沒有多少明顯的相似之處。但這是因為您考慮的可能是每種類型的功能,關注的是它們的不 同點。

但是如果從另一個角度觀察,DOM 樹中的每個元素和每段文本都有一個父親,這個父節點可能是另一 個元素(比如嵌套在 p 元素中的 img)的孩子,或者 DOM 樹中的頂層元素(這是每個文檔中都出現一次 的特殊情況,即使用 html 元素的地方)。另外,元素和文本都有一個類型。顯然,元素的類型就是元素 ,文本的類型就是文本。每個節點還有某種定義明確的結構:下面還有節點(如子項目)嗎?有兄弟節點 (與元素或文本 “相鄰的” 節點)嗎?每個節點屬於哪個文檔?

顯然,大部分內容聽起來很抽象。實際上,說一個元素的類型是元素似乎有點冒傻氣。但是要真正認 識到將節點作為通用物件類型的價值,必須抽象一點來思考。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.