DOM 的概述以及 DOM 中的每個節(jié)點所表示的內(nèi)容。您將不再詢問什么是腳本中的DOM。

　　以下是 DOM 的簡明定義：

　　文檔對象模型 (DOM) 是構(gòu)成 Web 上文檔(例如網(wǎng)站)的結(jié)構(gòu)和內(nèi)容的對象的數(shù)據(jù)表示形式。

　　通俗地說，DOM代表您網(wǎng)站的結(jié)構(gòu)。

　　一旦你理解了 DOM，你可能想了解影子 DOM 和虛擬 DOM 之間的區(qū)別(在 React 和 Vue 中使用)。

　　DOM 表示您網(wǎng)站的結(jié)構(gòu)。

　　多姆從何而來?

　　了解以下步驟將更容易掌握DOM的概念。

　　導航到網(wǎng)站上的頁面。

　　您的瀏覽器將該頁面的 HTML 文檔下載到本地內(nèi)存中。

　　瀏覽器加載頁面，創(chuàng)建該頁面的文檔對象模型，該頁面是 HTML 文檔的表示形式。

　　DOM 充當腳本和 HTML 文檔本身之間的中介。

　　我們可以使用 JavaScript、Python 和其他腳本語言來交互和操作 DOM。

　　親眼看看!

　　我鼓勵您打開開發(fā)人員控制臺并查看“網(wǎng)絡”選項卡。下載的第一個文件是文檔類型，它是HTML文檔!

　　不要被 HTML 文檔的名稱欺騙!

　　在下圖中，該文檔稱為Document_Object_Model因為它是關(guān)于DOM上的維基百科頁面。

　　當您查看響應選項卡時，您會看到一個簡單的 HTML 文件。

　　在 DOM 上導航維基百科 HTML 文檔的“響應”選項卡

　　我們可以預覽 HTML 文件。這就是 HTML 文件的外觀。

　　在 DOM 上導航維基百科 HTML 文檔

　　只有在這一點之后，瀏覽器才會加載頁面，從而創(chuàng)建文檔對象模型。

　　多姆是什么樣的?

　　當瀏覽器加載頁面時，它會將 DOM 創(chuàng)建為表示基礎(chǔ) HTML 文檔的樹結(jié)構(gòu)。

　　DOM 樹的表示形式

　　樹的每個分支都以一個節(jié)點結(jié)束。每個節(jié)點都可以

　　包含對象

　　附加了事件處理程序

　　包含對象的節(jié)點

　　換句話說，每個節(jié)點都可以包含可以通過編程方式訪問的 HTML 元素。

　　DOM 接口允許以編程方式訪問樹。使用它們，您可以更改文檔的結(jié)構(gòu)、樣式或內(nèi)容。

　　以下是 DOM 接口的一些示例：

　　文檔：表示網(wǎng)頁本身，它是所有內(nèi)容所在的 DOM 樹的入口點。通過使用類似于獲取文檔中與指定選擇器匹配的第一個 Element 節(jié)點之類的方法。還有更多的方法。querySelector()

　　元素：泛型類，表示元素的所有對象都從該類降級

　　窗口：表示包含 DOM 文檔的窗口。上面提到的文檔界面是指此窗口中的文檔。

　　具有事件處理程序的節(jié)點

　　上面介紹的相同接口具有可以觸發(fā) DOM 操作的事件處理程序。

　　文檔 — 滾輪事件。 當用戶旋轉(zhuǎn)車輪時，將觸發(fā)車輪事件

　　元素 — 錯誤事件。在資源加載失敗或無法使用時觸發(fā)。

　　窗口 — 調(diào)整大小事件。在調(diào)整窗口大小時觸發(fā)。

　　可用于操作和創(chuàng)建網(wǎng)頁的所有屬性、方法和事件都組織到對象中。

　　什么是腳本中的 DOM?

　　在這一點上，應該清楚的是DOM不是JavaScript或Python，也不是編程語言。問“什么是 JavaScript 中的 DOM？”是沒有意義的。

　　DOM 被設(shè)計為獨立于任何特定的編程語言。

　　多虧了這個選擇，你可以用蟒蛇和爪哇腳本等語言訪問DOM。通常，它們是用腳本編寫的，可以由程序或瀏覽器執(zhí)行。

　　以下是腳本在 HTML 文檔中的外觀：

　　一般來說，您希望將頁面 (HTML) 的結(jié)構(gòu)與 DOM (JavaScript) 的操作分開。

　　因此，元素要么包含腳本語句(如上例所示)，要么通過 屬性指向外部腳本文件。

　　關(guān)鍵要點

　　DOM 是 HTML 頁面的結(jié)構(gòu)和內(nèi)容的表示形式。

　　DOM 邏輯樹的每個分支都以一個節(jié)點結(jié)尾。

　　每個節(jié)點可以包含對象或具有事件處理程序。

　　DOM 獨立于任何特定的編程語言。

　　我們可以使用編程語言來訪問和操作DOM。