使用Dojo的Ajax應用開發進階教程,第4部分: DOM查詢與操作

來源:互聯網
上載者:User

DOM 的全稱是文件物件模型(Document Object Model)。它是 HTML 和 XML 文檔的 API。它定義了文檔的邏輯結構,以及對文檔進行訪問和操作的方式。通過 DOM,開發人員可以在文檔中自由導航, 也可以添加、更新和刪除其中的元素和內容。基本上文檔中的任何內容都是可以通過 DOM 進行訪問和操作的。本文詳細介紹了如何使用 DOM 基本 API 和 Dojo 來進行 DOM 查詢和操作。使用的 Dojo 版本是 1.4。下面首先介紹 DOM 的基本概念。

DOM 基本概念

DOM 是給指令碼語言(如 JavaScript 和 VBScript 等)來使用的 API。在互連網的早期,HTML 頁面都是靜態。開發人員沒有辦法對頁面進行動態修改。DOM 的出現解決了這個問題。DOM 給出了一種描述 HTML 文檔結構的方式,並且允許開發人員通過 DOM 提供的 API 來對文檔結構進行修改。DOM 目前是 W3C 的推薦規範。主流的瀏覽器都實現或部分實現該規範。下面首先介紹 DOM 規範的版本曆史。

DOM 規範的版本曆史

DOM 從出現之後,經過了不斷的發展變化,以及 W3C 組織的標準化工作,因此目前的版本比較多,具體如下所示:

DOM 層級 0:1996 年,Netscape 公司的 Netscape Navigator 2.0 瀏覽器中率先引入了 JavaScript 這一指令碼語言。開發人員可以利用 JavaScript 來操作頁面上的元素。此時的 DOM 稱為 DOM 層級 0。它只支援對頁面中的表單、連結和映像進行操作。

中間 DOM:中間 DOM(Intermediate DOM)指的是 DOM 層級 0 和 DOM 層級 1 之間的一個中間版本。在這個版本中,可以通過 JavaScript 來改變頁面的樣式表。另外,頁面上更多的元素可以通過 DOM 來進行操作。

DOM 層級 1:DOM 層級 1 是由 W3C 制定的 DOM 規範標準,在 1998 年發布。DOM 層級 1 的規範定義了訪問和操作 HTML 頁面中元素的基本方式。

DOM 層級 2:DOM 層級 2 在 DOM 層級 1 的基礎上增加了 getElementById()方法、DOM 遍曆和範圍、名稱空間和 CSS 的支援。

DOM 層級 3:DOM 層級 3 在 DOM 層級 2 的基礎上增加了 adoptNode()和 textContent等方法和屬性、文檔儲存和載入、文檔驗證和 XPath 等。

本文中將重點介紹 DOM 層級 1 和層級 2 的部分。這些部分的內容目前在不同瀏覽器之間的相容性較好,而且也很常用。下面重點介紹 DOM 規範中的基本元素。

DOM 基本元素

對於 HTML 文檔中的基本元素,DOM 都有一個抽象的介面與它對應。

文檔(Document):文檔介面用來表示整個 HTML 文檔。對文檔中其它元素和內容的訪問和操作,都是從這個介面出發的。

文檔片段(DocumentFragment):文檔片段用來表示整個文檔樹中的一個部分。

節點(Node):節點介面用來表示 HTML 文檔樹中的一個節點。這是一個抽象的介面,在文檔樹中具體存在的都是該介面的子類型,如元素、屬性和文本節點等。

節點列表(NodeList):節點列表表示的是節點的一個有序集合。它的作用類似於 Java 中的 java.util.List介面。可以通過節點在集合中的序號來擷取集合中的某個節點。

命名節點映射表(NamedNodeMap):命名節點映射表表示的是可以根據名稱來進行存取的節點集合。它的作用類似於 Java 中的 java.util.Map介面。

元素(Element):元素是節點的一種子類型,可以包含子節點和屬性。

屬性(Attr):屬性用來描述元素的特徵。它並不是文檔樹的一部分。

文本(Text):文本表示元素和屬性的常值內容。

DOM 異常(DOMException):DOM 異常用來表示 DOM 操作無法執行時的錯誤情況。DOM 異常中定義了一系列的出錯條件與錯誤碼。

DOM 實現(DOMImplementation):DOM 實現表示與 DOM 介面對應的具體實現。

這裡需要注意的是節點列表中的節點是動態,它反映的是最新的文檔結構。比如通過 DOM API 獲得了某個元素的子節點列表,如果其中的某個子節點被刪除,此節點就不會出現在之前的節點列表中。

在介紹完 DOM 的基本概念之後,下面介紹如何使用 DOM 對當前文檔樹進行查詢。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.