摘要:最后表示,就是中表示各個對象之間的關系。的定義由于的標準規范是由組織起草并定義的,所以對的定義是目前最權威的解釋。瀏覽器的支持目前幾乎所有的瀏覽器都支持的內容。而組織定義的標準規范,主要也是為了解決在不同瀏覽器的差異問題。
DOM 是什么
DOM 被設計用于解析 HTML 頁面文檔,方便 JavaScript 語言通過 DOM 訪問和操作 HTML 頁面中的內容。
DOM 是由 W3C 組織定義標準規范,并且由各大瀏覽器廠商支持。嚴格意義上來講,DOM 并非屬于 JavaScript 語言。
在其他開發語言中,也支持 DOM 的標準規范,例如 PHP 語言。
我們之所以可以在 JavaScript 語言中使用 DOM,是因為各大瀏覽器將 DOM 的標準規范內容封裝成了 JavaScript 語言所支持的形式。
對于 DOM 中的對象,我們只有調用的權限,沒有修改的權限,也說明了這個問題。
DOM 的具體含義是什么DOM 其實是個縮寫,全稱是 Document Object Model,被譯為 文檔對象模型。
其中 D 表示 Document,就是 DOM 將 HTML 頁面解析為一個 文檔。同時提供了 document 對象。
其次 O 表示 Object,就是 DOM 將 HTML 頁面中每個元素解析為一個 對象。例如 元素在 DOM 中對應就是 HTMLBodyElement 對象。
最后 M 表示 Model,就是 DOM 中表示各個對象之間的關系。
DOM 是如何解析 HTML 頁面的呢模型(Model)主要是指 DOM 樹結構。
瀏覽器加載并運行 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 標準是獨立的DOM 是一個獨立于任何語言和平臺的接口,允許任何語言或腳本動態地訪問和更新 HTML 文檔的內容、結構和樣式。該 HTML 頁面可以進一步處理,并且該處理的結果可以被合并到所呈現的 HTML 頁面中。
通過 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 國際許可協議進行許可。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83906.html
摘要:元素之間的關系在元素樹結構中,主要具有以下三層關系。祖先與后代如果我們將頁面中某一個元素作為祖先的話,那包含在該元素內的所有元素除子級之外的都可以稱為該元素的后代。兄弟關系具有相同父級元素的兩個或幾個元素之間就是兄弟關系。 DOM 元素樹結構與 DOM 節點樹結構很相似,區別僅在于是利用節點解析 HTML 元素,還是利用元素解析 HTML 元素。 DOM 樹結構 還記得下面這張圖嗎? ...
摘要:簡單來說,節點作為樹結構中的連接點,最終構成了完整的樹結構。節點樹結構通過節點概念,我們可以將原本的樹結構改成節點樹結構進行表示。節點之間的關系中的表示模型,也可以用來表示節點樹結構中節點之間的關系。值得注意的是和元素并不是兄弟關系。 DOM 樹結構 DOM 之所以可以訪問和更新 HTML 頁面中的內容、結構和樣式,是因為 DOM 將 HTML 頁面解析為一個 樹結構。 例如下面這段代...
摘要:而標準規范中提供了對象,主要是依靠元素樹結構訪問和更新頁面的內容。值得注意的是所有的頁面的元素都是對象,而這個對象又是繼承于對象的。我們可以簡單地理解對象是對象的補充。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 DOM 的標準規范中提供了 Element 對象,該對象提供了 HTML 頁面中所有元素所具有的屬性和方法。 我們都知道 DOM 標準規范中提供了 Nod...
摘要:對象的作用樹結構主要是依靠節點進行解析,稱為節點樹結構。對象的繼承鏈關系對象是繼承于對象的,是一個用于接收事件的對象。但需要注明作者及來源,并且不能用于商業。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 DOM 的標準規范中提供了 Node 對象,該對象主要提供了用于解析 DOM 節點樹結構的屬性和方法。 Node 對象的作用 DOM 樹結構主要是依靠節點進行解析,...
摘要:對象的作用對象作為訪問和更新頁面內容的入口。這個結果充分地說明了對象在的標準規范中代表整個頁面。對象的繼承鏈對象是繼承于對象的。對象也是的標準規范中非常重要的對象之一,而對象又是繼承于對象。 Document 對象是 DOM 的標準規范中比較重要的對象之一。該對象提供了訪問和更新 HTML 頁面內容的屬性和方法。 Document 對象的作用 Document 對象作為 DOM 訪問和...
閱讀 1336·2021-11-25 09:43
閱讀 1895·2021-11-12 10:36
閱讀 5966·2021-09-22 15:05
閱讀 3480·2019-08-30 15:55
閱讀 2005·2019-08-26 14:06
閱讀 3640·2019-08-26 12:17
閱讀 492·2019-08-23 17:55
閱讀 2448·2019-08-23 16:23