【EASYDOM系列教程】之DOM 簡介

時間 2019-11-05

標籤 EASYDOM系列教程 dom 簡介欄目 HTML 简体版

原文原文鏈接

DOM 是什麼

DOM 被設計用於解析 HTML 頁面文檔，方便 JavaScript 語言經過 DOM 訪問和操做 HTML 頁面中的內容。javascript

DOM 是由 W3C 組織定義標準規範，而且由各大瀏覽器廠商支持。嚴格意義上來說，DOM 並不是屬於 JavaScript 語言。前端

在其餘開發語言中，也支持 DOM 的標準規範，例如 PHP 語言。java

咱們之因此能夠在 JavaScript 語言中使用 DOM，是由於各大瀏覽器將 DOM 的標準規範內容封裝成了 JavaScript 語言所支持的形式。瀏覽器

對於 DOM 中的對象，咱們只有調用的權限，沒有修改的權限，也說明了這個問題。學習

DOM 的具體含義是什麼

DOM 實際上是個縮寫，全稱是 Document Object Model，被譯爲 文檔對象模型。spa

其中 D 表示 Document，就是 DOM 將 HTML 頁面解析爲一個文檔。同時提供了 document 對象。翻譯

其次 O 表示 Object，就是 DOM 將 HTML 頁面中每一個元素解析爲一個對象。例如 <body> 元素在 DOM 中對應就是 HTMLBodyElement 對象。設計

最後 M 表示 Model，就是 DOM 中表示各個對象之間的關係。3d

模型（Model）主要是指 DOM 樹結構。code

DOM 是如何解析 HTML 頁面的呢

瀏覽器加載並運行 HTML 頁面後，會建立 DOM 結構。因爲 DOM 中的內容被封裝成了 JavaScript 語言中的對象，因此咱們可使用 JavaScript 語言經過 DOM 結構來訪問和操做 HTML 頁面中的內容。

換句話講，DOM 能夠理解爲是 HTML 頁面與 JavaScript 語言之間的一個橋樑。

DOM 的定義

因爲 DOM 的標準規範是由 W3C 組織起草並定義的，因此 W3C 對 DOM 的定義是目前最權威的解釋。

下面這段英文描述，就是 W3C 對 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 是一個獨立於任何語言和平臺的接口，容許任何語言或腳本動態地訪問和更新 HTML 文檔的內容、結構和樣式。該 HTML 頁面能夠進一步處理，而且該處理的結果能夠被合併到所呈現的 HTML 頁面中。

DOM 標準是獨立的

經過 W3C 的定義，咱們能夠知道 DOM 是不屬於任何開發語言的。固然，DOM 也不會屬於 JavaScript 語言。

任何一個開發語言，只要支持了 DOM 的標準規範，均可以經過 DOM 訪問和操做 HTML 頁面。

換句話講，DOM 在不一樣開發語言中，有着不一樣的使用形式。但最核心的標準規範都是同樣的，只是具體使用的開發語言的語法不一樣而已。

好比下面這段代碼，就是 JavaScript 中的 DOM 內容:

var btn = document.getElementById('btn');
var className = btn.className;
className += ' animate';
btn.className = className;

DOM 的做用

經過 W3C 的定義，咱們還能夠知道 DOM 主要是用來解析 HTML 頁面的。也就是隻要支持 DOM 的標準規範的開發語言，均可以經過 DOM 訪問和更新 HTML 頁面的內容、結構和樣式。

早期的 DOM 除了能夠訪問和更新 HTML 頁面外，還能夠訪問和更新 XML 文檔。但目前 XML 文檔的使用場景愈來愈少，再加上 Web 前端開發需求愈來愈多。致使 DOM 主要用來訪問和更新 HTML 頁面了。

瀏覽器的支持

目前幾乎全部的瀏覽器都支持 DOM 的內容。可是不是支持的是 W3C 對 DOM 的標準規範呢？

瀏覽器和 W3C 誰更早

瀏覽器對 DOM 的支持遠早於 W3C 定義 DOM 的標準規範。也就是說，在 W3C 定義 DOM 的標準規範以前，各大瀏覽器就支持了 DOM。

最先，是 Navigator 瀏覽器支持 DOM。但只是提供了 Document 對象的一些屬性和方法。

後期，IE 瀏覽器也加入了對 DOM 的支持。但 IE 瀏覽器與 Navigator 瀏覽器所支持的 DOM 是有區別的。

這也是 DOM 在不一樣瀏覽器中的兼容問題。

而 W3C 組織定義 DOM 的標準規範，主要也是爲了解決 DOM 在不一樣瀏覽器的差別問題。

雖然，自從 W3C 定義了 DOM 的標準規範後，瀏覽器的兼容問題好了不少。但，各大瀏覽器都或多或少地擴展了 W3C 定義的 DOM 標準。

在實際開發中，儘可能使用 W3C 的 DOM 標準規範，以免更多的瀏覽器兼容問題。

本教程免費開源，任何人均可以避免費學習、分享，甚至能夠進行修改。但須要註明做者及來源，而且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。