資訊專(zhuān)欄INFORMATION COLUMN
摘要：最后表示，就是中表示各個(gè)對(duì)象之間的關(guān)系。的定義由于的標(biāo)準(zhǔn)規(guī)范是由組織起草并定義的，所以對(duì)的定義是目前最權(quán)威的解釋。瀏覽器的支持目前幾乎所有的瀏覽器都支持的內(nèi)容。而組織定義的標(biāo)準(zhǔn)規(guī)范，主要也是為了解決在不同瀏覽器的差異問(wèn)題。
DOM 是什么
DOM 被設(shè)計(jì)用于解析 HTML 頁(yè)面文檔，方便 JavaScript 語(yǔ)言通過(guò) DOM 訪問(wèn)和操作 HTML 頁(yè)面中的內(nèi)容。
DOM 是由 W3C 組織定義標(biāo)準(zhǔn)規(guī)范，并且由各大瀏覽器廠商支持。嚴(yán)格意義上來(lái)講，DOM 并非屬于 JavaScript 語(yǔ)言。
在其他開(kāi)發(fā)語(yǔ)言中，也支持 DOM 的標(biāo)準(zhǔn)規(guī)范，例如 PHP 語(yǔ)言。
我們之所以可以在 JavaScript 語(yǔ)言中使用 DOM，是因?yàn)楦鞔鬄g覽器將 DOM 的標(biāo)準(zhǔn)規(guī)范內(nèi)容封裝成了 JavaScript 語(yǔ)言所支持的形式。
對(duì)于 DOM 中的對(duì)象，我們只有調(diào)用的權(quán)限，沒(méi)有修改的權(quán)限，也說(shuō)明了這個(gè)問(wèn)題。
DOM 的具體含義是什么DOM 其實(shí)是個(gè)縮寫(xiě)，全稱(chēng)是 Document Object Model，被譯為 文檔對(duì)象模型。
其中 D 表示 Document，就是 DOM 將 HTML 頁(yè)面解析為一個(gè) 文檔。同時(shí)提供了 document 對(duì)象。
其次 O 表示 Object，就是 DOM 將 HTML 頁(yè)面中每個(gè)元素解析為一個(gè) 對(duì)象。例如 元素在 DOM 中對(duì)應(yīng)就是 HTMLBodyElement 對(duì)象。
最后 M 表示 Model，就是 DOM 中表示各個(gè)對(duì)象之間的關(guān)系。
DOM 是如何解析 HTML 頁(yè)面的呢模型（Model）主要是指 DOM 樹(shù)結(jié)構(gòu)。
瀏覽器加載并運(yùn)行 HTML 頁(yè)面后，會(huì)創(chuàng)建 DOM 結(jié)構(gòu)。由于 DOM 中的內(nèi)容被封裝成了 JavaScript 語(yǔ)言中的對(duì)象，所以我們可以使用 JavaScript 語(yǔ)言通過(guò) DOM 結(jié)構(gòu)來(lái)訪問(wèn)和操作 HTML 頁(yè)面中的內(nèi)容。
換句話講，DOM 可以理解為是 HTML 頁(yè)面與 JavaScript 語(yǔ)言之間的一個(gè)橋梁。
DOM 的定義由于 DOM 的標(biāo)準(zhǔn)規(guī)范是由 W3C 組織起草并定義的，所以 W3C 對(duì) DOM 的定義是目前最權(quán)威的解釋。
下面這段英文描述，就是 W3C 對(duì) DOM 的定義原文:
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.
下面這段是本人的翻譯（僅供參考）:
DOM 標(biāo)準(zhǔn)是獨(dú)立的DOM 是一個(gè)獨(dú)立于任何語(yǔ)言和平臺(tái)的接口，允許任何語(yǔ)言或腳本動(dòng)態(tài)地訪問(wèn)和更新 HTML 文檔的內(nèi)容、結(jié)構(gòu)和樣式。該 HTML 頁(yè)面可以進(jìn)一步處理，并且該處理的結(jié)果可以被合并到所呈現(xiàn)的 HTML 頁(yè)面中。
通過(guò) W3C 的定義，我們可以知道 DOM 是不屬于任何開(kāi)發(fā)語(yǔ)言的。當(dāng)然，DOM 也不會(huì)屬于 JavaScript 語(yǔ)言。
任何一個(gè)開(kāi)發(fā)語(yǔ)言，只要支持了 DOM 的標(biāo)準(zhǔn)規(guī)范，都可以通過(guò) DOM 訪問(wèn)和操作 HTML 頁(yè)面。
換句話講，DOM 在不同開(kāi)發(fā)語(yǔ)言中，有著不同的使用形式。但最核心的標(biāo)準(zhǔn)規(guī)范都是一樣的，只是具體使用的開(kāi)發(fā)語(yǔ)言的語(yǔ)法不同而已。
比如下面這段代碼，就是 JavaScript 中的 DOM 內(nèi)容:
var btn = document.getElementById("btn");
var className = btn.className;
className += " animate";
btn.className = className;
DOM 的作用
通過(guò) W3C 的定義，我們還可以知道 DOM 主要是用來(lái)解析 HTML 頁(yè)面的。也就是只要支持 DOM 的標(biāo)準(zhǔn)規(guī)范的開(kāi)發(fā)語(yǔ)言，都可以通過(guò) DOM 訪問(wèn)和更新 HTML 頁(yè)面的內(nèi)容、結(jié)構(gòu)和樣式。
瀏覽器的支持早期的 DOM 除了可以訪問(wèn)和更新 HTML 頁(yè)面外，還可以訪問(wèn)和更新 XML 文檔。但目前 XML 文檔的使用場(chǎng)景越來(lái)越少，再加上 Web 前端開(kāi)發(fā)需求越來(lái)越多。導(dǎo)致 DOM 主要用來(lái)訪問(wèn)和更新 HTML 頁(yè)面了。
目前幾乎所有的瀏覽器都支持 DOM 的內(nèi)容。但是不是支持的是 W3C 對(duì) DOM 的標(biāo)準(zhǔn)規(guī)范呢？
瀏覽器和 W3C 誰(shuí)更早瀏覽器對(duì) DOM 的支持遠(yuǎn)早于 W3C 定義 DOM 的標(biāo)準(zhǔn)規(guī)范。也就是說(shuō)，在 W3C 定義 DOM 的標(biāo)準(zhǔn)規(guī)范之前，各大瀏覽器就支持了 DOM。
最早，是 Navigator 瀏覽器支持 DOM。但只是提供了 Document 對(duì)象的一些屬性和方法。
后期，IE 瀏覽器也加入了對(duì) DOM 的支持。但 IE 瀏覽器與 Navigator 瀏覽器所支持的 DOM 是有區(qū)別的。
這也是 DOM 在不同瀏覽器中的兼容問(wèn)題。
而 W3C 組織定義 DOM 的標(biāo)準(zhǔn)規(guī)范，主要也是為了解決 DOM 在不同瀏覽器的差異問(wèn)題。
雖然，自從 W3C 定義了 DOM 的標(biāo)準(zhǔn)規(guī)范后，瀏覽器的兼容問(wèn)題好了很多。但，各大瀏覽器都或多或少地?cái)U(kuò)展了 W3C 定義的 DOM 標(biāo)準(zhǔn)。
在實(shí)際開(kāi)發(fā)中，盡量使用 W3C 的 DOM 標(biāo)準(zhǔn)規(guī)范，以避免更多的瀏覽器兼容問(wèn)題。
本教程免費(fèi)開(kāi)源，任何人都可以免費(fèi)學(xué)習(xí)、分享，甚至可以進(jìn)行修改。但需要注明作者及來(lái)源，并且不能用于商業(yè)。
本教程采用知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議進(jìn)行許可。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83906.html
摘要：元素之間的關(guān)系在元素樹(shù)結(jié)構(gòu)中，主要具有以下三層關(guān)系。祖先與后代如果我們將頁(yè)面中某一個(gè)元素作為祖先的話，那包含在該元素內(nèi)的所有元素除子級(jí)之外的都可以稱(chēng)為該元素的后代。兄弟關(guān)系具有相同父級(jí)元素的兩個(gè)或幾個(gè)元素之間就是兄弟關(guān)系。 DOM 元素樹(shù)結(jié)構(gòu)與 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)很相似，區(qū)別僅在于是利用節(jié)點(diǎn)解析 HTML 元素，還是利用元素解析 HTML 元素。 DOM 樹(shù)結(jié)構(gòu) 還記得下面這張圖嗎? ...
摘要：簡(jiǎn)單來(lái)說(shuō)，節(jié)點(diǎn)作為樹(shù)結(jié)構(gòu)中的連接點(diǎn)，最終構(gòu)成了完整的樹(shù)結(jié)構(gòu)。節(jié)點(diǎn)樹(shù)結(jié)構(gòu)通過(guò)節(jié)點(diǎn)概念，我們可以將原本的樹(shù)結(jié)構(gòu)改成節(jié)點(diǎn)樹(shù)結(jié)構(gòu)進(jìn)行表示。節(jié)點(diǎn)之間的關(guān)系中的表示模型，也可以用來(lái)表示節(jié)點(diǎn)樹(shù)結(jié)構(gòu)中節(jié)點(diǎn)之間的關(guān)系。值得注意的是和元素并不是兄弟關(guān)系。 DOM 樹(shù)結(jié)構(gòu) DOM 之所以可以訪問(wèn)和更新 HTML 頁(yè)面中的內(nèi)容、結(jié)構(gòu)和樣式，是因?yàn)?DOM 將 HTML 頁(yè)面解析為一個(gè) 樹(shù)結(jié)構(gòu)。 例如下面這段代...
摘要：而標(biāo)準(zhǔn)規(guī)范中提供了對(duì)象，主要是依靠元素樹(shù)結(jié)構(gòu)訪問(wèn)和更新頁(yè)面的內(nèi)容。值得注意的是所有的頁(yè)面的元素都是對(duì)象，而這個(gè)對(duì)象又是繼承于對(duì)象的。我們可以簡(jiǎn)單地理解對(duì)象是對(duì)象的補(bǔ)充。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國(guó)際許可協(xié)議進(jìn)行許可。 DOM 的標(biāo)準(zhǔn)規(guī)范中提供了 Element 對(duì)象，該對(duì)象提供了 HTML 頁(yè)面中所有元素所具有的屬性和方法。 我們都知道 DOM 標(biāo)準(zhǔn)規(guī)范中提供了 Nod...
摘要：對(duì)象的作用樹(shù)結(jié)構(gòu)主要是依靠節(jié)點(diǎn)進(jìn)行解析，稱(chēng)為節(jié)點(diǎn)樹(shù)結(jié)構(gòu)。對(duì)象的繼承鏈關(guān)系對(duì)象是繼承于對(duì)象的，是一個(gè)用于接收事件的對(duì)象。但需要注明作者及來(lái)源，并且不能用于商業(yè)。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國(guó)際許可協(xié)議進(jìn)行許可。 DOM 的標(biāo)準(zhǔn)規(guī)范中提供了 Node 對(duì)象，該對(duì)象主要提供了用于解析 DOM 節(jié)點(diǎn)樹(shù)結(jié)構(gòu)的屬性和方法。 Node 對(duì)象的作用 DOM 樹(shù)結(jié)構(gòu)主要是依靠節(jié)點(diǎn)進(jìn)行解析，...
摘要：對(duì)象的作用對(duì)象作為訪問(wèn)和更新頁(yè)面內(nèi)容的入口。這個(gè)結(jié)果充分地說(shuō)明了對(duì)象在的標(biāo)準(zhǔn)規(guī)范中代表整個(gè)頁(yè)面。對(duì)象的繼承鏈對(duì)象是繼承于對(duì)象的。對(duì)象也是的標(biāo)準(zhǔn)規(guī)范中非常重要的對(duì)象之一，而對(duì)象又是繼承于對(duì)象。 Document 對(duì)象是 DOM 的標(biāo)準(zhǔn)規(guī)范中比較重要的對(duì)象之一。該對(duì)象提供了訪問(wèn)和更新 HTML 頁(yè)面內(nèi)容的屬性和方法。 Document 對(duì)象的作用 Document 對(duì)象作為 DOM 訪問(wèn)和...
閱讀 1530·2021-11-25 09:43
閱讀 1984·2021-11-12 10:36
閱讀 6365·2021-09-22 15:05
閱讀 3597·2019-08-30 15:55
閱讀 2134·2019-08-26 14:06
閱讀 3722·2019-08-26 12:17
閱讀 587·2019-08-23 17:55
閱讀 2530·2019-08-23 16:23
