DOM，即Document Object Model（文檔對象模型），是JavaScript的一個重要技術領域。在 DOM 中，所有的 HTML 元素都被定義為對象，這些對象通常擁有與之相關的方法和屬性。 DOM 提供了一種獨立于平臺的方式，使我們可以動態地訪問和操作網頁的內容。

DOM 是建立在瀏覽器對象模型（BOM）之上的一種對象模型。用于描述 HTML 文檔的 DOM 樹包含多個對象和節點，這些節點構成了層次結構。DOM 樹的根節點是文檔對象(document)，文檔對象包括了整個 HTML 頁面的對象，我們可以通過該對象來訪問文檔中的任何元素。下面的代碼可以在控制臺輸出文檔對象：

console.log(document);

在 DOM 中，最常見的操作之一就是通過 JavaScript 直接修改 HTML 元素。下面的代碼就是一個簡單的例子。它通過 JavaScript 來更改 ID 為 "demo" 的元素的 HTML 內容：

document.getElementById("demo").innerHTML = "Hello World!";

除了修改HTML內容之外，我們還可以通過 DOM 修改元素的屬性，比如修改元素的樣式等。下面是一個例子，通過修改背景顏色來改變元素的外觀。

var x = document.getElementById("myDiv");
x.style.backgroundColor = "#f6f6f6";

通過解析 DOM 樹，我們可以訪問和操作文檔中的所有元素。 DOM 操作可以幫助我們實現許多功能，如添加、移動、刪除元素等。下面的代碼在 ID 為 "myList" 的列表中添加了一個新的列表項：

var node = document.createElement("li");  
var textnode = document.createTextNode("Item 4"); 
node.appendChild(textnode);                  
document.getElementById("myList").appendChild(node);

我們也可以通過 DOM 獲取輸入框的值，并在頁面上顯示出來。下面的示例代碼演示了如何獲取 HTML 輸入字段中的值，并將該值顯示在頁面上：

var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = "你的輸入值是：" + x;

DOM 操作是網頁開發的核心之一。JavaScript 與 DOM 結合使用可以實現強大的功能，如響應用戶輸入、改變 HTML 元素的內容和屬性、創建和刪除元素等。上面的例子只是冰山一角，DOM 功能是非常強大和復雜的。我們可以通過不同的 DOM 方法和屬性，實現任何我們需要的交互和動態效果。