什么是DOM(Document Object Model)文檔對象模型
更新時間：2012年03月05日 17:34:00 作者：
文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結(jié)構(gòu)化的表示方法，可以改變文檔的內(nèi)容和呈現(xiàn)方式
D:document 文檔 瀏覽器加載的頁面
DOM O:object 對象 頁面及頁面中的任何元素都是對象
M:module 模型 頁面中的元素的組織形式
DOM被W3C組織設(shè)計為一種平臺無關(guān)、語言無關(guān)的API，程序或腳本通過其動態(tài)訪問、修改文檔的內(nèi)容、樣式、結(jié)構(gòu)。
DOM是web 瀏覽器的運(yùn)行規(guī)范，javascript借助DOM成就了其web標(biāo)準(zhǔn)語言的地位，在web領(lǐng)域?qū)崿F(xiàn)了所謂“一次編寫到處運(yùn)行”的目標(biāo)。
文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結(jié)構(gòu)化的表示方法，可以改變文檔的內(nèi)容和呈現(xiàn)方式。我們最為關(guān)心的是，DOM把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系了起來。
腳本開發(fā)人員可以通過文檔對象的屬性、方法和事件來掌控、操縱和創(chuàng)建動態(tài)的網(wǎng)頁元素。每一個網(wǎng)頁元素（一個HTML標(biāo)簽）都對應(yīng)著一個對象（object，所謂“對象”，用白話說就是“東西”。object這個詞在臺灣通常翻譯成“物件”）。網(wǎng)頁上的標(biāo)簽是一層層嵌套的，最外面的一層是<HTML>，文檔對象模型也這樣一層層嵌套著，但是通常被理解成一棵樹的形狀。樹根是window或document對象，相當(dāng)于最外層的標(biāo)簽的外圍，也就是整個文檔。樹根之下（這棵樹的圖通常是倒著畫，就好像遺傳譜系或者家譜那樣。樹根就是唯一的共同祖先）是子一級的對象，子對象也有它自己的子對象，除了根對象以外，所有的對象都有自己的父對象，同一對象的子對象之間就是兄弟的關(guān)系。
在這種由“父子兄弟”組成的“單性繁殖家族圖譜樹”框架結(jié)構(gòu)中，每個網(wǎng)頁元素都可以被確切地定位。文檔對象模型把整張網(wǎng)頁組織成這樣的一個樹狀的結(jié)構(gòu)，樹結(jié)構(gòu)中的每一個元素都被視為一個節(jié)點(diǎn)（node）。包括JavaScript在內(nèi)的各種編程語言都可以通過文檔對象模型來訪問和改變網(wǎng)頁的各種細(xì)節(jié)。
萬維網(wǎng)協(xié)會（World Wide Web Consortium，W3C）已經(jīng)給文檔對象模型制定了一系列標(biāo)準(zhǔn)，并且正在制定更多的相關(guān)標(biāo)準(zhǔn)。當(dāng)代的瀏覽器除支持其中的一部分標(biāo)準(zhǔn)之外，還支持某些早在W3C標(biāo)準(zhǔn)制定以前就流行了的歷史既成的編程接口。也就是說現(xiàn)在瀏覽器使用的技術(shù)歷史由來紛繁復(fù)雜，有些人們普遍使用的DOM技術(shù)并無標(biāo)準(zhǔn)可依。
我們將深入所有通用DOM的細(xì)節(jié)（包括IE瀏覽器中“與眾不同”的某些技術(shù)），以全面掌握面向?qū)嵺`的技術(shù)。
DOM和JavaScript
我經(jīng)常在QQ、MSN和email中被大家問到的“有關(guān)JavaScript”的問題，95%其實(shí)是DOM的問題。人們在習(xí)慣上不愛說DOM，要么就說JavaScript，要么就扯到“Ajax”（一度火爆的“概念”，最近剛剛有所降溫，一如上世紀(jì)末的“DHTML”那樣。對于這些熱點(diǎn)詞匯的產(chǎn)生，我個人感到非常欣慰，因為每一次都帶來人們對JavaScript技術(shù)的熱捧。下一個熱點(diǎn)詞匯是什么？也許我們可以炮制一個也說不定……Pseudo-Mashup，如何？）。
我們用JavaScript對網(wǎng)頁進(jìn)行的所有操作都是通過DOM進(jìn)行的。DOM屬于瀏覽器，而不是JavaScript語言規(guī)范里的規(guī)定的核心內(nèi)容，所以如果你下載一個JavaScript語言的參考幫助文檔來查的話，就連婦孺皆知的document.write方法也找不到。
下面這段代碼的作用是用一個提示框逐個顯示網(wǎng)頁中所有鏈接的網(wǎng)址，代碼中被標(biāo)為紅色的部分就是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 是實(shí)現(xiàn)了Document接口的一個宿主對象。document掌控著網(wǎng)頁里的所有東西。
DOM1核心 為Document 接口定義了 getElementsByTagName() 方法。這個方法返回一個節(jié)點(diǎn)列表（NodeList） ，也就是一種DOM特有的包含節(jié)點(diǎn)的數(shù)組，包含了所有符合匹配參數(shù)條件的標(biāo)簽，按照在文檔中出現(xiàn)的順序排列。于是anchorTags變量現(xiàn)在就成了一個節(jié)點(diǎn)列表。
;
分號是JavaScript里的語句結(jié)束符號。
for (var i = 0; i <
這是編程語言里典型的“for循環(huán)”。聲明了循環(huán)變量i，逐個處理anchorTags節(jié)點(diǎn)列表里的每一個節(jié)點(diǎn)。這也是JavaScript的東西。
anchorTags.length
DOM1 核心 定義了NodeList接口的 length 屬性。這個屬性返回一個整數(shù)，就是節(jié)點(diǎn)列表里包含的節(jié)點(diǎn)數(shù)目。說起來JavaScript 的數(shù)組也有一個 length屬性。
; i++) {
典型的JavaScript變量增1運(yùn)算。
alert(
alert() 是一個DOM方法，彈出一個提示框，顯示傳遞給該方法的參數(shù)（字符串）。話說這個東西是通稱 0級DOM（DOM level 0）或DOM0的一些歷史既成的編程接口當(dāng)中的一員。DOM0 是一套“被某些瀏覽器所支持”的編程接口（事實(shí)上，市場上不存在不支持DOM0的瀏覽器，只有在某些軟件愛好者的收藏品中才能見得到），不屬于任何DOM標(biāo)準(zhǔn)規(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，與具體語言無關(guān)）的所謂“DOM方式”訪問某個節(jié)點(diǎn)列表中的一個項目的辦法是使用在NodeList接口中定義的item() 方法：anchorTags.item(1).href。但是大多數(shù)JavaScript實(shí)現(xiàn)程序都允許你使用這種簡單的類似于數(shù)組的語法，而這也是大多數(shù)人實(shí)際在用的方式。
+ "\n");
又一個字符串連接。在字符串的末尾加入一個回車符。
}
“for循環(huán)”結(jié)束。
DOM O:object 對象 頁面及頁面中的任何元素都是對象
M:module 模型 頁面中的元素的組織形式
DOM被W3C組織設(shè)計為一種平臺無關(guān)、語言無關(guān)的API，程序或腳本通過其動態(tài)訪問、修改文檔的內(nèi)容、樣式、結(jié)構(gòu)。
DOM是web 瀏覽器的運(yùn)行規(guī)范，javascript借助DOM成就了其web標(biāo)準(zhǔn)語言的地位，在web領(lǐng)域?qū)崿F(xiàn)了所謂“一次編寫到處運(yùn)行”的目標(biāo)。
文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結(jié)構(gòu)化的表示方法，可以改變文檔的內(nèi)容和呈現(xiàn)方式。我們最為關(guān)心的是，DOM把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系了起來。
腳本開發(fā)人員可以通過文檔對象的屬性、方法和事件來掌控、操縱和創(chuàng)建動態(tài)的網(wǎng)頁元素。每一個網(wǎng)頁元素（一個HTML標(biāo)簽）都對應(yīng)著一個對象（object，所謂“對象”，用白話說就是“東西”。object這個詞在臺灣通常翻譯成“物件”）。網(wǎng)頁上的標(biāo)簽是一層層嵌套的，最外面的一層是<HTML>，文檔對象模型也這樣一層層嵌套著，但是通常被理解成一棵樹的形狀。樹根是window或document對象，相當(dāng)于最外層的標(biāo)簽的外圍，也就是整個文檔。樹根之下（這棵樹的圖通常是倒著畫，就好像遺傳譜系或者家譜那樣。樹根就是唯一的共同祖先）是子一級的對象，子對象也有它自己的子對象，除了根對象以外，所有的對象都有自己的父對象，同一對象的子對象之間就是兄弟的關(guān)系。
在這種由“父子兄弟”組成的“單性繁殖家族圖譜樹”框架結(jié)構(gòu)中，每個網(wǎng)頁元素都可以被確切地定位。文檔對象模型把整張網(wǎng)頁組織成這樣的一個樹狀的結(jié)構(gòu)，樹結(jié)構(gòu)中的每一個元素都被視為一個節(jié)點(diǎn)（node）。包括JavaScript在內(nèi)的各種編程語言都可以通過文檔對象模型來訪問和改變網(wǎng)頁的各種細(xì)節(jié)。
萬維網(wǎng)協(xié)會（World Wide Web Consortium，W3C）已經(jīng)給文檔對象模型制定了一系列標(biāo)準(zhǔn)，并且正在制定更多的相關(guān)標(biāo)準(zhǔn)。當(dāng)代的瀏覽器除支持其中的一部分標(biāo)準(zhǔn)之外，還支持某些早在W3C標(biāo)準(zhǔn)制定以前就流行了的歷史既成的編程接口。也就是說現(xiàn)在瀏覽器使用的技術(shù)歷史由來紛繁復(fù)雜，有些人們普遍使用的DOM技術(shù)并無標(biāo)準(zhǔn)可依。
我們將深入所有通用DOM的細(xì)節(jié)（包括IE瀏覽器中“與眾不同”的某些技術(shù)），以全面掌握面向?qū)嵺`的技術(shù)。
DOM和JavaScript
我經(jīng)常在QQ、MSN和email中被大家問到的“有關(guān)JavaScript”的問題，95%其實(shí)是DOM的問題。人們在習(xí)慣上不愛說DOM，要么就說JavaScript，要么就扯到“Ajax”（一度火爆的“概念”，最近剛剛有所降溫，一如上世紀(jì)末的“DHTML”那樣。對于這些熱點(diǎn)詞匯的產(chǎn)生，我個人感到非常欣慰，因為每一次都帶來人們對JavaScript技術(shù)的熱捧。下一個熱點(diǎn)詞匯是什么？也許我們可以炮制一個也說不定……Pseudo-Mashup，如何？）。
我們用JavaScript對網(wǎng)頁進(jìn)行的所有操作都是通過DOM進(jìn)行的。DOM屬于瀏覽器，而不是JavaScript語言規(guī)范里的規(guī)定的核心內(nèi)容，所以如果你下載一個JavaScript語言的參考幫助文檔來查的話，就連婦孺皆知的document.write方法也找不到。
下面這段代碼的作用是用一個提示框逐個顯示網(wǎng)頁中所有鏈接的網(wǎng)址，代碼中被標(biāo)為紅色的部分就是DOM。
復(fù)制代碼 代碼如下:
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 是實(shí)現(xiàn)了Document接口的一個宿主對象。document掌控著網(wǎng)頁里的所有東西。
DOM1核心 為Document 接口定義了 getElementsByTagName() 方法。這個方法返回一個節(jié)點(diǎn)列表（NodeList） ，也就是一種DOM特有的包含節(jié)點(diǎn)的數(shù)組，包含了所有符合匹配參數(shù)條件的標(biāo)簽，按照在文檔中出現(xiàn)的順序排列。于是anchorTags變量現(xiàn)在就成了一個節(jié)點(diǎn)列表。
;
分號是JavaScript里的語句結(jié)束符號。
for (var i = 0; i <
這是編程語言里典型的“for循環(huán)”。聲明了循環(huán)變量i，逐個處理anchorTags節(jié)點(diǎn)列表里的每一個節(jié)點(diǎn)。這也是JavaScript的東西。
anchorTags.length
DOM1 核心 定義了NodeList接口的 length 屬性。這個屬性返回一個整數(shù)，就是節(jié)點(diǎn)列表里包含的節(jié)點(diǎn)數(shù)目。說起來JavaScript 的數(shù)組也有一個 length屬性。
; i++) {
典型的JavaScript變量增1運(yùn)算。
alert(
alert() 是一個DOM方法，彈出一個提示框，顯示傳遞給該方法的參數(shù)（字符串）。話說這個東西是通稱 0級DOM（DOM level 0）或DOM0的一些歷史既成的編程接口當(dāng)中的一員。DOM0 是一套“被某些瀏覽器所支持”的編程接口（事實(shí)上，市場上不存在不支持DOM0的瀏覽器，只有在某些軟件愛好者的收藏品中才能見得到），不屬于任何DOM標(biāo)準(zhǔn)規(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，與具體語言無關(guān)）的所謂“DOM方式”訪問某個節(jié)點(diǎn)列表中的一個項目的辦法是使用在NodeList接口中定義的item() 方法：anchorTags.item(1).href。但是大多數(shù)JavaScript實(shí)現(xiàn)程序都允許你使用這種簡單的類似于數(shù)組的語法，而這也是大多數(shù)人實(shí)際在用的方式。
+ "\n");
又一個字符串連接。在字符串的末尾加入一個回車符。
}
“for循環(huán)”結(jié)束。
相關(guān)文章
這些都是很基礎(chǔ)的，很簡單，記下來都是因為怕自己一時想不起來了，到時可以看看，順便鞏固下自己的基礎(chǔ)知識。2010-11-11
HTML Dom與Css的關(guān)系，大家都知道Css是用來美化網(wǎng)頁．更改網(wǎng)頁中元素的外觀．2010-10-10
這篇文章主要為大家介紹了前端單元測試之UI測試及功能性代碼測試教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
有關(guān)DOM元素與事件的3個謎題，學(xué)習(xí)與使用dom操作的朋友可以參考下。2010-11-11
Dom的功能確實(shí)很強(qiáng)大，在JavaScript的驅(qū)使下Dom能做的事太多了．2010-10-10
無論是在HTML里或XML文件里．都存在著子元素與兄弟元素的概念．那么我們?nèi)绾问褂肈om正確的操作這些元素．2010-10-10
從這張開始就和大家說一些實(shí)用的效果的寫法。當(dāng)然首當(dāng)其沖的就是我們可愛的TAB選項卡，用JQ寫選項卡當(dāng)然是很方便的而且方法也很多。其實(shí)用原生的JS寫選項卡方法也很多2012-04-04
關(guān)于firefox的ElementTraversal 接口 使用說明
關(guān)于firefox的ElementTraversal 接口 使用說明，需要的朋友可以參考下。2010-11-11
如果你還不了解Dom或不知道Dom的作用．請閱讀：Dom是什么？2010-10-10
DOM2非標(biāo)準(zhǔn)但卻支持很好的幾個屬性小結(jié)
DOM2非標(biāo)準(zhǔn)但卻支持很好的幾個屬性小結(jié)，需要dom操作的朋友可以參考下2012-01-01