JavaScript操做Dom對象

1文檔對象模型:html

文檔對象模型(Document Object Model,簡稱DOM),是W3C組織推薦的處理可擴展標誌語言的標準編程接口。在網頁上,組織頁面(或文檔)的對象被組織在一個樹形結構中,用來表示文檔中對象的標準模型就稱爲DOM。Document Object Model的歷史能夠追溯至1990年代後期微軟與Netscape的"瀏覽器大戰",雙方爲了在JavaScript與JScript一決生死,因而大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了很多專屬事物,既有VBScript、ActiveX、以及微軟自家的DHTML格式等,使很多網頁使用非微軟平臺及瀏覽器沒法正常顯示。DOM便是當時蘊釀出來的傑做。編程

DOM= Document Object Model,文檔對象模型,DOM能夠以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說,這是表示和處理一個HTML或XML文檔的經常使用方法。有一點很重要,DOM的設計是以對象管理組織(OMG)的規約爲基礎的,所以能夠用於任何編程語言。最初人們把它認爲是一種讓JavaScript在瀏覽器間可移植的方法,不過DOM的應用已經遠遠超出這個範圍。Dom技術使得用戶頁面能夠動態地變化,如能夠動態地顯示或隱藏一個元素,改變它們的屬性,增長一個元素等,Dom技術使得頁面的交互性大大地加強。瀏覽器

DOM其實是以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象、這些對象的行爲和屬性以及這些對象之間的關係。能夠把DOM認爲是頁面上數據和結構的一個樹形表示,不過頁面固然可能並非以這種樹的方式具體實現。編程語言

經過 JavaScript,您能夠重構整個 HTML 文檔。您能夠添加、移除、改變或重排頁面上的項目。函數

要改變頁面的某個東西,JavaScript 就須要得到對 HTML 文檔中全部元素進行訪問的入口。這個入口,連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性,都是經過文檔對象模型來得到的(DOM)。spa

在 1998 年,W3C 發佈了第一級的 DOM 規範。這個規範容許訪問和操做 HTML 頁面中的每個單獨的元素。設計

全部的瀏覽器都執行了這個標準,所以,DOM 的兼容性問題也難覓蹤跡了。htm

DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。對象

DOM 被分爲不一樣的部分(核心、XML及HTML)和級別(DOM Level 1/2/3):blog

DOM

DOM 是遵循 W3C(萬維網聯盟)的標準。

DOM 定義了訪問 HTML 和 XML 文檔的標準:

"W3C 文檔對象模型 (DOM) 是中立於平臺和語言的接口,它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"

W3C DOM 標準被分爲 3 個不一樣的部分:

  • 核心 DOM - 針對任何結構化文檔的標準模型
  • XML DOM - 針對 XML 文檔的標準模型
  • HTML DOM - 針對 HTML 文檔的標準模型

XMLDOM

XML DOM 是:

  • 用於 XML 的標準對象模型
  • 用於 XML 的標準編程接口
  • 中立於平臺和語言
  • W3C 標準

XML DOM 定義了全部 XML 元素的對象和屬性,以及訪問它們的方法(接口)。

換句話說:XML DOM 是用於獲取、更改、添加或刪除 XML 元素的標準。

HTMLDOM

HTML DOM 是:

  • HTML 的標準對象模型
  • HTML 的標準編程接口
  • W3C 標準

HTML DOM 定義了全部 HTML 元素的對象和屬性,以及訪問它們的方法(接口)。

換言之,HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標準。

DOM的分級

根據W3C DOM規範,DOM是HTML與XML的應用編程接口(API),DOM將整個頁面映射爲一個由層次節點組成的文件。有1級、2級、3級共3個級別。

1級DOM

1級DOM在1998年10月份成爲W3C的提議,由DOM核心與DOM HTML兩個模塊組成。DOM核心能映射以XML爲基礎的文檔結構,容許獲取和操做文檔的任意部分。DOM HTML經過添加HTML專用的對象與函數對DOM核心進行了擴展。

2級DOM

DOM鑑於1級DOM僅以映射文檔結構爲目標,DOM 2級面向更爲寬廣。經過對原有DOM的擴展,2級DOM經過對象接口增長了對鼠標和用戶界面事件(DHTML長期支持鼠標與用戶界面事件)、範圍、遍歷(重複執行DOM文檔)和層疊樣式表(CSS)的支持。同時也對DOM 1的核心進行了擴展,從而可支持XML命名空間。

2級DOM引進了幾個新DOM模塊來處理新的接口類型:

DOM視圖:描述跟蹤一個文檔的各類視圖(使用CSS樣式設計文檔先後)的接口;

DOM事件:描述事件接口;

DOM樣式:描述處理基於CSS樣式的接口;

DOM遍歷與範圍:描述遍歷和操做文檔樹的接口;

3級DOM

3級DOM經過引入統一方式載入和保存文檔和文檔驗證方法對DOM進行進一步擴展,DOM3包含一個名爲"DOM載入與保存"的新模塊,DOM核心擴展後可支持XML1.0的全部內容,包括XML Infoset、 XPath、和XML Base。

0級DOM

當閱讀與DOM有關的材料時,可能會遇到參考0級DOM的狀況。須要注意的是並無標準被稱爲0級DOM,它僅是DOM歷史上一個參考點(0級DOM被認爲是在Internet Explorer 4.0 與Netscape Navigator4.0支持的最先的DHTML)。

節點

根據 DOM,HTML 文檔中的每一個成分都是一個節點。

DOM 是這樣規定的:

整個文檔是一個文檔節點

每一個 HTML 標籤是一個元素節點

包含在 HTML 元素中的文本是文本節點

每個 HTML 屬性是一個屬性節點

註釋屬於註釋節點

Node層次

節點彼此都有等級關係。

HTML 文檔中的全部節點組成了一個文檔樹(或節點樹)。HTML 文檔中的每一個元素、屬性、文本等都表明着樹中的一個節點。樹起始於文檔節點,並由此繼續伸出枝條,直處處於這棵樹最低級別的全部文本節點爲止。

下面這個圖片表示一個文檔樹(節點樹):

文檔樹

請看下面這個HTML文檔:

<html>

<head>

<title>DOM Tutorial</title>

</head>

<body>

<h1>DOM Lesson one</h1>

<p>Hello world!</p>

</body>

</html>

  

上面全部的節點彼此間都存在關係

除文檔節點以外的每一個節點都有父節點。舉例,<head> 和 <body> 的父節點是 <html> 節點,文本節點 "Hello world!" 的父節點是 <p> 節點。

大部分元素節點都有子節點。比方說,<head> 節點有一個子節點:<title> 節點。<title> 節點也有一個子節點:文本節點 "DOM Tutorial"。

當節點分享同一個父節點時,它們就是同輩(同級節點)。比方說,<h1> 和 <p>是同輩,由於它們的父節點均是 <body> 節點。

節點也能夠擁有後代,後代指某個節點的全部子節點,或者這些子節點的子節點,以此類推。比方說,全部的文本節點都是 <html>節點的後代,而第一個文本節點是 <head> 節點的後代。

節點也能夠擁有先輩。先輩是某個節點的父節點,或者父節點的父節點,以此類推。比方說,全部的文本節點均可把 <html> 節點做爲先輩節點。

相關文章
相關標籤/搜索