JavaScript - 文件物件模型 (DOM)

HTML DOM 允許 JavaScript 訪問和修改 HTML 元素的內容。JavaScript 可以更改頁面中的所有 HTML 元素、屬性、CSS 樣式。JavaScript 還可以新增、刪除 HTML 元素和屬性。使用 JavaScript，我們甚至可以在頁面中建立新的事件。

每個網頁都位於瀏覽器視窗內，可以將其視為一個物件。

Document 物件表示顯示在該視窗中的 HTML 文件。Document 物件具有各種屬性，這些屬性引用其他物件，這些物件允許訪問和修改文件內容。

什麼是 DOM？

DOM 是文件物件模型 (Document Object Model) 的縮寫。它是一個用於 Core、XML 和 HTML DOM 的程式設計介面。

它是 W3C（全球資訊網聯盟）標準。

DOM 定義了網頁或文件的邏輯或樹狀結構。在樹中，每個分支都以一個節點結束，每個節點都包含物件。DOM 方法允許我們以程式設計方式訪問樹。使用 DOM 方法，您可以更改文件的結構、內容或樣式。

HTML 建立網頁的結構，JavaScript 透過操作 HTML 元素向網頁新增互動。

JavaScript 無法直接與 HTML 元素互動。因此，每當網頁在瀏覽器中載入時，它都會建立一個 DOM。

因此，文件物件表示顯示在該視窗中的 HTML 文件。此外，網頁中的每個 iframe 都建立一個新的 DOM。Document 物件具有各種屬性，這些屬性引用其他物件，這些物件允許訪問和修改文件內容。

訪問和修改文件內容的方式稱為文件物件模型或DOM。物件以層次結構組織。這種層次結構適用於 Web 文件中物件的組織。

以下是一些重要物件的簡單層次結構：

存在多個 DOM。以下部分將詳細解釋這些 DOM 中的每一個，並描述如何使用它們來訪問和修改文件內容。

傳統 DOM - 這是在早期版本的 JavaScript 語言中引入的模型。所有瀏覽器都很好地支援它，但它只能訪問文件的某些關鍵部分，例如表單、表單元素和影像。
W3C DOM - 此文件物件模型允許訪問和修改所有文件內容，並由全球資訊網聯盟 (W3C) 標準化。幾乎所有現代瀏覽器都支援此模型。

根據 W3C，DOM 有三種不同的型別。

如上所述，當網頁載入到瀏覽器視窗中時，它會成為一個文件物件。

之後，JavaScript 可以訪問 HTML 元素並在其上執行其他操作。這意味著 JavaScript 可以使用 HTML DOM 與網頁互動。

例如，JavaScript 可以使用文件物件對 HTML 元素執行以下操作。

然而，文件物件還有其他用途，我們將在後續章節中介紹。

DOM介面是DOM的實際元件，它們與JavaScript或任何其他程式語言一起工作以操縱網頁。它們提供各種方法和屬性來互動和操縱網頁。

DOM介面列表如下：

列印頁面