什么是DOM(Document Object Model)文檔對象模型

更新時間：2012年03月05日 17:34:00 作者：

文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現(xiàn)方式

D:document 文檔瀏覽器加載的頁面

DOM O:object 對象頁面及頁面中的任何元素都是對象

M:module 模型頁面中的元素的組織形式

DOM被W3C組織設計為一種平臺無關、語言無關的API，程序或腳本通過其動態(tài)訪問、修改文檔的內容、樣式、結構。

DOM是web 瀏覽器的運行規(guī)范，javascript借助DOM成就了其web標準語言的地位，在web領域實現(xiàn)了所謂“一次編寫到處運行”的目標。

文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現(xiàn)方式。我們最為關心的是，DOM把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系了起來。

腳本開發(fā)人員可以通過文檔對象的屬性、方法和事件來掌控、操縱和創(chuàng)建動態(tài)的網(wǎng)頁元素。每一個網(wǎng)頁元素（一個HTML標簽）都對應著一個對象（object，所謂“對象”，用白話說就是“東西”。object這個詞在臺灣通常翻譯成“物件”）。網(wǎng)頁上的標簽是一層層嵌套的，最外面的一層是<HTML>，文檔對象模型也這樣一層層嵌套著，但是通常被理解成一棵樹的形狀。樹根是window或document對象，相當于最外層的標簽的外圍，也就是整個文檔。樹根之下（這棵樹的圖通常是倒著畫，就好像遺傳譜系或者家譜那樣。樹根就是唯一的共同祖先）是子一級的對象，子對象也有它自己的子對象，除了根對象以外，所有的對象都有自己的父對象，同一對象的子對象之間就是兄弟的關系。

在這種由“父子兄弟”組成的“單性繁殖家族圖譜樹”框架結構中，每個網(wǎng)頁元素都可以被確切地定位。文檔對象模型把整張網(wǎng)頁組織成這樣的一個樹狀的結構，樹結構中的每一個元素都被視為一個節(jié)點（node）。包括JavaScript在內的各種編程語言都可以通過文檔對象模型來訪問和改變網(wǎng)頁的各種細節(jié)。

萬維網(wǎng)協(xié)會（World Wide Web Consortium，W3C）已經(jīng)給文檔對象模型制定了一系列標準，并且正在制定更多的相關標準。當代的瀏覽器除支持其中的一部分標準之外，還支持某些早在W3C標準制定以前就流行了的歷史既成的編程接口。也就是說現(xiàn)在瀏覽器使用的技術歷史由來紛繁復雜，有些人們普遍使用的DOM技術并無標準可依。

我們將深入所有通用DOM的細節(jié)（包括IE瀏覽器中“與眾不同”的某些技術），以全面掌握面向實踐的技術。

DOM和JavaScript

我經(jīng)常在QQ、MSN和email中被大家問到的“有關JavaScript”的問題，95%其實是DOM的問題。人們在習慣上不愛說DOM，要么就說JavaScript，要么就扯到“Ajax”（一度火爆的“概念”，最近剛剛有所降溫，一如上世紀末的“DHTML”那樣。對于這些熱點詞匯的產(chǎn)生，我個人感到非常欣慰，因為每一次都帶來人們對JavaScript技術的熱捧。下一個熱點詞匯是什么？也許我們可以炮制一個也說不定……Pseudo-Mashup，如何？）。

我們用JavaScript對網(wǎng)頁進行的所有操作都是通過DOM進行的。DOM屬于瀏覽器，而不是JavaScript語言規(guī)范里的規(guī)定的核心內容，所以如果你下載一個JavaScript語言的參考幫助文檔來查的話，就連婦孺皆知的document.write方法也找不到。

下面這段代碼的作用是用一個提示框逐個顯示網(wǎng)頁中所有鏈接的網(wǎng)址，代碼中被標為紅色的部分就是DOM。

復制代碼代碼如下:

 
var anchorTags = document.getElementsByTagName("a"); 
for (var i = 0; i < anchorTags.length ; i++) 
{ 
alert("Href of this a element is : " + anchorTags[i].href + "\n"); 
} 

這樣一來哪些是核心JavaScript，哪些是DOM，各自起什么作用，就可以一目了然了。

var anchorTags =
創(chuàng)建了一個名為 anchorTags 的 JavaScript 變量。

document.getElementsByTagName("a")
Document接口是 DOM1核心（DOM1 Core）規(guī)范中定義的第一個接口，而 document 是實現(xiàn)了Document接口的一個宿主對象。document掌控著網(wǎng)頁里的所有東西。
DOM1核心為Document 接口定義了 getElementsByTagName() 方法。這個方法返回一個節(jié)點列表（NodeList），也就是一種DOM特有的包含節(jié)點的數(shù)組，包含了所有符合匹配參數(shù)條件的標簽，按照在文檔中出現(xiàn)的順序排列。于是anchorTags變量現(xiàn)在就成了一個節(jié)點列表。

;
分號是JavaScript里的語句結束符號。

for (var i = 0; i <
這是編程語言里典型的“for循環(huán)”。聲明了循環(huán)變量i，逐個處理anchorTags節(jié)點列表里的每一個節(jié)點。這也是JavaScript的東西。

anchorTags.length
DOM1 核心定義了NodeList接口的 length 屬性。這個屬性返回一個整數(shù)，就是節(jié)點列表里包含的節(jié)點數(shù)目。說起來JavaScript 的數(shù)組也有一個 length屬性。

; i++) {
典型的JavaScript變量增1運算。

alert(
alert() 是一個DOM方法，彈出一個提示框，顯示傳遞給該方法的參數(shù)（字符串）。話說這個東西是通稱 0級DOM（DOM level 0）或DOM0的一些歷史既成的編程接口當中的一員。DOM0 是一套“被某些瀏覽器所支持”的編程接口（事實上，市場上不存在不支持DOM0的瀏覽器，只有在某些軟件愛好者的收藏品中才能見得到），不屬于任何DOM標準規(guī)范。

"Href of this a element is : " +
一個字符串字面量和一個字符串鏈接符。JavaScript的東西。

anchorTags[i].href
href 是 DOM1 HTML 規(guī)范中定義的 HTMLAnchorElement 接口的屬性，返回鏈接（<a>）元素的href屬性的值。

在此我們用了像anchorTags[i]這樣的用法，這和JavaScript里訪問第i個數(shù)組項的語法是一樣的。語言中性（language-neutral，與具體語言無關）的所謂“DOM方式”訪問某個節(jié)點列表中的一個項目的辦法是使用在NodeList接口中定義的item() 方法：anchorTags.item(1).href。但是大多數(shù)JavaScript實現(xiàn)程序都允許你使用這種簡單的類似于數(shù)組的語法，而這也是大多數(shù)人實際在用的方式。

+ "\n");
又一個字符串連接。在字符串的末尾加入一個回車符。

}
“for循環(huán)”結束。

您可能感興趣的文章: