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

　　以下是 DOM 的簡(jiǎn)明定義：

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

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

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

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

　　多姆從何而來(lái)?

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

　　導(dǎo)航到網(wǎng)站上的頁(yè)面。

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

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

　　DOM 充當(dāng)腳本和 HTML 文檔本身之間的中介。

　　我們可以使用 JavaScript、Python 和其他腳本語(yǔ)言來(lái)交互和操作 DOM。

　　親眼看看!

　　我鼓勵(lì)您打開(kāi)開(kāi)發(fā)人員控制臺(tái)并查看“網(wǎng)絡(luò)”選項(xiàng)卡。下載的第一個(gè)文件是文檔類型，它是HTML文檔!

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

　　在下圖中，該文檔稱為Document_Object_Model因?yàn)樗顷P(guān)于DOM上的維基百科頁(yè)面。

　　當(dāng)您查看響應(yīng)選項(xiàng)卡時(shí)，您會(huì)看到一個(gè)簡(jiǎn)單的 HTML 文件。

　　在 DOM 上導(dǎo)航維基百科 HTML 文檔的“響應(yīng)”選項(xiàng)卡

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

　　在 DOM 上導(dǎo)航維基百科 HTML 文檔

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

　　多姆是什么樣的?

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

　　DOM 樹(shù)的表示形式

　　樹(shù)的每個(gè)分支都以一個(gè)節(jié)點(diǎn)結(jié)束。每個(gè)節(jié)點(diǎn)都可以

　　包含對(duì)象

　　附加了事件處理程序

　　包含對(duì)象的節(jié)點(diǎn)

　　換句話說(shuō)，每個(gè)節(jié)點(diǎn)都可以包含可以通過(guò)編程方式訪問(wèn)的 HTML 元素。

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

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

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

　　元素：泛型類，表示元素的所有對(duì)象都從該類降級(jí)

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

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

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

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

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

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

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

　　什么是腳本中的 DOM?

　　在這一點(diǎn)上，應(yīng)該清楚的是DOM不是JavaScript或Python，也不是編程語(yǔ)言。問(wèn)“什么是 JavaScript 中的 DOM？”是沒(méi)有意義的。

　　DOM 被設(shè)計(jì)為獨(dú)立于任何特定的編程語(yǔ)言。

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

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

　　一般來(lái)說(shuō)，您希望將頁(yè)面 (HTML) 的結(jié)構(gòu)與 DOM (JavaScript) 的操作分開(kāi)。

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

　　關(guān)鍵要點(diǎn)

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

　　DOM 邏輯樹(shù)的每個(gè)分支都以一個(gè)節(jié)點(diǎn)結(jié)尾。

　　每個(gè)節(jié)點(diǎn)可以包含對(duì)象或具有事件處理程序。

　　DOM 獨(dú)立于任何特定的編程語(yǔ)言。

　　我們可以使用編程語(yǔ)言來(lái)訪問(wèn)和操作DOM。